CAS LX 321 / MET LX 521 / GRS LX 621 Syntax: Introduction ...
Balancing High-Level & Detailed Design at UX-LX
-
Upload
david-morgan -
Category
Design
-
view
443 -
download
1
description
Transcript of Balancing High-Level & Detailed Design at UX-LX
![Page 1: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/1.jpg)
!@davidmorganUX
BALANCING HIGH-LEVEL VS
DETAILED DESIGN
![Page 2: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/2.jpg)
!@davidmorganUX
"
@namahn
![Page 3: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/3.jpg)
!@davidmorganUX
CONTEXT OF MY UX PRACTICE
Big corporation, Consumer electronics
e-Commerce, marketing & customer support
Many stake holders
Many processes
Variable turn around time
Graphics and HTML in team
![Page 4: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/4.jpg)
YOU KNOW THAT THING YOU NORMALLY DO IN TWO MONTHS…
DO THAT IN TWO
WEEKS!!
!@davidmorganUX
![Page 5: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/5.jpg)
!@davidmorganUX
![Page 6: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/6.jpg)
!@davidmorganUX
IT SHOULDN’T BE A PROBLEM
THOUGH.
![Page 7: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/7.jpg)
!@davidmorganUX
Design Iterate
IMPORTANT IN (UX) DESIGN
Evaluate
![Page 8: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/8.jpg)
!@davidmorganUX
ITERATING YOUR DESIGN
Time for
changes
Stage of project
Reality
Ideal world
![Page 9: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/9.jpg)
!@davidmorganUX
PARETO RULE
Vilfredo Pareto
![Page 10: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/10.jpg)
!@davidmorganUX
PARETO RULE
80% 20%
20% of cause(s) 80% ofe-commerce visitors profitfeatures usagebugs crashesinput the result
![Page 11: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/11.jpg)
!@davidmorganUX
MORE TIME MORE DETAILOR MAKE SMART CHOICES
Leve
l of D
etai
l
Project parts
Detailed designMid-level DesignSmart Design
![Page 12: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/12.jpg)
!@davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME
![Page 13: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/13.jpg)
!@davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME
![Page 14: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/14.jpg)
!@davidmorganUX
2 MAIN UX DELIVERABLES
HIGH-LEVEL DETAILED DESIGN
![Page 15: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/15.jpg)
!@davidmorganUX
HIGH-LEVEL DESIGN GOALS
Understand scope
Understand structure and flows
Get other team members started
![Page 16: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/16.jpg)
!@davidmorganUX
HIGH-LEVEL DESIGN
Reduced content
Only header and button text
No Images, only place holders
Modular
Platform agnostic
Focus on the relevant
Small
Brand
![Page 17: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/17.jpg)
!@davidmorganUX
THUMB FLOWS
BrandBrandBrand Brand
![Page 18: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/18.jpg)
!@davidmorganUX
Brand
![Page 19: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/19.jpg)
!@davidmorganUX
DETAILED DESIGN GOALS
Understand content needs
Micro UX
Realistic representation
Receive conclusive feedback
Can brief Developers and Graphic Designers
![Page 20: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/20.jpg)
!@davidmorganUX
DETAILED DESIGN
Real copy
Real images
Actual scale
Works in destination platform
Brand
![Page 21: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/21.jpg)
!@davidmorganUX
WHEN GO FROM H-L TO DETAILED
Traditional/innovative
80%?
Complicated interactions
Critical for conversion/Business
Easier to show then explain 0
25
50
75
100
1 2 3 4 5 6 7 8 9 10
![Page 22: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/22.jpg)
!@davidmorganUX
WEIGHING IN ON THE ‘HTML VS WYSIWYG’ DISCUSION
HTML VS
![Page 23: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/23.jpg)
!@davidmorganUX
Sketch
TIME VS DETAIL, AVERAGE PROJECT
time
detail
Paper prototype
Axure
HTML
![Page 24: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/24.jpg)
!@davidmorganUX
Sketch
TIME VS DETAIL, LARGE PROJECT
time
detail
Paper prototype
Axure
HTML
![Page 25: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/25.jpg)
!@davidmorganUX
scope
time
TIME VS DETAIL
HTML
Axure
![Page 26: Balancing High-Level & Detailed Design at UX-LX](https://reader034.fdocuments.net/reader034/viewer/2022051817/547949ddb379596a2b8b46f6/html5/thumbnails/26.jpg)
!@davidmorganUX
CONCLUSION
Build iteration into your process
Allow for quick full scope design
Obsess over the right details
Decide per project and designer on your tools