User Interface Analysis and Design

Sumit SinghUser Interface Designer

Infosys Ltd

User Interface Analysis and Design

User Interface (UI) Design focuses on anticipating what users might need to do.

Design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user's experience and interaction

UI brings together concepts from interaction design, visual design, and information architecture.

UI design is the process of taking the way a machine works and translating it into the way a person thinks.

Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies.

Why to choose This career

Answer My Question:

ASK ALL THESE QUESTION TO YOUR SELF

1. Are you perfect in coding as per company requirement?2. You are ready to learn programming language java, c, c++ etc?3. Are you creative person?4. You like to designing , art work etc?5. If you like will you know as a engineer what are the career path for you?

Now if you like to go with this career:

1. What skill is needed.2. Define Career Path.3. Any training required.4. How I can approach company for this job.5. Any Scope of higher studies.

ASK ALL THESE QUESTION TO ME

Skill NeededAre you aware about essential front-end web development languages. – HTML, CSS, JavaScript.

Understanding skilled in modern web and application programming skills – JAVA, PHP etc.

Utilize Adobe Creative Suite programs (Basic Knowledge) - Photoshop, Illustrator, Flash & Flex to mockup and design UI elements.

Understanding responsive web design to create user interfaces.

Conduct usability testing to identify and fix UI problems, and gather real-world intelligence from their target market.

Utilize social networking APIs (from Facebook, Twitter, Google+, LinkedIn, Pinterest, etc.) to integrate social actions.

Collaborate with business and IT decision makers to discuss user interface requirements and brainstorm UI ideas.

Keep current with the latest trends and best practices of UI/UX design and HCI (human-computer interaction).

verbal and written communication, team leadership and project management, to effectively communicate with business decision-makers

Human Centered Design

Human centered design as “an approach to systems design and development that aims to make interactive systems more usable by focusing on the use of the system and applying human factors/ergonomics and usability knowledge and techniques

A growing set of human centered design tools are used for simulating intuitions, opportunities and possible futures for purposes of emersion, reflection and discussion.

Goal: Present a formal and methodological approach for the specification of user interfaces integrated in the software development process.

Object-Oriented approach which covers the phases of

ImplementationDesign Analysis

User Interface Model: 1) Task Model

2) User Model

3) Domain Model

4) Dialog Model

5) Presentation Model

* Model-Based Code Generation

Models of Design

* Object-Oriented Specification Language OASIS-UI

Advantages of the Model-Based approach:

User-centered development process.Centralised UI specification.Design tools for an interactive and automated development.UI design reuse.

Good and bad design

• What is wrong with the remote on the right?

• Why is the TiVo remote so much better designed?– Peanut shaped to fit in hand– Logical layout and color-

coded, distinctive buttons– Easy to locate buttons

Interaction Design

Concept/understanding how one/individual interacts with an entity and how to design the process of interaction of that individual with the entity. that entity can be anything you pick it to be, for example your car, or your toaster, web browser and website that you view in a browser.

What does an Interaction Designer do?

An interaction designer is a key player throughout the entire development process. They will typically perform the following activities as part of a project team:

Interaction Design

• Need to take into account:– Who the users are– What activities are being carried out– Where the interaction is taking place

• Need to optimize the interactions users have with a product– So that they match the users’ activities and needs

What to design

Interaction design

12

Keypad numbers layout

• A case of external inconsistency

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) phones, remote controls (b) calculators, computer keypads

Key points

• Interaction design is concerned with designing interactive products to support the way people communicate and interact in their everyday and working lives

• It is concerned with how to create quality user experiences

• It requires taking into account a number of interdependent factors, including context of use, type of activities, cultural differences, and user groups

• It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields

User Interface Analysis and DesignInterface design focuses on the following

• The design of interfaces between software components• The design of interfaces between the software and other nonhuman

producers and consumers of information• The design of the interface between a human and the computer

User interface analysis and design has to do with the study of people and how they relate to technology

Spiral Process

Interface analysis (user, task, and environment analysis)

Focuses on the profile of the users who will interact with the system.Concentrates on users, tasks, content and work environment .Studies different models of systemfunction (as perceived from the outside).Delineates the human- and computer-orientedtasks that are required to achieve system function.

Interface design

Defines a set of interface objects and actions (and their screen representations) that enablea user to perform all defined tasks in a mannerthat meets every usability goal defined for the system.

Interface construction

Begins with a prototype that enables usage scenarios to be evaluated.Continues with development tools to complete the construction.

Interface validation, focuses onThe ability of the interface to implement every user task correctly, to accommodate all task variations, and to achieve all general user requirements. The degree to which the interface is easy to use and easy to learn. The users' acceptance of the interface as a useful tool in their work.

