Techniques/Guidelines for User Interface Creation

GRAPHICAL USER INTERFACE - visualizes complexity to make confusing and business technology issues clear, concise and concrete; helping people to make better, faster decisions, leading to action and results.

We've discussed examples of many principles and concepts of usability and user interface design in the previous blog posts. This feature lists down several concrete techniques and steps to be followed while creating a user interface. Future posts will cover most of these guidelines in depth with live examples.

• Consistency
  
  
  
  • Buttons/Menus in consistent places on all screens
  
  
  • Same wording in labels/titles and messages
  
  
  • Consistent color scheme
  
  
  
  


• Standardization
  
  
  
  • Setting standards and sticking to those; for example: Agile Modeling Standards
  
  
  
  


• Holding the line
  
  
  
  • Control over “unusual ideas” on how the screen should look like, by re-iteration of corporate goals, application needs and standards
  
  
  
  


• Explanation of rules
  
  
  
  • Application to “explain” rules to end-users to perform their tasks
  
  
  
  


• Navigation (external)
  
  
  
  • Easy access to relevant functional screens, from all screens
  
  
  
  


• Navigation (internal)
  
  
  
  • Co-relation of logical eye movement of user and the functional flow within a screen
  
  
  
  


• Terminology
  
  
  
  • Text (primary source of information for users) – proper choice of words
  
  
  • Less abbreviations; more complete words/sentences
  
  
  • Informative error messages
  
  
  
  


• Understanding UI widgets
  
  
  
  • Right widget for the right task
  
  
  
  


• Drawing parallel
  
  
  
  • Looking at other similar applications for standards/guidelines of usability
  
  
  • Avoiding imitation of user interface
  
  
  
  


• Color
  
  
  
  • Sparing use
  
  
  • Secondary indicator
  
  
  
  


• Contrast Rule
  
  
  
  • Dark text on Light background
  
  
  • Light text on Dark background
  
  
  
  


• Alignment
  
  
  
  • Organization of UI elements (left justified, right justified, etc.)
  
  
  
  


• Expecting mistakes
  
  
  
  • Designing for users to recover from their mistakes
  
  
  
  


• Intuitive design
  
  
  
  • Empowering users to make educative guesses for using the application
  
  
  
  


• Evolutionary approach
  
  
  
  • Mock-up, prototype leading to final output
  
  
  
  


• Grouping
  
  
  
  • Grouping logically connected items
  
  
  • Separating disconnected items
  
  
  
  

Remember, in order to reduce operating and opportunity costs, it's better to build it right the first time. More to follow on this subject...

Usability Characteristic: "Easy To Learn"

The last feature in Usability Characteristics. An easy to learn site/product is one that supports both the initial orientation and continued learning throughout the complete lifetime of use.

Most usability exercises applied to sites and products achieve an end result that assures low entry barrier, i.e., initially easy to learn. However, very few result in having the same ease of learning in a sustained usage. In other words, we need to exercise usability in anticipation of future directions of the product to see that it's not just easy to learn, but easy to master as well.

Few examples of products that are easy-to-learn:

• google sketchup


• solidworks


• yahoo! messenger


• adept tracker


• microsoft sql server 2005 express


• neopaint


• alice


• real software

Generally, easy to learn interfaces allow users to build on their prior knowledge. Also, it allows them to build on any interaction patterns they have learned through use in a predictable way. Consistency in user interfaces drives predictability. Software products that achieve and maintain consistency even across years of upgrade are the easiest to learn and master. For instance, keeping terminology unchanged, having design elements and controls in familiar location, maintaining similar behavior for similar functions, and so on. Users see what they expect to see. This philosophy lays the foundation for the process of user observation and task analysis, leading to superior usability and user experience from a learning angle.

Watch this space for more discussions and guidelines around usability.

Usability Dimension: "Desirable"

DESIRABLE.

We saw few examples of useful and usable sites and applications. This feature is on "desirable".

"Form follows function" is an age old principle. Everyone is up for beauty. Good looks (form) works like a charm, in any industry, at times even at the expense of function. You may be witness to a great looking movie star, less on acting skills gather more fan following than an average looking, but great actor. Likewise, you would find a person going for a used car, more interested in examining the exterior/body of the car than the functional parts like engine. What about an architect paying more attention to colors and symmetrical dimensions in space, rather than focusing on the lifelines of the household system - electrical and plumbing lines?

