Upload
ralph-holt
View
217
Download
0
Tags:
Embed Size (px)
Citation preview
2014 Industry Design Implementation Trends
UX Guy - Mark Swaine
Twitter: @UX_UI_GuyBehance: behance.net/markswaineLinkedin: ca.linkedin.com/in/markswaineWeb: www.uxguy.com
Mobile & Web Design
User Experience Design
“No matter how perfect your design, users will find its flaws.
No matter how thorough your plan, users will do what you did
not intend. Expect this.”
Robert Hoekman Jnr
Education, education, education
OS & device fragmentation
Think about screen input ask
User behaviours are constantly in motion
HTML 5 / Responsive frameworks
Site speed, networks and user frustrations
Keep updated on Android, iOS & Windows 8
OS & Device Fragmentation – Many Devices & OS versions in use
Agnostic Paradigms:Different Interface layoutsHardware input paradigmsDesign guidelinesThink about screen resolutions
Battery Life How the app / site performsHeavy image, animation and codeOlder devices have poor battery life
Design Inspiration
Look for inspiration from real world working apps and websites
Try not to reference Behance or Dribble platforms – misleading
Look at sites like, fwa, ui parade, awwwards, themeforest, grid assault, webdesigninspiration, pixelden, siteinspire, mobilepatterns, inspired ui, smashingmagazine, pttrns
Lean UX
“A user’s desire is not to stay on your website, it is to leave
your website. Design for that.”
Robert Hoekman Jnr
Trends for consideration
Flat UI Design will grow
Scrolling - (storytelling)
Micro UX effects – (transitions, rollover effects, nav)
Making the most of one page websites
Bigger imagery and video (desktop)
Storytelling – (most sites disjointed, IA)
Trends for consideration
Reducing user typing / input (forms)
Users will expect mobile to be better than desktop
Users appreciate a little magic (microinteractions)
Use of sound – when completing tasks, comforting for users
Trends for consideration
Kill the carouselEvery website has oneUsers tend to gloss overDon’t understand the interactionMake navigation obviousContent contextual – mostly rubbish
Storytelling the brand experience
http://www.gmc.com/incrediblethinking/
Sound
Wearbales will have major influence on micro interaction patterns in the future - glass, smartwatches, bracelets...
Will drive quicker interactionsand snappier experiences
Potential to become annoyingto users and the public
Up to 49% of people use ‘One thumb’ to complete all tasks
36% use two hands (index finger)
15% use two thumbs
Stephen Hoober
Common Gestures – Patterns & Trends
One Thumb Access is important
Think about how to design apps and mobile experiences using one thumb where possible
Rethink your design always for the realities of mobile use
Always consider touch target sizes, spacing and allow for fat fingers
Luke Wroblewski
Common Gestures – Patterns & Trends
Common Gestures – Patterns & Trends
Stop making gestures invisible – make hidden gestures known – (incrementally)
4 most common gesturers used and understood:
Scrolling – (familiar to desktop)
Swipe – (images, menus)
Tap – (not like desktop)
Pinch / Zoom – (People need to zoom in on mobile sites)
Common Gestures – Patterns & Trends
Mobile gestures can sometimes be difficult to remember and hard for users to complete tasks if not guided i.e.
1. Swipe left to delete2. Tap the + button to add an item3. Tap and hold to re-order
Coach marks don’t work – users skip through them – educate them incrementally
Icons can can have double meaning
Too many are not used consistently - between sites & apps
Most common understood icons, ‘play’ & ‘close (x)’
Be careful…Use icons that are consistent with other sites and apps
Use contextually
Hamburgers…
Still not understood universally
Some users think it to be part of the design
Sometimes stumbled upon and used accidentally
Can be perceived as dragable, list icon, text row, not always navigation…
A/B Test
Details are in the Design
Can force designers to think more about the details within the ‘look and feel’
Keep them within context of use
Going the extra length with design detail can make you love an app or site
It can create stickiness, delight and some emotional attachment to the site or app
Details are in the Design
Set tone – when opening or closing an app or site
Enrich the experience with subtle animation, transition, sound or functionality that surround the bigger key features of the product
They can be come part of the overall branding and sometimes more the most remembered part of the experience...
Lean UX
“At Neo, we define a vision for the product: what problem
are we trying to solve; how will we define success? We iterate
from initial concepts towards a final state, based on rapid
feedback cycles with our target audience our design aesthetic
and brand values”
Jeff Gothelf
Lean UX
“Lean UX is the practice of bringing the true nature of a
product to light faster, in a collaborative, cross functional way
that reduces the emphasis on thorough documentation while
increasing the focus on building a shared understanding of the
actual product experience being designed.”
Jeff Gothelf
(UX) Key QuestionsWhy is the product being made?
Who is it being made for?
What are the stakeholders goals for the project?
How do the requirements fit within the wider business objectives of the organization?
Who are the competitors?
How is success going to be measured?
Build quickly, learn quickly…
Generate solutions quickly
Team colloaboration
Build and discover quicker with fast iterations
Find out what is wrong with the intiial product designs as quickly as possible
Adjust the UX MVP’s and test again
Hypothesis Statement
Declare AssumptionsWhat the team believes to be true
HypothesisDescriptions of assumptions of product for expirementation
OutcomesFeedback to validate or invalidate the hypothesis
PersonasModels of the key demographic types FeaturesWhat will drive outcomes (business goals)
Jeff Gothelf
Business Assumptions Worksheet
I believe my customers have a need to...
These needs can be solved with...
My intial customers are...
I will make money by...
My biggest product risk is...
What features are important...
Jeff Gothelf
Lean UX - Book
Lean UX
“The answers to most difficult questions the team will face will
not be answered in a conference room. Instead, they will be
answered by customers in the field.”
Jeff Gothelf
Cross Functional Team
Engineering
Product Management
Interaction Design (Ixd)
Visual Design
Content Strategy
Marketing
QA
Rapid Prototyping
Low fidelity: Paper, sticky jots, wireframes, clickable wireframes
Mid & High fidelity: Test designs with levels of interaction, visuals and content, forms, use of real data - similar to final product.
Simulate and validate the most important product features and business goals (outcomes)
Show stakeholders progress (Demo Day)
MVP - Build, measure, learn…
Minimize effort into MVP proven ideas
The business goals of the product will achieve the desired outcomes
Test Hypothesis - Build MVP’s and validate proposed solutions
MVP - Build, measure, learn…
Collect what you learn fromthe MVP and iterate / evolve
the solution
Removal of features (waste) that don’t help achieve the business goals Show to stakeholders, customers and potential customers
Lean UX
“All that matters is the quality of the product, as measured by
the markets reaction to it.”
Jeff Gothelf
Tools Worth Looking At…
Traditional Paper and PenPost it NotesUI Stencils (uistencils.com)
MobilePopApp CookerBlueprintInterface HDAdobe ProtoiMockupsSketchyPadLivewiresLaunchBriefscase
DesktopSketch AppBalsamiqVisioOmnigraffleAxureJust in Mind EaselDivshotBriefsSkeleton (HTML Prototyping)Mind NodeProto.ioUXPinApp Sketcher (HTML Prototyping)Adobe Brackets (Coding)
Books…
http://www.peachpit.com/
https://rosenfeldmedia.com/books/
http://www.fivesimplesteps.com/
http://www.abookapart.com/
http://www.smashingmagazine.com/books/
http://www.nngroup.com/books/mobile-usability/
What is (UX) User Experience?
“User experience is the net sum of every interactiona person has with an organization, be it marketing material, a customer service call, or the product or service itself. A user’s
impressions are shaped by an organizations beliefs and practices as much as by the purpose and the value it’s products
hold in his or her life”.
Robert Hoekman Jnr
What is (UX) User Experience Design?
“User experience design as a discipline is concerned with all the elements that together make up that interface, including
layout, visual design, text, brand, sound and interaction. It works to coordinate these elements to allow for the best
possible interaction by users”.Don Norman