Spiral Process

User Control

Define interaction modes in a way that does not force a user into unnecessary or undesired actions

The user shall be able to enter and exit a mode with little or no effort (e.g., spell check edit text spell check)

Provide for flexible interaction

The user shall be able to perform the same action via keyboard commands, mouse movement, or voice recognition

Allow user interaction to be interruptible and ‘’undo“ able

Hide technical internals from the casual user

Design for direct interaction with objects that appear on the screen

Reduce demand on short-term memory

Establish meaningful defaults

Define shortcuts that are intuitive

The visual layout of the interface should be based on a real world metaphor

Disclose information in a progressive fashion

Allow the user to put the current task into a meaningful context

Maintain consistency across a family of applications

If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so

User Analysis Questions1) Are the users trained professionals, technicians, clerical or manufacturing workers?2) What level of formal education does the average user have?3) Are the users capable of learning on their own from written materials or have they

expressed a desire for classroom training?4) Are the users expert typists or are they keyboard phobic?5) What is the age range of the user community?6) Will the users be represented predominately by one gender?7) How are users compensated for the work they perform or are they volunteers?8) Do users work normal office hours, or do they work whenever the job is required?9) Is the software to be an integral part of the work users do, or will it be used only

occasionally?10) What is the primary spoken language among users?11) What are the consequences if a user makes a mistake using the system?12) Are users experts in the subject matter that is addressed by the system?13) Do users want to know about the technology that sits behind the interface?

27

Introduction• User interface design is an iterative process, where each iteration elaborate and

refines the information developed in the preceding step

• General steps for user interface design1) Using information developed during user interface analysis, define user interface

objects and actions (operations)2) Define events (user actions) that will cause the state of the user interface to change;

model this behavior3) Depict each interface state as it will actually look to the end user4) Indicate how the user interprets the state of the system from information provided

through the interface

• During all of these steps, the designer must– Always follow the three golden rules of user interfaces.– Model how the interface will be implemented.– Consider the computing environment (e.g., display technology, operating system,

development tools) that will be used.

28

Guidelines for Error Messages• The message should describe the problem in plain language that a typical

user can understand• The message should provide constructive advice for recovering from the

error• The message should indicate any negative consequences of the error (e.g.,

potentially corrupted data files) so that the user can check to ensure that they have not occurred (or correct them if they have)

• The message should be accompanied by an audible or visual cue such as a beep, momentary flashing, or a special error color

• The message should be non-judgmental– The message should never place blame on the user

29

An effective error message philosophy can do much to improve the quality of an interactive system and will significantly reduce user frustration when problems do occur

Questions for Menu Labeling and Typed Commands

• Will every menu option have a corresponding command?• What form will a command take? A control sequence? A function key? A

typed word?• How difficult will it be to learn and remember the commands?• What can be done if a command is forgotten?• Can commands be customized or abbreviated by the user?• Are menu labels self-explanatory within the context of the interface?• Are submenus consistent with the function implied by a master menu

item?

30

Design and Prototype Evaluation

• Before prototyping occurs, a number of evaluation criteria can be applied during design reviews to the design model itself– The amount of learning required by the users

• Derived from the length and complexity of the written specification and its interfaces– The interaction time and overall efficiency

• Derived from the number of user tasks specified and the average number of actions per task

– The memory load on users• Derived from the number of actions, tasks, and system states

– The complexity of the interface and the degree to which it will be accepted by the user• Derived from the interface style, help facilities, and error handling procedures

31(More on next slide)

Design and Prototype Evaluation (continued)

• Prototype evaluation can range from an informal test drive to a formally designed study using statistical methods and questionnaires

• The prototype evaluation cycle consists of prototype creation followed by user evaluation and back to prototype modification until all user issues are resolved

• The prototype is evaluated for – Satisfaction of user requirements– Conformance to the three golden rules of user interface design– Reconciliation of the four models of a user interface

32

UI design principles

● UI design must take account of the needs, experience and capabilities of the system users.

● Designers should be aware of people’s physical and mental limitations (e.g. limitedshort-term memory) and should recognize that people make mistakes.

● UI design principles underlie interface designs although not all principles are applicable to all designs.

● Recoverability• The system should provide some resilience touser errors and allow the user to recover from errors. Thismight include an undo facility, confirmation of destructiveactions, 'soft' deletes, etc.● User guidance• Some user guidance such as help systems, on-linemanuals, etc. should be supplied● User diversity• Interaction facilities for different types of user should besupported. For example, some users have seeingdifficulties and so larger text should be available