Coding Standards -> Form/Web Pages

Form/Web Pages

Text, Labels

-->Less is more - users are often scanners not readers
-->Use text blocks and white spaces as design, use bullets, heading, paragraphs
-->Fonts can indicate herarchy of information

  Color

-->Be cautious of using color as the only means to convey information - use reduntant means
-->Use high contrast between text and background toe ease readong
-->Be aware of color blindness in users
-->Colors should only be used sparingly and with purpose.

Page Layout
-->Stick to conventional page layouts unless you have data to support others
-->Consider different layouts for info page versus application/from pages
-->Use on to many relationship to define a good page layout

Form Structure
-->Minimize or eliminate "extraneous" navigation
-->Should contain three common elements
->Orientation & identification
->Data
->Actions

Wizards & Guides Structure
-->Limit or remove navigation "outside" the wizard
-->Consider "Save & Close" functionality for long or "interruptible" tasks

Images
-->Often a picture isn't worth a thousand words when conveying info
-->Words work better tha icons for links and buttons
-->Keep images small
-->Should have meaning, not just decoration.

Icons
-->Can be tricky as meaning can be difficult to associate reliably
-->Make sure you do user testing
-->Consider value of metaphors in icon design
-->include a text the briefly describes the purpose of the icon or the action associated to the icon.

Navigation Bar
-->No hard limit on a number of items
-->Direct link to information architechture
-->Three states for links on navigation bar:active, pending and inactive
-->Can be used for orientation as well
-->User must know they are links
-->Can be horizontal (seems to be more popular) or vertical

Search
-->Can be challenging for user to understand search (users confuse logical And/Or - mental                                                                                                        models of search can vary)
-->Don't rely on search - good navigation will be better than search
-->Consider search scope
-->Usually placed on top of page
-->Results should display search criteria

Search
-->Radio buttons - for mutually exclusive selections
-->Check boxes - for selecting more than one at a time
-->Drop downs - usually no more than 12-15 items
-->Command buttons - for actions on data or objects
-->List - to large number of items

Comentarios

Entradas populares