T U T O R I A L ( 1 ) : P R O T O T Y P I N G

CSEN 909: HUMAN COMPUTER INTERACTION

Eng. Eslam OsamaDr. Wael Abouelsaadat German University in Cairo -Winter 2018

SESSION AGENDA

I. User Interface MethodologiesII. Iterative PrototypingIII. Practice Assignment (1)

2

I. USER INTERFACE METHODOLOGIES

• User Interface Methodologies§ Hierarchal à Layered Approach (To be discussed next

week)§ Participatory prototyping à Let users show us what they

need§ Iterative prototyping à UX designer build prototype and

review it with users

3

II. ITERATIVE PROTOTYPING

• Prototype à a small-scale, incomplete, but working sample of a desired system

• Types§ Paper prototyping§ Computer Sketches§ Software programs

4

II. ITERATIVE PROTOTYPING –CONT’D

A. Paper prototyping§ Using pencils and papers to illustrate system UI + screen

flows§ Example

5

II. ITERATIVE PROTOTYPING –CONT’D

A. Paper prototyping –Cont’d§ Pros

§ Fast to build§ Easy to change§ Focusing on the big picture of the system

§ Cons§ Can’t test the final look of the system (colors, fonts …etc.)§ Can’t test the response time

6

II. ITERATIVE PROTOTYPING –CONT’D

B. Computer sketches§ Using sketching software to draw system UI

§ Pros§ User can get the feel of the final look of the system’s UI§ Easy to change

§ Cons§ Dummy Interfaces (Not responsive)

7

II. ITERATIVE PROTOTYPING –CONT’D

C. Software programs§ Using wireframes and mockups software to simulate system

UI

§ Pros§ Responsive UI§ User can get the true feeling of the final look of the system

§ Cons§ Time consuming process (depending on the software you use)

8