Week 3 GUI Design Process

Funsho Obilade

Traditional Software Design

Waterfall model of software life cycle
Project Definition Requirements Specification Functional Design Architecture Design Module Design Coding and Module testing Integration and system testing Operation and maintenance

User Centered Design

There should not be a black box for the user! The User SHOULD
Drive all user interface design decisions Determine goals and set priorities Agree upon all goals that will be used in designing the user interface

UserUser-Centered Project Life Cycle

User/Task Analysis I Set Usability Goals I Design Interface I Evaluate Designs

I
Build Prototype I Test Prototype Test Okay?

Iteration is the key!

No design will be perfect in the first time. Interactive systems cannot be completely specified from the beginning of the life cycle.
Users need to be involved all the time.

Evaluation and testing should be done throughout the design process.

Design and testing should be repeated iteratively. Prototypes, rather than real systems, can be used for testing.

Design Process
What is your design process in assignment 1?
Did you copy from some other design? Did you find a conceptual model to support your design? Did you consider humans fallibility ? Did you follow the waterfall model or the useruser-centered model?

How to start?
Intelligent Browsing
Intelligent borrowing Studying existing frameworks
Guidelines, standards, conventions

Studying current applications

Invent the new one when necessary

How to Start?
Intelligent Borrowing
Plagiarizing or Good Design Practice

Getting to Know Existing Frameworks

Guidelines and standards
IBM Web Design Guidelines (http://www.ibm.com /ibm/hci/guidelines/design/principles.html) Ameritech User Interface Standard(shttp:// www. ameritech.com:1080/corporate/testtown/library/standard/i
ndex.html)

Getting started
Getting to Know Existing Frameworks
Convention
User is already familiar with the process or arrangement from other interfaces Most of user interface design requires designers to work within the tight constraints of existing designs

Studying existing applications

look at systems users already know Copy interaction techniques
copy the style of menu selection, organization of screen elements, etc. (where appropriate)

Understand why design was done in the way it was done with the existing interface

When you must invent

What if the systems never been built before? (E.g., one-of-a-kind) one-of Look harder for existing ideas
e.g., coffee machine design copied to bank machine

Try to uncover a conceptual model the user already has Use an iterative process
Build a little, test a lot

Task Analysis
On the system level
What will users do with the product being designed? How do users perform their tasks? What is the range of skill sets of the expected user? What are the sequences or patterns of tasks being performed? How to break down the users activities to individual task level?

On the task level - Task description

Good task description helps the designer to come up with a better design Good task description helps to capture the information necessary for the design.

Users goals
What are they try to accomplish? What subgoals do they generate as a result of their primary goal? What external representations in the environment help the user to keep track of their goal?

On the task level

Nature of the tasks
Frequency of different tasks performed - how often is A done, B done, etc. Grouping of work tasks - what is done with what Possible difficulty Design constraints for particular tasks

Methods of Iterative Design

Scenario Generation
Choosing Representative Scenarios Comprehensive Critical Task Random

Scenario Validation & Review Key stakeholders first Group reviews later

Methods of Iterative Design

Deriving Storyboards from Scenarios Paper Prototyping
Explore constraints Study standards & guidelines

Methods of Iterative Design

Building an interactive rapid prototype from a paper prototype.
Testing the Prototype with Users. Iteration Control
Each iteration has a specific usability goals.

Prototyping
Building an Interactive Rapid Prototype from a Paper Prototype
Revolutionary Prototyping model
The prototype is built and test. The design knowledge is gained. The prototype is throw-away. throw The final product is built from the ground.

Prototype building
Evolutionary Prototype model
Each prototype serves as the basis for the next iteration of prototype design. The final system is evolved from initial limited prototypes.

Selecting a Prototyping Tool or Environment

Revolutionary
Emphasize on RAPID prototyping Prototypes dont need to be run in the real system environment.

Evolutionary
Emphasize on Scalability of prototypes. Design in the real system environment.

? Questions ?

Quiz
What is intelligent browsing in HCI design? Define what is natural mapping. Give an example of natural mapping. Describe what are main differences between traditional software life-cycle lifeand HCI project life-cycle? life-