wireframing and prototyping

15
A warm welcome to you all

Upload: thiyagu-vairam

Post on 22-Jan-2018

129 views

Category:

Design


0 download

TRANSCRIPT

A warm welcometo you all

Wifreframing and Prototyping

-Thiyagu Vairam

The topic has

Intro to UX Wireframing Prototyping

What is User Experience?

“Experience design is the designof anything independent ofmedium, or across media, withhuman experience as an explicitoutcome and humanengagement as an explicit goal.”

-Jesse James Garret

Where does UX comes from?

It comes from psychology

Thinking Feeling Instinct

Goal of UX

User Experience is concerned withidentifyng a real-world‘problem’ and usingdesign to attempt to solve it

What UX Actually isField ResearchFact to Face interviewingBrainstorm coordinationGathering, organizing and presenting statisticsGraphic ArtsInteraction DsignUsabiltyPrototypingUsabiltyInterface DesignVisual Design

What People think is

Interface Design

Visual Deign

Wireframing

Paper Sketch

Ideas are cheap, Building thing is Expensive

Every idea needs userinterface translation

Sketching helps youbrainstorm ideas

Sketch can be basicbut still communicatewonderfulluy

Up theFidelity

Grayscale or Mono-chrome

Good to test usability

More Tangible

Good to test interactions

Up Up theFidelity

This is where you get the visual design and branding in

Great to Communicate with stakeholders

Good to get design feedback

Look and feel

Prototyping

Why is prototyping?

“If a picture is worth 1,000 words, A prototype is worth 1,000 meetings.”

-Tom & David Kelly IDEO

Principles of Usabiltity

Learnability - How easy is it for users to accomplish basic task for the first time?

Efficency - Once users have learned the design, how quickly can they perform tasks?

Memorability - When users return to the design after a period ofnot using it, how easily can they reestablish proficiency?

Error Management - How many errors do user make, how severe are these errors, and how easily can they recover from errors?

Satisfaction - How pleasant is it to use the design?

ExampleLets see Yahoo Redesign App for the prototype example

Invision Link

Tools Used

Wireframe

UI Design

Prototype

Thank you...