Lean UX Design: #2 Structural Design
-
Upload
andrius-knispelis -
Category
Documents
-
view
228 -
download
2
description
Transcript of Lean UX Design: #2 Structural Design
![Page 1: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/1.jpg)
I
Andrius Butkus2013
Lean UX Design#2 structural design patterns
![Page 2: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/2.jpg)
Information architecture encompasses a wide range of problems. But regardless of the specific context or objectives of a given information architecture project, our concern is always with creating structures to facilitate effective communication. This notion is the core of our discipline.Jessie James Garrett
The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.Information Architecture Institute
While the graphic/web designer specializes in brilliant use of color, typography, texture, etc. to convey a message, the Information Architect looks at the architecture of the site from a more objective position. She might ask: what is the flow of users through our site? How does the software help the user catalog their information? How is that presented back to the user? Is that information helping the customer (ie: decision driving)?Andrew Maier
![Page 3: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/3.jpg)
app screens
![Page 4: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/4.jpg)
app screenshome screen
![Page 5: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/5.jpg)
app screenshome screenstructure
![Page 6: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/6.jpg)
How is mobile different?advantages: context, personal, easy/quick to uselimitations: screen size, bandwidth
but first...What kind of app?web app, native app, hybrid appcontent: static or dynamicuse of GPS, camera, etc
What kind of content?static or dynamicuse of GPS, camera, etc
![Page 7: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/7.jpg)
hierarchyhub & spokenested dolltabbed viewbento boxfiltered view
structural patterns
![Page 8: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/8.jpg)
hierarchy
typical website structure
![Page 9: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/9.jpg)
hub & spoke
![Page 10: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/10.jpg)
bento box
app store
![Page 11: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/11.jpg)
nested doll
![Page 12: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/12.jpg)
tabbed view
Weather
Clock
![Page 13: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/13.jpg)
filtered view
iTunes
Calendar
![Page 14: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/14.jpg)
endless screens
![Page 15: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/15.jpg)
endless screens
current view
![Page 16: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/16.jpg)
endless screens
current view
issuufacebookYouTube...
![Page 17: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/17.jpg)
menumenu
?feature
X
content
home
facebookYouTube
![Page 18: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/18.jpg)
contentcontent classification schemes?alphabeticaltopicaudiencetasksetc.
list space
PodcastsYouTubeissuufacebookYouTube...
![Page 19: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/19.jpg)
hierarchyhub & spokenested dolltabbed viewbento boxfiltered view
structural patterns
?
![Page 20: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/20.jpg)
structure gestures transitions
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
![Page 21: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/21.jpg)
gestalt lawsproximitysimilarityunitycontinuationclosureparallelismcommon region
![Page 22: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/22.jpg)
proximity
similarity
unity
continuation
closure
parallelism
common region
left righttop downheadline
etc.
+ topdownbeliefs
![Page 23: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/23.jpg)
using gestalt laws for detecting document type
jDataScience
![Page 24: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/24.jpg)
649
font size
imagestext blocks
font face
colors
jDataScience
![Page 25: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/25.jpg)
649
imagestext blocks
colors
GestaltPsychology
MachineLearning
jDataScience
![Page 26: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/26.jpg)
31 text boxes2 image boxes
6 articles2 ads
jDataScience
![Page 27: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/27.jpg)
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
proximity 31 text boxes2 image boxes
jDataScience
Markov Random Fields
![Page 28: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/28.jpg)
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
![Page 29: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/29.jpg)
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
![Page 30: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/30.jpg)
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
![Page 31: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/31.jpg)
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
6 articles2 ads
jDataScience
![Page 32: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/32.jpg)
proximity
similarity
unity
continuation
closure
parallelism
common region
left righttop downheadline
etc.
+ topdownbeliefs
![Page 33: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/33.jpg)
YOUR TURNjepic statement. market, problem, product.
advantages of MOBILE for your app?web, native, hybrid?data is static or dynamic?what stuctural patterns can you use? (reverse engineer)home screen?menu?content? endless stream?what navigation patterns can you use based on your data structure?gestalt laws you can use to help users navigate?
![Page 34: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/34.jpg)
tools
stencils+
![Page 35: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/35.jpg)
![Page 36: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/36.jpg)
![Page 37: Lean UX Design: #2 Structural Design](https://reader034.fdocuments.in/reader034/viewer/2022051701/568c0d571a28ab955a8c5c95/html5/thumbnails/37.jpg)
ISSUU hasn’t done a mobile app yet!...so this is your chance to design an awesome app and present it at issuu at the end of the semester
j