1. UI Standards & Tools
Khushroo Shaikh

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

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

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

5. Contd… We test the code and prove the correctness of our system.
And then?
A user comes along and break it

6. Contd… It is not just design issue or usability testing issue.
It is about getting more things right earlier in software lifecycle.

7. History of User Interface Standards
Human factors specialists worked to make user interfaces fast, accurate, and easy-to-learn.

8. Contd… We needed consistency. Standards become important In 1985
We realized that usability was not enough.
We needed consistency.
Standards become important

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

10. Contd… Include the interface in our system specification.
Include design guidelines in our interface specification.
Prove that the specification implies a usable design.

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

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

13. Cond…
So they came up with schema and present first prototype.

14. A problem
User testing shows the system breaks when a user selects more than one option.
Designer fixes it and present second prototype.

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

16. 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
which are not mutually exclusive.

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

18. Contd…
So, they extend specification and present revised prototype.

19. Contd…
Making it better by adding visual guidelines.

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

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

22. Contd… Gather User Interface Samples Develop User Interface Document
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

23. Contd… Review with Team Present User Interface Document
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.

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

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

26. Future
Microsoft Surface where it provides great user interface with its new surface computing technology.

27. References http://en.wikipedia.org/wiki/User_interface_design