ux experience design: processes and strategy

38
Designing for UX Innovate Program | 2014.02.18 Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]

Upload: chi-ux-indonesia

Post on 23-Aug-2014

348 views

Category:

Internet


2 download

DESCRIPTION

A presentation on UX Experience Design: Processes and Strategy by Dr Khong Chee Weng from Multimedia University at the UX Indonesia-Malaysia 2014 that was conducted on the 26th April 2014 in the Hotel Bidakara, Jakarta, Indonesia.

TRANSCRIPT

Page 1: UX Experience Design: Processes and Strategy

Designing for

UX Innovate Program | 2014.02.18

Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]

Page 2: UX Experience Design: Processes and Strategy

Functional Spec UI/UX Wireframes Visual

Design

A typical UI-UX Project

This is reasonable, but the process is NOT GOOD enough!

Clients

Page 3: UX Experience Design: Processes and Strategy

UX starts with People

Page 4: UX Experience Design: Processes and Strategy

UX focuses on having a deep understanding of USERS,

what they need,

what they value,

their abilities,

and also their limitations.

User’s Needs

Business Needs

UX

Page 5: UX Experience Design: Processes and Strategy

(Source: Google, 2013)

Page 6: UX Experience Design: Processes and Strategy

:: Involving USERS from the beginning &

throughout the design process.

::Designing for Your

Users It is all about making

your design usable.

(Norman on ‘Thoughtful Design’, 2008)

Page 7: UX Experience Design: Processes and Strategy
Page 8: UX Experience Design: Processes and Strategy

USABILITY is at the heart of the user experience (UX). Poor usability can lead users to abandon sites and it can cost businesses thousands and thousands of dollars.

Page 9: UX Experience Design: Processes and Strategy

(Source: www.goodui.org)

Page 10: UX Experience Design: Processes and Strategy

Minimalist Design

(Source: onetrapixel, 2013)

Page 11: UX Experience Design: Processes and Strategy

Skeuomorphism vs. Flat Design

(Source: Vukovic, 2013)

Page 12: UX Experience Design: Processes and Strategy

Typical 404 Error Webpages

Page 13: UX Experience Design: Processes and Strategy

User-friendly Error Webpage

Page 14: UX Experience Design: Processes and Strategy

User-friendly Error Webpage

Page 15: UX Experience Design: Processes and Strategy
Page 16: UX Experience Design: Processes and Strategy

A B

(Source: Interaction Design Foundation)

Mapping refers to the relationship between an object, either in the physical or virtual world, and its functions.

UX and Mapping

Page 17: UX Experience Design: Processes and Strategy
Page 18: UX Experience Design: Processes and Strategy

Top-down support

and implementation

Page 19: UX Experience Design: Processes and Strategy
Page 20: UX Experience Design: Processes and Strategy

User Research

Design Ethnography on Mobile Application & Social Interactions

© 2014. Interface Design Dept., FCM, MMU

Page 21: UX Experience Design: Processes and Strategy

User persona

User Persona & Scenario

© 2014. Interface Design Dept., FCM, MMU

Page 22: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Focus Group for Future Service Design

Page 23: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Page 24: UX Experience Design: Processes and Strategy

Icon Design Development: Mom-i Case Study

© 2014. Interface Design Dept., FCM, MMU

Page 25: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Lo-fi Prototyping & Wireframe

Page 26: UX Experience Design: Processes and Strategy

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

Page 27: UX Experience Design: Processes and Strategy

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

Page 28: UX Experience Design: Processes and Strategy

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

Page 29: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Hi-fi Prototyping

Page 30: UX Experience Design: Processes and Strategy

(Extract from http://ewamalaysia.com.my/ (October 2011)

Web UI Prototyping (Before)

Page 31: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Web UI Prototyping (After): Windows 8

Page 32: UX Experience Design: Processes and Strategy
Page 33: UX Experience Design: Processes and Strategy

Usability Testing © 2014. Interface Design Dept., FCM, MMU

Page 34: UX Experience Design: Processes and Strategy

4.02 4.14 4.16 4.23 4.04

01234567

OverallReaction to

SoftwarePerformance

Screen Terminology& SoftwareFeedback

Learning SoftwareCapabilities

Aver

age

Ratin

g

Categories

Overall User Satisfaction Rating

Rating

User Satisfaction Rating

Overall user satisfaction scores towards ABC Software is 4.11 out of 7.00.

© 2014. Interface Design Dept., FCM, MMU

Page 35: UX Experience Design: Processes and Strategy

© 2014. Interface Design Dept., FCM, MMU

Heuristic/Expert Review: UI Issue & Design Recommendations

• quick feedback with limited resources

• 5-6 respondents (1-2 experts and 4-5 novice users)

• uses a simple set of design/UI rules where quick judgement

can be made on the design/system being evaluated

• conducted in-house or anywhere convenient

Page 36: UX Experience Design: Processes and Strategy

The UX machine (Source: keepitusable)

Page 37: UX Experience Design: Processes and Strategy
Page 38: UX Experience Design: Processes and Strategy

Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]