week 3 - gui design

8/6/2019 Week 3 - GUI Design

1/22

Week 3Week 3GUI Design ProcessGUI Design Process

Funsho ObiladeFunsho Obilade


2/22

T raditional Software DesignT raditional Software DesignW aterfall model of software life cycleW aterfall model of software life cycle

Project Definition

Requirements Specification

Integration and system testing

Coding and Module testing

Functional Design

Module Design

Architecture Design

Operation and maintenance


3/22

User Centered DesignUser Centered DesignT here should not be a black box for theT here should not be a black box for theuser!user!

T he User SHOULDT he User SHOULDDrive all user interface design decisionsDrive all user interface design decisionsDetermine goals and set prioritiesDetermine goals and set priorities

Agree upon all goals that will be used inAgree upon all goals that will be used indesigning the user interfacedesigning the user interface


4/22

User User--Centered Project Life CycleCentered Project Life Cycle

User/Task AnalysisI

Set Usability Goals

I

Design InterfaceI

Evaluate Designs

IBuild Prototype

ITest Prototype

Test Okay ?


5/22

Iteration is the key!Iteration is the key!N o design will be perfect in the first time. N o design will be perfect in the first time.Interactive systems cannot be completelyInteractive systems cannot be completelyspecified from the beginning of the lifespecified from the beginning of the life

cycle.cycle.Users need to be involved all the time.Users need to be involved all the time.Evaluation and testing should be doneEvaluation and testing should be donethroughout the design process.throughout the design process.

Design and testing should be repeatedDesign and testing should be repeatediteratively.iteratively.Prototypes, rather than real systems, can bePrototypes, rather than real systems, can be

used for testing.used for testing.


6/22

Design ProcessDesign ProcessW hat is your design process inW hat is your design process inassignment 1?assignment 1?

Did you copy from some other design?Did you copy from some other design?Did you find a conceptual model toDid you find a conceptual model tosupport your design?support your design?

Did you consider humans fallibility ?Did you consider humans fallibility ?Did you follow the waterfall model or theDid you follow the waterfall model or theuser user--centered model?centered model?


7/22

How to start?

How to start?

Intelligent BrowsingIntelligent BrowsingIntelligent borrowingIntelligent borrowing

Studying existing frameworksStudying existing frameworks Guidelines, standards, conventionsGuidelines, standards, conventions

Studying current applicationsStudying current applications

Invent the new one when necessaryInvent the new one when necessary


8/22


9/22

Getting startedGetting startedGetting to Know Existing FrameworksGetting to Know Existing Frameworks

ConventionConvention

User is already familiar with the process or User is already familiar with the process or arrangement from other interfacesarrangement from other interfaces Most of user interface design requires designers toMost of user interface design requires designers to

work within the tight constraints of existing designswork within the tight constraints of existing designs


10/22


11/22

When you must inventWhen you must inventW hat if the systems never been builtW hat if the systems never been built

before? (E.g., one before? (E.g., one- -of of--aa--kind)kind)

Look harder for existing ideasLook harder for existing ideas e.g., coffee machine design copied to bank e.g., coffee machine design copied to bank

machinemachineT ry to uncover a conceptual model the user T ry to uncover a conceptual model the user already hasalready hasUse an iterative processUse an iterative process Build a little, test a lotBuild a little, test a lot


12/22

T ask AnalysisT ask Analysis

On the system levelOn the system levelW hat will users do with the product beingW hat will users do with the product beingdesigned?designed?How do users perform their tasks?How do users perform their tasks?W hat is the range of skill sets of the expectedW hat is the range of skill sets of the expecteduser?user?W

hat are the sequences or patterns of tasksW

hat are the sequences or patterns of tasks being performed? being performed?How to break down the users activities toHow to break down the users activities toindividual task level?individual task level?


13/22

On the task levelOn the task level ----T ask descriptionT ask description Good task description helps the designer to come upGood task description helps the designer to come up

with a better designwith a better design

Good task description helps to capture theGood task description helps to capture theinformation necessary for the design.information necessary for the design.

Users goalsUsers goals W hat are they try to accomplish?W hat are they try to accomplish?

W hat subgoals do they generate as a result of their W hat subgoals do they generate as a result of their primary goal? primary goal?

W hat external representations in the environmentW hat external representations in the environmenthelp the user to keep track of their goal?help the user to keep track of their goal?


14/22

On the task levelOn the task levelN ature of the tasks N ature of the tasks Frequency of different tasks performedFrequency of different tasks performed - - howhow

often is A done, B done, etc.often is A done, B done, etc. Grouping of work tasksGrouping of work tasks - - what is done with whatwhat is done with what Possible difficultyPossible difficulty Design constraints for particular tasksDesign constraints for particular tasks


15/22

M ethods of Iterative DesignM ethods of Iterative Design

Scenario GenerationScenario GenerationChoosing Representative ScenariosChoosing Representative Scenarios ComprehensiveComprehensive Critical T ask Critical T ask RandomRandom

Scenario Validation & ReviewScenario Validation & Review

Key stakeholders firstKey stakeholders firstGroup reviews later Group reviews later


16/22

Methods of Iterative Design

Methods of Iterative DesignDeriving StoryboardsDeriving Storyboardsfrom Scenariosfrom Scenarios

Paper PrototypingPaper PrototypingExplore constraintsExplore constraints

Study standards &Study standards &guidelinesguidelines


17/22



Building an interactive rapid prototypeBuilding an interactive rapid prototypefrom a paper prototype.from a paper prototype.T esting the Prototype with Users.T esting the Prototype with Users.Iteration ControlIteration Control

Each iteration has a specific usability goals.Each iteration has a specific usability goals.


18/22

PrototypingPrototypingBuilding an Interactive Rapid PrototypeBuilding an Interactive Rapid Prototypefrom a Paper Prototypefrom a Paper Prototype

Revolutionary Prototyping modelRevolutionary Prototyping model T he prototype is built and test.T he prototype is built and test. T he design knowledge is gained.T he design knowledge is gained. T he prototype is throwT he prototype is throw- -away.away. T he final product is built from the ground.T he final product is built from the ground.


19/22


20/22

Selecting a Prototyping T ool or Selecting a Prototyping T ool or EnvironmentEnvironment

RevolutionaryRevolutionary Emphasize on RAPID prototypingEmphasize on RAPID prototyping Prototypes dont need to be run in the real systemPrototypes dont need to be run in the real system

environment.environment.

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


21/22

Q uestionsQ uestions??

?


22/22

Quiz

Quiz

W hat is intelligent browsing in HCIW hat is intelligent browsing in HCIdesign?design?

Define what is natural mapping. Give anDefine what is natural mapping. Give anexample of natural mapping.example of natural mapping.Describe what are main differencesDescribe what are main differences

between traditional software life between traditional software life- -cyclecycleand HCI project lifeand HCI project life- -cycle?cycle?

week 3 - gui design

Documents