Home‎ > ‎

Style guide

Style guide

User Interface Design – standardization


Style guide. 1

User Interface Design – standardization. 1

Interface elements include (examples from jQuery), 1

Interactions include, 1

Best practice for designing interfaces. 1

Designing for interaction. 2

1.      Define How Users Can Interact with the Interface?. 2

2.      Give Users Clues about Behavior before Actions are Taken. 2

3.      Anticipate and Mitigate Errors. 2

4.      Consider System Feedback and Response Time. 2

5.      Strategically Think about Each Elements. 2

6.      Simplify for Learnability. 3


Interface must have elements that are easy to access, understand and facilitate actions users may intend to take. UI borrows from

  1. interaction design,
  2. interactions,
  3. visual design and
  4. Information architecture.

Users familiar with interaction elements come to expect them to behave in a familiar way, encouraging consistency and predictability in their selection and use. This facilitates efficient interaction in completing tasks, with the emphasis shifting to getting things done instead of figuring out by learning how to get things done when presented an unfamiliar interface.

Interface elements include (examples from jQuery)

·         input controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date fields (Button, Checkboxradio, Datepicker, Menu widgets)

·         navigational components: breadcrumb, slider, search field, pagination, slider, tags, icons (Slider, Selectmenu widgets)

·         informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows (Tooltip, Progressbar widgets)

·         containers: accordion, that is collapsible content panel (Accordion widget)


  • dragging
  • dropping
  • resizing
  • selecting
  • sorting

Best practice for designing interfaces

  • Keep it simple
  • Create consistency, for transferring memory of prior use to other parts of site/whole
  • Purpose in layout
  • Colour and texture as guides
  • Typography to create hierarchy and clarity, sizes and fonts to arrange text for quick scanning, legibility and readability
  • System should communicate what’s happening
  • Think through defaults

[Jess James Garrett’s The Elements of User Experience: user-centred design for the web and beyond]

Designing for interaction

1.     Define How Users Can Interact with the Interface?

·         Direct interactions include pushing buttons, dragging and dropping across the interface, etc.

·         Indirect are copying and pasting.

2.     Give Users Clues about Behavior before Actions are Taken

·         What about the appearance (color, shape, size, etc) gives the user a clue about how it may function?

·         Tell users what will happen if they decide to move forward with their action. This can include a meaningful label on a button, instructions before a final submission, etc.

3.     Anticipate and Mitigate Errors

·         placing constraints forces the user to adjust their behaviour in order to move forward with their intended action

·         Helpful error messages provide solutions and context.

4.     Consider System Feedback and Response Time

·         On performing an action, the system needs to acknowledge the action and let the user know what it is doing.

·         Time between an action and the system’s response time?

Responsiveness (latency) can be characterized at four levels: immediate (less than 0.1 second), stammer (0.1-1 second), interruption (1-10 seconds), and disruption (more than 10 seconds).

5.     Strategically Think about Each Elements

·         Are interface elements big enough to interact with?

Elements, such as buttons, need to be big enough for a user to be able to click it. Particularly important in a mobile context that likely includes a touch component.

·         Are edges and corners being used to locate interactive elements like menus?

·         Follow standards. Only depart from a standard if there’s a new way to improve upon the old

6.     Simplify for Learnability

·         Is information chunked into seven (plus minus two) items?

·         Remove clutter at the user’s end by building a system to address eventualities. However, a system can only be simplified to a degree beyond which it ceases to function.

·         Decisions take only as long as familiarity by a user of formats, that is, to follow, interprets choices, choose, and decide take.