![Page 1: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/1.jpg)
UI Standards & Tools
Khushroo Shaikh
![Page 2: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/3.jpg)
What is UI?
Definition:- A user interface is the system by which people (user) interact with machine.
![Page 4: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/5.jpg)
Contd…
We test the code and prove the correctness of our system.
And then? A user comes along and
break it
![Page 6: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/6.jpg)
Contd…
It is not just design issue or usability testing issue.
It is about getting more things right earlier in software lifecycle.
![Page 7: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/7.jpg)
History of User Interface Standards
In 1965 Human factors specialists
worked to make user interfaces fast, accurate, and easy-to-learn.
![Page 8: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/8.jpg)
Contd…
In 1985 We realized that
usability was not enough.
We needed consistency.
Standards become important
![Page 9: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/10.jpg)
Contd…
Include the interface in our system specification.
Include design guidelines in our interface specification.
Prove that the specification implies a usable design.
![Page 11: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/11.jpg)
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.
![Page 12: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/12.jpg)
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.
![Page 13: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/13.jpg)
Cond…
So they came up with schema and present first prototype.
![Page 14: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/14.jpg)
A problem User testing shows the system breaks when a user
selects more than one option. Designer fixes it and present second prototype.
![Page 15: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/15.jpg)
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.
![Page 16: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/16.jpg)
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.
![Page 17: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/17.jpg)
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.
![Page 18: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/18.jpg)
Contd…
So, they extend specification and present revised prototype.
![Page 19: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/19.jpg)
Contd…
Making it better by adding visual guidelines.
![Page 20: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/20.jpg)
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.
![Page 21: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/21.jpg)
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.
![Page 22: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/23.jpg)
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.
![Page 24: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/25.jpg)
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.
![Page 26: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/26.jpg)
Future Microsoft Surface where it provides great
user interface with its new surface computing technology.
http://www.youtube.com/watch?v=kr1O917o4jI&feature=related
![Page 27: 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](https://reader036.vdocuments.us/reader036/viewer/2022062516/56649d3a5503460f94a15429/html5/thumbnails/27.jpg)
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