Download - Lean UX Design: #2 Structural Design
I
Andrius Butkus2013
Lean UX Design#2 structural design patterns
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
app screens
app screenshome screen
app screenshome screenstructure
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
hierarchyhub & spokenested dolltabbed viewbento boxfiltered view
structural patterns
hierarchy
typical website structure
hub & spoke
bento box
app store
nested doll
tabbed view
Weather
Clock
filtered view
iTunes
Calendar
endless screens
endless screens
current view
endless screens
current view
issuufacebookYouTube...
menumenu
?feature
X
content
home
facebookYouTube
contentcontent classification schemes?alphabeticaltopicaudiencetasksetc.
list space
PodcastsYouTubeissuufacebookYouTube...
hierarchyhub & spokenested dolltabbed viewbento boxfiltered view
structural patterns
?
structure gestures transitions
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
gestalt lawsproximitysimilarityunitycontinuationclosureparallelismcommon region
proximity
similarity
unity
continuation
closure
parallelism
common region
left righttop downheadline
etc.
+ topdownbeliefs
using gestalt laws for detecting document type
jDataScience
649
font size
imagestext blocks
font face
colors
jDataScience
649
imagestext blocks
colors
GestaltPsychology
MachineLearning
jDataScience
31 text boxes2 image boxes
6 articles2 ads
jDataScience
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
proximity 31 text boxes2 image boxes
jDataScience
Markov Random Fields
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
31 text boxes2 image boxes
jDataScience
proximitysimilarity
unitycontinuation
closureparallelism
common regiontop down
6 articles2 ads
jDataScience
proximity
similarity
unity
continuation
closure
parallelism
common region
left righttop downheadline
etc.
+ topdownbeliefs
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?
tools
stencils+
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
