Nguyen Tuan Anh, Deputy Director of Digital Content Center

VIVAS , 06/2014.

Introduction to User Experience Design

• What is UX?• UX # UI • User – Centered Design • Introduction to building Wireframes• Tips for Wireframing.• Q & A

What is User Experience (UX)?

• User Experience is the sum experience of a user interacting with a product or system.

UX ~ Feeling not Function

UX # UIUX # UI

UX # UIUX # UI

UX # UIUX # UI

Why ? Good UI – Bad UX

What is User-Centered Design (UCD)?

• The user is put in the center of the design

User Requirement Analysis: Determine the user needs and target usability requirementsConceptual Design: Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product.Design and Implementation : Work with the design and development team to revise user interface based on concept evaluation

UX Design Process

• Step 1: (PrM)

– Input :Customer Segment, User Behavior, Context

– Out Put: Fetures Ideas (1)• Step 2: PrM/ UX Designer

– Input: (1) + Feedback– Out put: Sketching/ Wireframe ( PrM) Approve UX Designer ( 2)

• Step 3: UI Designer– Input: (2)– Out put: Visual Design ( UI Designer ) Approve PrM/UX Designer

Work Flow

Tool ?

Paper + Pencil

Tool ?

Paper + Pencil

• OmniGraffle - For Mac, Ipad

http://www.omnigroup.com/omnigraffle/• Balsamiq – For Windows – Intro

http://balsamiq.com/

Tool

Tool

• Gomockingbirdhttps://gomockingbird.com/mockingbird/

• Adobe Fireworks• Power Mockup

http://www.powermockup• Invision

http://www.invisionapp.com• Suggest: Axure for Mac, PC

Trainning : http://www.axure.com/learn

Tips for Wireframing

• Have clear Objective• Keep It Clean• Don’t Make me think • Repetition. Repetition.Repetition

Tips for Wireframing

• Have clear Objective• Keep It Clean• Don’t Make me think • Repetition. Repetition.Repetition

Tips for Wireframing

• Have clear Objective• Keep It Clean• Don’t Make me think • Repetition. Repetition.Repetition

Tips for Wireframing

• Have clear Objective• Keep It Clean• Don’t Make me think • Repetition. Repetition.Repetition

Website

• UX Magazine : http://uxmag.com/ • UX Booth http://www.uxbooth.com/• Stack Exchange http://ux.stackexchange.com/• Stack Overflow• UX Exchange : uxexchange.com• Uxmatters : http://www.uxmatters.com/index.php