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 Human factors specialists worked to make user interfaces fast, accurate, and easy-to-learn.

Contd… We needed consistency. Standards become important 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 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 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

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.

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