Transcript Web UI Standards

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


Design 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.
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 functionspecific 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=kr1O91
7o4jI&feature=related

References







http://en.wikipedia.org/wiki/User_interface_design
http://msdn.microsoft.com/enus/library/aa217660(office.11).aspx
http://www.isii.com/ui_design.html
http://www.ambysoft.com/essays/userInterfaceDesign.ht
ml
http://interpixdesign.com/story/consulting/standards
http://www.w3schools.com/site/site_standards.asp
http://www.humanfactors.com/downloads/guistandards.p
df