Home

Design Patterns

Telerik RadMenu Nightmare

Posted February 25th, 2011 by KierenZ
| | | | | | | |

Hi All,

I am trying to edit the new 1700 template to fit with a website I am building. Most of the conversion is going well and I have to say that the new 1700 template is a lot cleaner and easier to understand than the previous templates. However, I am running into a lot of problems around the RadMenu component for the navigation.

RadMenu is inserting it's own styles and I can't find any way to override certain things like the background images.

read more | 8 comments

Flexible width on 1700 template for mobile

Posted February 4th, 2011 by jhull-jurkovic
| | | |

I am building out a mobile site on my demo image and came across the following issue – The typical resolution of a smartphone screen is 320x480 – i.e width is 320px (Most new smartphones are similar) I have created a website with the 1700 template in 15.1.3, and stripped out as much functionality as possible to make it really easy to read on a mobile. However, the 1700 template will not decrease in size below 750px - which means, when I access on my phone, it scales it down in size, making all the fonts hard to read. I thought this template was meant to be scalable for mobile. Does anyone know what I need to do to get it to have a flexible width down to 320px?

4 comments

Navigation, Breadcrumb

Posted January 12th, 2008 by Jim Sneeringer
|
Problem Summary: Customer needs to go to a page higher in the navigation hierarchy
Pattern Key: BREADCRUMB
Example:

read more | 2 comments

Great Site for Web Based UI developers

Posted December 6th, 2007 by Elliott OHara
| | | |

If you work on web based UI much, and you're a standards junkie...

Subscribe to http://www.alistapart.com

Great GREAT articles there. He just recently posted http://www.alistapart.com/articles/previewofhtml5

Got me all excited about HTML 5!

Elliott OHara's blog | login or register to post comments

Another Control for consistent HTML generation

Posted October 26th, 2007 by Elliott OHara
| | | | | | | |

Always a stickler for UI patterns and consistency, I’ve found another pattern that seems to be repeating a lot…

An object that has a title, a description and optionally a Thumbnail Image and (optionally again) a HighRes image.

read more | Elliott OHara's blog | 1 comment

Cross Browser More Info Control

Posted October 23rd, 2007 by Elliott OHara
| | | | |

So, I had quite a few senarios where I needed to display information that took up a whole lot of real estate, but was only needed for a short period of time. Sort of a "hover help" kinda thing. I googled it for a while, and really wanted a "pure css" solution, but after realizing how much "fussing" with it that was needed for it to actually work in IE6 (even IE7 requires a strict doctype to get the hover pseudo element to work properly on non anchor elements), I decided to just go with a JS solution.

read more | Elliott OHara's blog | 2 comments

Fields

Posted July 24th, 2007 by Jim Sneeringer
|
Problem Summary: Data is displayed
Pattern Key: FIELD
Example: See embedded Examples.
Use When: All fields
Solution:
  1. Do not display internal codes (especially system-generated Guids) to the customer.
    Examples: If 0 represents no selection, display something like "(None)," not "0." If 1-99999 represents a range of values starting at 1 with no maximum, display "1-", not "1-99999." Even if there is a physical limit to the maximum value, the customer only sees a value if he/she specified the value.
  2. Currency values are displayed in a fixed-width font with the proper number of decimal places for the currency (e.g. 2 places for US dollars), right aligned, and with no currency symbol. However, the abbreviation for the currency in use (e.g. USD) is displayed somewhere on every page that has currency values. If a page displays values in multiple currencies, then the currency for each value must be unambiguous.
  3. Dates and times are displayed according to the conventions of the locale.
  4. If the customer cannot enter a time, no time should be displayed. (Do not display midnight in this case.)
  5. Recommended: Display the day of the week only when it is helpful and there is space.
  6. Recommended: Display the month as a word (e.g. January) only when some formality is called for (i.e. in a printed letter) and there is space.
  7. Numeric values (including currency values) are displayed in a fixed-width font and right aligned. Note that alignment should be with other values, not with the right edge of the panel.
    Recommended:  Try to avoid different numbers of decimal places in the same column, or align to the decimal point.
    Exception:  ID numbers (such as zip codes, phone numbers, part numbers, SSN, and the like) are left aligned, even when they are entirely numeric.
    Examples:   Fields - Example - Currency alignment.png
  8. For numeric values where the number of places varies (e.g. quantities, which could be pounds, ounces, gallons, each, etc.) trailing zeros after the decimal place will be removed. For example, 3.00 shirts will be changed to 3 shirts.
    Rationale:  This may cause misalignment, but it is not that important because it will rarely happen and is not all that confusing. Nobody is going to be scanning the column or trying to add 3 shirts to 2.5 pounds of nails, so alignment is not all that important in this case.
  9. Display fields in the order they are usually displayed and in the order they normally occur.
    Example: On order forms, invoices, and throughout the system, the number of items precedes the unit of measure, so the user sees 1 Box, not Box 1.
  10. Omit labels and put several fields on a line when it is natural to do so and the meaning is clear.
    Example: 1 Box, not
       Quantity   1
       Unit   Box
  11. Recommended: Controls that are not available (because of other parameter choices, security, roles, etc.) are shown disabled (gray).
    Alternate: They may be hidden instead if a case can be made that the page would be too confusing or cluttered, taking into account the sophistication and training level of the user, and the likelihood that someone for whom controls are disabled or hidden would need those controls.
    Exception: Surf-to-Edit controls are hidden from those not authorized to use them.
  12. When a page is first displayed, the cursor is placed in the field where the customer is most likely to want to enter data, usually the first field on the page.