Same applies to software and internet world. Not many achieve the balance of their site/app being desirable, at the same time high on usability: useful, usable, etc.

Few examples of beauty that doesn't work:

• verbatim


• creative with a k


• real casual


• jones...


• got milk?


• record tripping


• lego


• echo genesis


• incredibox


• there studio


• coca cola light


• google gravity


• on toyota's mind

If the primary function/industry of your web site is to convey beauty, one should design for beauty. Else, beauty should be a by-product, still essential, but not at the expense of functionality and ease of use. A desirable site may attract more visitors in the short-term, but the visitors are unlikely to revisit as they would find it difficult to achieve their desired goals; in which case, a more functional site will score in the long-term.

Typical user echoes the following while using any of the above sites:

"where do i look?" "where do i click?" "what do i do?" "how long does this take to load?" "where's the navigation?" "how do i scroll?"

The sad part about these sites is that there's undoubted creativity and plenty of ideas that's gone into the concept and production. But, like most real things, a tool is no good unless you can figure out how to use it. There are multiple ways the sites fail to function. It can be visual clutter, slow loading time, navigation issues, archiving issues, visibility/scrolling issues, etc. Instead, direct the users to certain sections/pages of the site; make your navigation clear; make menus and icons self-explanatory; use proper contrast ratio for higher visibility; and have a clear "call-to-action". More...

Few brands like: Sony, Apple, Microsoft - achieve form without sacrificing function.

Watch this space for the next usability dimension: Findable.

Usability Dimension: "Useful"

USEFUL.

It may be observed that when a website or product is usable, but not useful, it's unlikely to get off the ground. Useful is what generates the interest, serves a need, scratches an itch. Often useful can do without being usable. If your website page has large content that is "useful" for the user making an informed decision/action, you may have to sacrifice on the usability by allowing horizontal/vertical scroll and pop-up/navigation elements. Another standard usability principle suggests alphabetical order of drop-down menus, which is usable in nature, as the users can do without additional cognitive load in narrowing down their choice of action. However, if an unsorted but prioritized menu items are presented to the users based on the most useful options presented first; the system might prove to be more useful after all.

Few Examples of Useful but Low on Overall Usability:

• ecademy


• Most Torrent / Freeware Download sites


• craigslist


• experts-exchange


• only batteries


• flickr


• salesforce (App not Website)


• exactitudes


• igluski

As usability and UI practitioners, we cannot be content to paint within the lines drawn by customers and the known patterns of usability. We must courageously and creatively question the usefulness of the system and functionalities and the user interface elements. Thus, we seek to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.

Watch this space for examples of next usability dimension: Usable.

Usability and Re-usability

Why Re-use?

We are faced with the challenge of adapting to an increasingly complex software world with yesterday's tool sets and standards. Internet, social media, e-commerce, supply-chain re-engineering, CRM, etc. are all contributors to the growing demands on today's developer. Conceptually, the perfect system would be one in which we would reuse our software, describe software architecture so that a non-expert could successfully execute and simplify complex business modeling, and automate most user tasks. Re-usability. Instead, we look for investing in "corrective" systems that correct the needful in the main systems we use. And if we find that the corrective systems are not good enough, we shall invest in further corrective systems or attack the fundamental and non-measurable aspect of our main systems - the Usability?

Usability and Benefits.

Usability can layer into an organization's existing software landscape to seamlessly bridge together disparate systems to function for the user, by the user. With the ever-changing distribution patterns, globalization of commerce, mergers and acquisitions - allowing little time for reflection, it's imperative to focus on fundamental needs of the system and the users - for better repetitive decision-making. Systems that are easy to learn and use will ultimately yield better results. Increasingly. Why should we need a test system, if our development system can prevent errors?

Millions of operational costs can be saved every year, if we focus on doing it right the first time, than allowing it to be done wrongly and then correcting it.

Conclusion.

We should focus on building interfaces that are simple, clear, and intuitive - this has a multi-dimensional value - productivity, efficiency, delight, lower training and maintenance. Good UI visualizes complexity to make confusing and business technology issues clear, concise and concrete - helping people to make better, faster decisions, leading to actions and favorable results.

Custom User Interface (Dilbert)