design theory - ankur sharma - presentation

72
Designing UI Principles and Process

Upload: mobilenepal

Post on 29-Jun-2015

372 views

Category:

Technology


0 download

DESCRIPTION

Mr. Ankur Sharma was one of the trainers who talked about what the design should be, how to start with one and how to get there.

TRANSCRIPT

Page 1: Design Theory - Ankur Sharma - Presentation

Designing UIPrinciples and Process

Page 2: Design Theory - Ankur Sharma - Presentation

Design

Page 3: Design Theory - Ankur Sharma - Presentation

which one?how to figure them out when you are in shower, half blind?

Page 4: Design Theory - Ankur Sharma - Presentation

connectorloop{flip, can’t insert, flip again, can’t insert}

Page 5: Design Theory - Ankur Sharma - Presentation

freeze or boilhow to set perfect temperature?

Page 6: Design Theory - Ankur Sharma - Presentation

dividerare they even safe? during night??

Page 7: Design Theory - Ankur Sharma - Presentation

but how?What was the installer/interior/engineer thinking?

Page 8: Design Theory - Ankur Sharma - Presentation
Page 9: Design Theory - Ankur Sharma - Presentation

Criteria

Page 10: Design Theory - Ankur Sharma - Presentation

affordancesWhen you see it you will know it.

Page 11: Design Theory - Ankur Sharma - Presentation

affordancesWhat to do with this controls

Page 12: Design Theory - Ankur Sharma - Presentation

constraintsrestrict user interaction to reduce error

Page 13: Design Theory - Ankur Sharma - Presentation

constraintsWhich of the controls are usable

Page 14: Design Theory - Ankur Sharma - Presentation

conceptual modelmental image of how system works, more closer to functionality the better.

Page 15: Design Theory - Ankur Sharma - Presentation

mappingrelationship between control parameters and it’s effect

Page 16: Design Theory - Ankur Sharma - Presentation

visibilitymake sure the available controls are obvious and visible

Page 17: Design Theory - Ankur Sharma - Presentation

feedbacklet user know what is happening

Page 18: Design Theory - Ankur Sharma - Presentation

feedbackThe states description

Page 19: Design Theory - Ankur Sharma - Presentation

consistencysimilarity in similar function and identical way to perform them

Page 20: Design Theory - Ankur Sharma - Presentation

consistencyThe button arrangement across different OSes

Page 21: Design Theory - Ankur Sharma - Presentation

Principle

Page 22: Design Theory - Ankur Sharma - Presentation
Page 23: Design Theory - Ankur Sharma - Presentation

Dieter Rams 10 principles of good design

•Is innovative •Makes a product useful •Is aesthetic •Makes a product understandable

•Is unobtrusive •Is honest

•Is long-lasting •Is thorough down to the last detail

•Is environmentally friendly

•Is as little design as possible

Page 24: Design Theory - Ankur Sharma - Presentation

Design process

Page 25: Design Theory - Ankur Sharma - Presentation

develop conceptobjective, user and resources

Page 26: Design Theory - Ankur Sharma - Presentation

researchdo need analysis, business research and constrains

Page 27: Design Theory - Ankur Sharma - Presentation

prototypeyou never know until you do it

Page 28: Design Theory - Ankur Sharma - Presentation

refinementiterate, review, tests and prototype again

Page 29: Design Theory - Ankur Sharma - Presentation

Implementpractices, documentation and polishing

Page 30: Design Theory - Ankur Sharma - Presentation

supportevaluation, maintenance and training

Page 31: Design Theory - Ankur Sharma - Presentation

Ethnography

Page 32: Design Theory - Ankur Sharma - Presentation

https://www.youtube.com/watch?v=N4t3-__3MA0How the design is perceived by real world

Page 33: Design Theory - Ankur Sharma - Presentation

Project Synopsis

Page 34: Design Theory - Ankur Sharma - Presentation

Content for synopsis • Summary (One sentence

description)

• Application (One paragraph brief explanation)

• Activity (Bullet list of activities)

• Audience (One paragraph about intended audience)

Page 35: Design Theory - Ankur Sharma - Presentation

Requirement

Page 36: Design Theory - Ankur Sharma - Presentation

Fashion store app• Functional: Allow consumers to browse and purchase clothing merchandise

• Data: The system must have access to prices, pictures of merchandise, and up-to-date inventory.

• Environmental: Widely distributed, usually home. On phone and tablets.

• User: Anyone with interest in clothing purchases