Rationale: See embedded Rationale notes.
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: Many places

Items of Note: None

read more | 4 comments

UPA Conference 2007 - Report to Date - June 12

Posted June 22nd, 2007 by Jim Sneeringer
| |

From: Jim Sneeringer [Jim@Sneeringer.com]
Sent: Tuesday, June 12, 2007 8:47 PM
To: UserExperience
Subject: UPA Conference Report to Date

Tutorial on Pattern Libraries

a. The main think I learned here is that Sara did a great job of setting up or template.

read more | Jim Sneeringer's blog | login or register to post comments | 1 attachment

UPA Tutorial --- Creating a Custom UI Pattern Library

Posted June 22nd, 2007 by Jim Sneeringer
| |

Attached is the workbook from "Creating a Custom UI Pattern Library"

From: Dean Barker [mailto:dean.barker@humanfactors.com]
Sent: Friday, June 22, 2007 12:49 PM
To: dean.barker@humanfactors.com; aadomenas@alta.com; ken.becker@intermec.com; denise.belling@gmail.com; mcamp@njm.com; elena.cistrunk@aristocrat-inc.com; erik.egbertson@autodesk.com; tony.fagerlund@swedbank.se; david.fine@bowne.com; anestes-fotiades@idexx.com; ngift@mit.edu; cgoings@google.com; ryangossen@yahoo.com; marlah@well.com; robin.k.hanks.ay3v@statefarm.com; whharrison4@yahoo.com; naomih@hiser.com.au; jjanis@progressive.com; kek@dk.ibm.com; lidlbare@yahoo.com; kleppner_andrew@emc.com; f3484134@yahoo.com; kmarshak@earthlink.net; susan.michael@thomas.com; linda_parra@tds.net; peter@half-tide.com; michael.rawlins@opensolutions.com; csossrickes@yahoo.com; jinwise@gmail.com; jill.shinkawa@hp.com; shilpa.shukla@hp.com; allison.smith@thomson.com; jim@sneeringer.com; erik.snell@autodesk.com; mike@lifename.com; darrell.h.taylor@ssa.gov; judi.m.victor@boeing.com; thomas.vollaro@autodesk.com; vutpakdi@acm.org; heather.walker@thomson.com; nancy.wojack@intermec.com

read more | Jim Sneeringer's blog | login or register to post comments | 1 attachment

Usability session: Designing a Specific Use Case Pattern Set for Enterprise apps

Posted June 21st, 2007 by Mary Connor
| | |

Presenters: Daniel Schwartz, Arin Bhowmick; Oracle

Summary of their experience:

• Specific use case design pattern set = domain abstraction
• Valuable for organizations of any size
• Documentation demands _large_ time commitment!
• Need to create balance, when to reference existing patterns vs. build new
• Critical: properly scope what are pattern vs. product features
• Critical: efficient post-design strategy (just as key as optimal design)
• Design pattern success = documenting best practices for domain + being actually implemented org-wide

read more | Mary Connor's blog | login or register to post comments