Patterns and guidelines: Organising content
COSC2628 Week 9 Kay
RMIT University acknowledges the people of
Copyright By PowCoder代写 加微信 powcoder
the Woi wurrung and Boon wurrung
language groups of the eastern Kulin Nation on whose unceded lands we conduct the business of the University.
RMIT University respectfully acknowledges their Ancestors and Elders, past and present. RMIT also acknowledges the Traditional Custodians
and their Ancestors of the lands and waters across Australia where we conduct our business.
Ngarara Place
RMIT Classification: Trusted
Hall of Shame
RMIT Classification: Trusted
Learning objectives
• Understand the different pattern types in UI design
• Understand when and why to use patterns
• Have some knowledge of example patterns
RMIT Classification: Trusted
Interface design
Consists of interaction principles and patterns.
What is the broad term for principles such as proximity and consistency?
Another important principle: minimizing user’s work (discussed today)
Minimizing User’s Work
RMIT Classification: Trusted
Well organized content is key
When would this not be the best strategy
Learning apps?
A mental state of heightened productivity
•Csikszentmihalyi’s theory of flow
RMIT Classification: Trusted
https://www.quora.com/How-would-one-use-Csikszentmihalyis-theory-of-Flow-to-evaluate-the-UX- of-a-product
•Interruptions disrupt flow •Flashing inbox message.
•Needless pop up windows that require users to close.
•Considerate software preserves flow
RMIT Classification: Trusted
RMIT Classification: Trusted
Excise is the effort that is required to be able to do the work.
Not referring to the work itself.
Visual excise – the work the user has to do to understand the interface and how to interact with it.
Where do you start using this machine?
RMIT Classification: Trusted
RMIT Classification: Trusted
Tiny instructions and start buttons
A Tour of Patterns
Resources on patterns
• et al (planning patterns, first publication)
•A list of interaction design patterns: https://www.interaction- design.org/literature/article/10- great-sites-for-ui-design-patterns
RMIT Classification: Trusted
RMIT Classification: Trusted
Patterns we will look at
Design patterns
Page Layout Patterns
Navigation patterns
Organising Content Patterns
Patterns for laying things out
Action patterns
Interaction Patterns
•Pre-built interface solutions to a wide range of common interface problems
• Proven • Valuable
•Don’t re-invent the wheel
RMIT Classification: Trusted
RMIT Classification: Trusted
Building interfaces has got easier
Principles (heuristics)
Graphics cards
API support for buttons, menus, windows, etc Patterns
Principles (heuristics) Graphics cards
Principles (heuristics)
Graphics cards
API support for buttons, menus, windows, etc
Watch this video: https://www.youtube.com/watch?v=U1Oy4X5Ni8Y
Design Patterns
RMIT Classification: Trusted
All too often…
RMIT Classification: Trusted
Basic Page Layout Patterns
•Chunking content patterns – Titled sections
– Card stack
– Closable panels
– Moveable panels
Titled Sections
RMIT Classification: Trusted
RMIT Classification: Trusted
Card Stack
RMIT Classification: Trusted
Closable Panels
RMIT Classification: Trusted
Visual Flow in Page Layout Patterns
RIGHT/LEFT DIAGONAL BALANCE ALIGNMENT
Right/Left Alignment
RMIT Classification: Trusted
Diagonal Balance
RMIT Classification: Trusted
RMIT Classification: Trusted
Dynamic Page Layout Patterns
Responsive disclosure Responsive enabling
Responsive Disclosure
RMIT Classification: Trusted
Responsive Disclosure
RMIT Classification: Trusted
RMIT Classification: Trusted
Responsive Disclosure
Responsive Enabling
RMIT Classification: Trusted
Responsive Enabling
RMIT Classification: Trusted
Page Layout
RMIT Classification: Trusted
Page Layout
•Visual hierarchy
– the most important content
should be most prominent
– the least important content should be least prominent
•Visual flow
•Grouping and alignment
RMIT Classification: Trusted
Elements of Visual Hierarchy
Upper left corner (culturally dependent) Whitespace
Contrasting fonts
Contrasting foreground and background Spatial positioning
Visual Flow
Designing to make users’ eyes traverse the page in the right order
Grouping and Alignment
Group together related element
grouping states that they are related
RMIT Classification: Trusted
vertically or horizontally
RMIT Classification: Trusted
Visual hierarchy patterns
consistent visual framework
centre stage
RMIT Classification: Trusted
Consistent Visual Framework
• Pages have consistent layout and style
• Flexible enough to handle varied content
• Website with multiple pages
• UI with multiple windows
• Process with several steps
• Help the user learn the system
• Improve navigation
• Improve user confidence
Visual Framework
RMIT Classification: Trusted
RMIT Classification: Trusted
Visual Framework
Centre stage
RMIT Classification: Trusted
• Most important element covers most of the page
• Usually task user needs to complete
• Other elements in smaller, surrounding areas
• Interface has a specific user task
• Other content is secondary
• Guides the user to most important content
RMIT Classification: Trusted
Centre Stage
Quiz 9 Passcode:
Navigation Patterns
Navigation Patterns
global navigation
hub and spoke
modal panel
You are here patterns
sequence map breadcrumbs colour-coded sections
RMIT Classification: Trusted
RMIT Classification: Trusted
Global Navigation
•Dedicated interface realestate given to button or menu
•Dependent on user- centric site/app structure
•Sections have short and meaningful names
•Must be consistent
RMIT Classification: Trusted
Modal Panel – stop navigation
Sequence Map
RMIT Classification: Trusted
RMIT Classification: Trusted
Breadcrumbs
• Show the most common path
• Should allow users to navigate back
RMIT Classification: Trusted
RMIT Classification: Trusted
Interaction space
The actions and functions available • Click
• Double click
• Drag-and-drop • Others?
RMIT Classification: Trusted
Interactive elements
–Buttons –Action panel
–Menu bars –Dropdown menus –Pop-up menus
–Toolbars –Links
Button Groups
RMIT Classification: Trusted
Action Panel
RMIT Classification: Trusted
RMIT Classification: Trusted
Prominent “Done” Button
Note the use of colour!
RMIT Classification: Trusted
Drop down menu
RMIT Classification: Trusted
Smart Menu Items
RMIT Classification: Trusted
Smart Menu Items
Interaction Patterns
Interaction Patterns
RMIT Classification: Trusted
Preview Progress Cancelability indicator
RMIT Classification: Trusted
RMIT Classification: Trusted
Progress Indicator
RMIT Classification: Trusted
Progress Indicator
Cancelability
RMIT Classification: Trusted
RMIT Classification: Trusted
Discussion – the perfect coffee machine?
Redesigning the coffee machine.
Remember these concepts:
Excise Prominence
RMIT Classification: Trusted
Discuss the issues with the coffee machine interface design. Recommend changes and sketch out your ideal interface. 15 mins discussion then report back
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com