Horde User Interface Design

Notes and potential procedures for good design. http://www.lukew.com/ff/ and http://designingwebinterfaces.com/ are the source for many of these

Nice effects to incorporate

• http://www.netzgesta.de/gauge/

Examples/inspirations

• http://www.subtraction.com/2009/11/30/really-basic-maths
• http://basicmaths.subtraction.com/
• http://birdfeed.tumblr.com/post/249935921/birdfeed-1-2
• http://24ways.org/2009/the-construction-of-instruction
• http://24ways.org/2009/type-inspired-interfaces

CSS/Design building blocks

• http://ajaxian.com/archives/cross-browser-inline-block
• http://ajaxian.com/archives/nicole-sullivans-object-oriented-css
• http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery
• http://a.deveria.com/?p=236
• http://blog.seanmartell.com/2009/04/21/css3-flexible-ui-avoid-recutting-ui-graphics-for-mobile/

Patterns/component libraries

• http://designingwebinterfaces.com/15-common-components
• http://designingwebinterfaces.com/essential_controls
• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html (for cross-browser buttons)
• http://designingwebinterfaces.com/screencasts-added-to-flickr (390 screencasts)

Keyboard accessibility

• http://24ways.org/2009/dont-lose-your-focus

Design Consideration

http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

http://www.lukew.com/ff/entry.asp?754

• Pattern Recognition: allows us to identify relationships within information. (the data).
  • Story Telling: gives us a way to organize data into something meaningful by focusing on a big idea and supporting messages (the synthesis).
  • Visual Hierarchy: gives us a way to tell the story effectively (the means).
  • Empathy: allows us to make the story memorable and impactful (the meaning).
  • Modes: http://ignorethecode.net/blog/2009/07/02/modes-quasimodes-and-the-iphone/

Behaviors

• Visually associate dependent elements: http://www.lukew.com/ff/entry.asp?764
  • Previous and next actions: http://www.uie.com/articles/previous_next_luke

Repeating items

• http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-a-dialog.html

Local factors

http://www.lukew.com/ff/entry.asp?752

• Connection speed (broadband penetration)
  • Index size (scale of local language content available)
  • Task behaviors (bargaining in shopping)
  • Infrastructure (transportation, electricity)
  • Language characteristics (left to right, right to left, alphabetic vs. non, length)
  • Desktop penetration
  • Mobile penetration
  • Literacy rates
  • Demographics (age skew)
  • Cultural symbols (icon semiotics)
  • Visual conventions (color associations)
  • Work conventions
  • Cultural dimensions
  • Expected visual density

Sketches

http://www.lukew.com/ff/entry.asp?747

1. In some organization, developers are doing design. How can we deal with this?
   1. Parallel design: have several developers attempt to solve the problem at the same time. Parallel design means we get to hear from everybody
   2. 5 Sketches: saturate the design space, mash up the ideas, get to a pretty good solution, analyze it, and deliver a written statement

http://www.lukew.com/ff/entry.asp?749

1. We are taught to think that drawing is about making things look realistic.
   1. But drawing is really about getting ideas down on a page. Think of it as another vocabulary that enables discussion.

http://www.lukew.com/ff/entry.asp?748

1. Clients want great experiences and they want them fast
   1. Traditionally designers use wireframes to explore designs but they only focus on a single page of the experience at a time.
   2. We need a process to explore ideas without getting bogged down in unnecessary detail. It needs to reveal the best of multiple options and gets everyone’s input and buy-in.
   3. Sketching: explore and find lots of ideas (exploratory sketching) or gain convergence (refinement sketching).

http://www.lukew.com/ff/entry.asp?750

• Use quick sketches in the early stages of a project
  • Ensure you do lots of sketches so many ideas come forward
  • Discuss and edit the sketches collaboratively
  • Build consensus and buy-in through this process

Swimlanes

http://www.lukew.com/ff/entry.asp?745

1. UX swimlanes outline a bird’s eye view of a story, scenario, or component for sponsors, designers, businesses, and engineers.

Redesign Ideas

Organization and Flow

1 From the user's perspective, eliminate the concept of modules, and group functionality together by how it's used. By placing these grouped modules within tabs, for example, the interface can become focused only on the task at hand and downplay extraneous controls, dramatically simplifying the interface.

2 Create smoother flows between related modules.

3 Put frequently used tools close at hand. For example, let user add contacts from within the email screen?

4 Eliminate clutter. Remove defunct modules from the interface, or, if for some reason they need to remain, sequester them.

Visual Design

6 Modernize (and standardize) the look-and-feel.

7 Reconsider the use of iconography. Having an icon for every single module is overwhelming, and it’s difficult to make each icon memorable. Consider using icons much more sparingly.

8 Increase the size of the type. Some type in the interface is really small — 10px or smaller. Larger type (if handled properly) will be easier to read and appear friendlier.

9 Sweat the details. Taking time to carefully align form labels with their respective form fields, for example, conveys an image of quality and precision.

12 Avoid overlapping modals.

13 Add on-states to the navigation to make it easy for users to orient themselves.

Interactivity and Behavior

14 Anticipate the user’s first move. For example, on page load, automatically place the focus on the first form element on “create” pages when it’s a text field, instead of forcing the user to click into the field.

15 Make it impossible for users to make errors. Validate forms before the user clicks “Save” to highlight errors or omitted fields, rather than after clicking. (For example, provide clear feedback and disable the Save button until the user has filled the required fields.)

16 Make it easier to edit content. Instead of having the user click on an edit icon to the right of the items name, users should be able to click on the title itself.

17 Place like controls in like positions. For example, sometimes pop-ups are closed with a “Close” link in the upper-right corner, and other times they are closed with a “Cancel” button near the middle of the pop-up.

Nomenclature

21 Keep module names as straightforward as possible. consider names that are descriptive rather than clever.

22 Better name for virtual folders/virtual addressbooks/etc - Smart Folders? ...

23 Allow users to create daisy chains all at once, in a single flow, instead of forcing them to switch back and forth between modules

24 Scale more gracefully as more items are created.

Put frequently used tools at users fingertips. Don't make users switch modules to perform a regularly needed function

25 Search all content with a single, global search box instead of having to use each module’s search function.

26 Tag any item using the same, global taxonomy. Retrieve content more easily throughout the system by tagging any item.

27 Make modules consistent. Default sorts should be consistent, searches should be consistent (some modules search slugs, some do not), modules should have the same component parts.