UI Standards & Tools

Khushroo Shaikh

Outline

What is UI? Why we need standard? History of UI Standard. A Small Example. Types of Standards. How to build UI Standards. Benefits of Standards

What is UI?

Definition:- A user interface is the system by which people (user) interact with machine.

Why?

Despite the best efforts of HCI, we are still getting it wrong.

We specify the system behavior.

We validate our specification. We show a refinement to our

implementation.

Contd…

We test the code and prove the correctness of our system.

And then? A user comes along and

break it

Contd…

It is not just design issue or usability testing issue.

It is about getting more things right earlier in software lifecycle.

History of User Interface Standards

In 1965 Human factors specialists

worked to make user interfaces fast, accurate, and easy-to-learn.

Contd…

In 1985 We realized that

usability was not enough.

We needed consistency.

Standards become important

When? & How?

User Interface standards are very effective for when you are developing, testing, or designing any new site or application or when you are revising over 80 percent of the pages in an existing application or site.

Creating a User Interface standard (or usability standard or guideline) helps you to create user interfaces that are consistent and easy to understand.

Contd…

Include the interface in our system specification.

Include design guidelines in our interface specification.

Prove that the specification implies a usable design.

Some Problems

Choosing the right guidelines for the domain.

Mapping the levels of abstraction. Maintaining the readability of the

specification. Getting the designers to understand / use

it.

A Small Example

Modeling a system which has user controlled display options.

User can select from one of three choices.

Choices determine the size of the current

window display.

Cond…

So they came up with schema and present first prototype.

A problem User testing shows the system breaks when a user

selects more than one option. Designer fixes it and present second prototype.

But..

Isn’t this the original prototype? Designer has “improved it”. User can now only select one check box. Designer has broken guidelines regarding

selection controls.

Guideline for using selection controls

Use radio buttons to indicate one or more

options that must be either on or off, but

which are mutually exclusive. Use checkboxes to indicate one or more

options that must be either on or off, but

which are not mutually exclusive.

Extending the Specification..

Design must satisfy our specification. Design must also satisfy guidelines. Find a way to specify selection widget

guidelines. Ensure the described property holds in our

system.

Contd…

So, they extend specification and present revised prototype.

Contd…

Making it better by adding visual guidelines.

Types of standards There are three types of standards

Methodological Standards This is a checklist to remind developers of the tasks

needed to create usable systems such as user interview, task analysis and design etc.

Design Standards This is The Building Code. A set of absolute legal

requirements that ensure a consistent look and feel.

Design Principles Good design principles are specific and research-based

and developers work well within the design standard’s rules.

Building the design standard Major activities when building these

standards are: Project Kickoff and planning

You collaborate with key members of the project team to define the goals and scope of the User Interface standards.

This includes whether the UI document is to be considered a guideline, standard or style guide, which UI technology it will be based on, and who should participate in its development.

You work closely with your team and other stakeholders to identify your key business needs and business flows.

Contd… Gather User Interface Samples

Based on the information and direction received from your team, you begin by reviewing your major business applications and extracting examples for the UI standard.

This is an iterative process that takes feedback from as wide an audience as is appropriate.

Develop User Interface Document

The document itself includes. How to change and update the document Common UI elements and when to use them Common business flows and how and when to use

them General navigation, Graphic Look & Feel (or style),

Error Handling, Messages

Contd… Review with Team

This is an iterative process that takes feedback from as wide an audience as is appropriate.

The standard is reviewed and refined with your team and stakeholders in a consensus building process.

Present User Interface Document You present the UI Document in electronic form and/or

paper form.

Benefits of standards The goal of user interface design is to

make the user's interaction as simple and efficient as possible.

Your user or customers see a consistent UI within and between applications.

reduced cost and effort for system maintenance.

less time spent evaluating design alternatives

Contd… More time for value-added function-

specific design work. Share system modules more easily. Reduced costs for support, user training

packages and job aids. Most important customer satisfaction, your

users will reduce errors, training requirement, frustration, time per transaction.

Future Microsoft Surface where it provides great

user interface with its new surface computing technology.

http://www.youtube.com/watch?v=kr1O917o4jI&feature=related

References http://en.wikipedia.org/wiki/User_interface_design http://msdn.microsoft.com/en-us/library/

aa217660(office.11).aspx http://www.isii.com/ui_design.html http://www.ambysoft.com/essays/

userInterfaceDesign.html http://interpixdesign.com/story/consulting/standards http://www.w3schools.com/site/site_standards.asp http://www.humanfactors.com/downloads/

guistandards.pdf