Visibility Principle

A user interface is only valued when the user interactions achieve their purpose. The first element of user interaction is what the user sees in the interface. Visibility is all about how clearly the user sees the state of the interface and all the possible actions. If the users cannot "see" how to use the interface, it is not adhering to the visibility principle of user interface design. Let's dive into some real-world examples and then follow-through with web examples.

 

Good visibility - car dashboard that is designed with everything positioned in a way that can be easily found and used.

 

Sleek design in this case compromises usability - auto-faucets have a great advantage of saving water, but its common challenge is "where to put our hands" to ensure timely hand-wash.

Style yes, visibility of main functions - a big NO! One of the most complex wrist-watch dial ever designed.

How many combinations!? Phew!

 

Most straightforward with high visibility - ATM.

Over to few web examples:

• google


• dropbox


• business catalyst


• high rise


• fidelity


• acosmin


• justdial

Employ commonsensical ideas like highlighting important parts of your web page on top center, avoiding dead-ends, and always suggesting users the 3 answers: "where he is", "what there is", and "where can he go next".

Suggestions?

Simplicity Principle

SIMPLICITY.

We saw few examples and points on one of the principles of user interfaces - structure. This features focuses on Simplicity.

Why do you need your site to be simple?

Site visitors will rarely visit your site to "enjoy" the design. The design should be very transparent and complementary to the content. From the visitor's point of view, the best design is pure text that echoes the content they're looking for. Nobody really has the time and patience to interpret your design. Remember, the complexity and abstractness that some design concept introduces does not command any appreciation for the hard work that's perhaps gone into creating the design. Strive for simplicity - easy to comprehend layout and text.

How can you achieve simplicity in your web site?

The idea is to achieve a perfect blend of details and their presentation on screen.

• Use graphics sparingly and meaningfully; also make sure it's light on size.


• If short text is sufficient, avoid having complex wordings. For ex: Use "Search" instead of "Quick Keyword Search" for your search functionality.


• Use suggestive and direct icons that are consistent with web terminology and use less space on screen.


• Use colors and fonts sparingly.


• Do not use jarring animations and advertisements.


• White/Blank Space is underrated; use it effectively.


• Use elements that work consistently across all browsers (HTML + CSS); avoid elements that cause issues across different environments (JavaScript, Flash).

Few examples of Simple web sites:

• blejskam


• enso


• artypapers


• distinct


• symphony cms


• opened hand


• jgm


• open communications

KISS philosophy has been around since the dawn of web site design. KISS does not mean boring and dull sites. It is possible to create great looking sites and still keep it simple using simple techniques, as exemplified in the above list of sites. Concept of simplicity is more complex than it may seem; but achievable.

Stay on for more discussions and examples on principles of user interfaces.

Structure Principle

STRUCTURE.

In my blog post, Principles of User Interface Design, we touched on various aspects of user interfaces. This feature will discuss few specific points of one of the aspects - Structure - followed by few examples.

Why do you need your site to be structured?

Well, you need your customers/prospects to understand quickly what need of theirs will your product/service fulfill. It is important for the visitors to find relevant information quickly, and get easy access to additional information if necessary. Your public domain, which is the place for introducing all that you do, can and will change in the future. Having a good and expandable structure would make this job easy and seamless. Having a good structure (which also means not random, but structured set of keywords) will also make the site findable on search engines. The customer also needs to have alternate paths to key areas and information on the site for better decision-making.

How can you achieve structure in your web site?

Main idea is to establish the information architecture for site content areas in providing clear, visitor-specific paths to useful and relevant information.

• Internal site linking structure - have logical grouping/linking between main navigational elements (either left or top) and secondary/direct navigation (right, center, or bottom).


• Linking between sections - have good cross-linkages and quick jumps to important sections of your site (for example: customer stories, case studies, thought-leadership blogs).


• Page-specific navigation - it is not a bad idea to design page-specific navigation and access to information. In fact, each page has to serve a specific purpose and it's a mistake to have all pages behave the same in a large site. For example, "About us" section needs to be very different than a section about "Products/Services" not just in presentation and writing style, but also in flow.


• Keywords as sections - site visitors will feel at home with the structure of the site, if we make user keywords as section names.


• Site Exits - design specific click-to-action elements for a logical exit from your site. For example: Inquiry Forms, Downloads, Feedback, Sign-ups, Share/Like.

Few examples of sites with good structure:

• mozilla


• vector consulting


• protolize


• sumagency


• greenpepper


• bearskinrug


• bbc


• usa gov


• abebooks


• rotten tomatoes

Structure it now; structure it well.

Stay with us for more features on other principles with more examples.

Principles of User Interface

This article simply lists down in brief the few principles that need to be adhered to and kept in mind, while creating or analyzing user interfaces. Following this, we'll take a look at few examples for each points in question, as series of features.

Principles

• structure
  
  
  
  • organize user interface purposefully
  
  
  • make it meaningful and useful based on clear, consistent models apparent and recognizable to users
  
  
  • put related things together; separate unrelated things
  
  
  • differentiate dissimilar things, make similar things resemble one another
  
  
  
  


• simplicity
  
  
  
  • make simple, common tasks simple to do
  
  
  • communicate clearly and simply in user's own language
  
  
  • provide good shortcuts that are meaningfully related to longer procedures
  
  
  
  


• visibility
  
  
  
  • keep all needed options and materials for a given task visible
  
  
  • do not distract user with extraneous and redundant information
  
  
  • do not confuse user with too many alternatives for performing same task
  
  
  
  


• feedback
  
  
  
  • inform actions or interpretations
  
  
  • inform changes of state or condition
  
  
  • inform errors or exceptions
  
  
  • keep model of communication - relevant, clear, concise, and in language familiar to user
  
  
  
  


• tolerance
  
  
  
  • reduce cost of mistakes and misuse by allowing 'undo' and 'redo'
  
  
  • prevent errors by tolerating varied inputs and sequences and by interpreting reasonable actions
  
  
  
  


• reuse
  
  
  
  • reuse internal and external components and behaviors; maintaining consistency with purpose
  
  
  • reduce the need for users to rethink and remember
  
  
  
  

Watch this space for some concrete examples...

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...