Lean UX Design #2 structural design patterns
Andrius Butkus 2013
I
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 screens home screen
app screens home screen
structure
îŚ
but first...
How is mobile dierent? advantages: context, personal, easy/quick to use limitations: screen size, bandwidth
What kind of app? web app, native app, hybrid app content: static or dynamic use of GPS, camera, etc
What kind of content? static or dynamic use of GPS, camera, etc
îŚ
structural patterns hierarchy hub & spoke nested doll tabbed view bento box filtered view
hierarchy
typical website structure
hub & spoke
bento box
app store
nested doll
tabbed view
Weather Clock
filtered view
iTunes Calendar
endless screens
current view
endless screens
endless screens
current view issuu facebook YouTube ...
? menu
menu
home
content facebook YouTube
feature X
list
space
YouTube
Podcasts
content content classification schemes? alphabetical topic audience tasks etc.
issuu facebook YouTube ...
îŚ
structural patterns hierarchy hub & spoke nested doll tabbed view bento box filtered view
ď˜’?
structure
gestures
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
transitions
îŚ
gestalt laws proximity similarity unity continuation closure parallelism common region
proximity similarity unity continuation closure parallelism common region
+
topdown beliefs left right top down headline etc.
using gestalt laws for detecting document type
j DataScience
font face
font size
colors
649
text blocks
images j DataScience
649
text blocks
Gestalt Psychology
images
Machine Learning
j DataScience
31 text boxes 2 image boxes
6 articles 2 ads j DataScience
Markov Random Fields
top down common region parallelism closure continuation unity similarity proximity
proximity
31 text boxes 2 image boxes
j DataScience
top down common region parallelism closure continuation unity similarity proximity
31 text boxes 2 image boxes
j DataScience
top down common region parallelism closure continuation unity similarity proximity
31 text boxes 2 image boxes
j DataScience
top down common region parallelism closure continuation unity similarity proximity
31 text boxes 2 image boxes
j DataScience
top down common region parallelism closure continuation unity similarity proximity
6 articles 2 ads j DataScience
proximity similarity unity continuation closure parallelism common region
+
topdown beliefs left right top down headline etc.
j YOUR TURN
epic 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
j 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
♼ [ thanks ]
www.andriusbutkus.com