• Usability: Simple to operate. Give feedback on stage is sales process. Distinguish buying from “window shopping” payment application.Optimised for tablet viewing.

Page 37: Design Theory - Ankur Sharma - Presentation

User story

Page 38: Design Theory - Ankur Sharma - Presentation

persona

• Body

• Psyche

• Background Information

• Emotion and Attitude

• Personal Traits

Page 39: Design Theory - Ankur Sharma - Presentation

persona

Page 40: Design Theory - Ankur Sharma - Presentation

conceptual design

Page 41: Design Theory - Ankur Sharma - Presentation

metaphorphysical link with interface

Page 42: Design Theory - Ankur Sharma - Presentation

interface stylephysical link with interface

Page 43: Design Theory - Ankur Sharma - Presentation

interaction stylephysical link with interface

Page 44: Design Theory - Ankur Sharma - Presentation

Prototype

Page 45: Design Theory - Ankur Sharma - Presentation

Best description?

Page 46: Design Theory - Ankur Sharma - Presentation
Page 47: Design Theory - Ankur Sharma - Presentation

visual and hapticYou can feel, use and improve the product

Page 48: Design Theory - Ankur Sharma - Presentation

pretendotypePalm pilot prototype by Jeff Hawkins

Page 49: Design Theory - Ankur Sharma - Presentation

types

Page 50: Design Theory - Ankur Sharma - Presentation

lo-fipen and paper, goes well with scenario

Page 51: Design Theory - Ankur Sharma - Presentation

hi-fiTalks about look and feel, as good as final product

Page 52: Design Theory - Ankur Sharma - Presentation

functionalShows interactions, let user use it

Page 53: Design Theory - Ankur Sharma - Presentation

compromises

Page 54: Design Theory - Ankur Sharma - Presentation

horizontal vs verticalThe scope helps set target right

Page 55: Design Theory - Ankur Sharma - Presentation

Evaluation

Page 56: Design Theory - Ankur Sharma - Presentation

WHY EVALUATEto test the usability of the system and to avoid pitfalls

Page 57: Design Theory - Ankur Sharma - Presentation

COGNITIVE WALKTHROUGHdefine a task and walk through necessary steps to perform the

given task

Page 58: Design Theory - Ankur Sharma - Presentation

LIKERT SCALEasking questions the right way.

Page 59: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Simple and natural dialog Simple means no irrelevant or rarely used information. Natural means an order that matches the task.

• Speak the user's language Use words and concepts from the user's world. Don't use system-specific engineering terms.

• Minimize user memory load Don't make the user remember things from one action to the next. Leave information on the screen until it's not needed.

Page 60: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Be consistent Users should be able to learn an action sequence in one part of the system and apply it again to get similar results in other places.

• Provide feedback Let users know what effect their actions have on the system.

• Provide clearly marked exits If users get into part of the system that doesn't interest them, they should always be able to get out quickly without damaging anything.

Page 61: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Provide shortcuts Shortcuts can help experienced users avoid lengthy dialogs and informational messages that they don't need.

• Good error messages Good error messages let the user know what the problem is and how to correct it.

• Prevent errors Whenever you write an error message you should also ask, can this error be avoided?

Page 62: Design Theory - Ankur Sharma - Presentation

Tools

Page 63: Design Theory - Ankur Sharma - Presentation

PENCIL N PAPERUse what you are comfortable with, don’t build sandcastle with

bulldozer

Page 64: Design Theory - Ankur Sharma - Presentation

COMMUNICATEBiggest mistake that can be made is “assumption”

Page 65: Design Theory - Ankur Sharma - Presentation

COLLABORATIVE EDITHelps in iterative documentation and feedback

Page 66: Design Theory - Ankur Sharma - Presentation

Tips

Page 67: Design Theory - Ankur Sharma - Presentation

RESEARCHread, validate, gather information, learn new tricks

Template

Page 68: Design Theory - Ankur Sharma - Presentation

BUILD STORYEvery good design tells stories, what is yours?

Setup Confrontation Resolution

Page 69: Design Theory - Ankur Sharma - Presentation

PRESENTLet them know how awesome your project is. Talk, show and sell

Page 70: Design Theory - Ankur Sharma - Presentation

FUN

Page 71: Design Theory - Ankur Sharma - Presentation

https://www.youtube.com/watch?v=kifMGc5cYuw

Page 72: Design Theory - Ankur Sharma - Presentation

Ankur SharmaDirector/UX

[email protected]

Thanks!