Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

UX / UI Mobile Trends

•Download as PPTX, PDF•
•
Mark N Swaine
Mark N Swaine

Current mobile design trends emphasize simplicity, speed, and a focus on the user experience above all else. Designers are encouraged to rapidly prototype and iterate based on real-time user feedback in order to build intuitive, task-oriented interfaces tailored for specific devices and contexts. Additionally, flat design utilizing minimal elements, bold colors, and typography is prominent, while responsive design ensures content is optimally organized and accessible across all screens. Social media also plays a fundamental role in how brands engage with users through creative visual storytelling on key platforms like Pinterest, Instagram, Facebook and Twitter.

Related slideshows

Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
Mobile UI / UX Trends
Mobile UI / UX TrendsMobile UI / UX Trends
Mobile UI / UX Trends
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
1 of 45
Current UX / UI Mobile Design Trends
State of Industry
Client Education & Acceptance (is Key) Speed of Industry Emphasis on User Internet of Things Brand Context Unlimited Options Time Apocalypse Ongoing Work / Maintenance
UX Methodology Trends
Participatory Sketching Opportunity to collaborate with key project stakeholders Explore, Create & Invent Identify, create and prove key use cases Identify Pain Points Help Build the Brief Research & Analysis
Rapid Prototyping Create Rapid Interactive Wireframe Prototypes Iterate and develop in Lean Agile Mode Receive and monitor real time feedback from key user demographics
Identifying Contextual Differentiators Smartphone Tablet Desktop Action / Task Oriented Agnostic Paradigms Context of Content Simplified Navigation What the user wants. Key User Tasks Agnostic Paradigms Context of Content Tablet = Browsing / Couch Commerce Site speed, CSS, Retina Images and Resolutions Key User Tasks Context of Content Calls to Action Content Scale and Stack
Kill Documentation (time waste) Time wasting on documentation creation Prototype instead – More Beneficial Learn More by Prototyping the User Experience
Test & Iterate Quickly “You can Achieve a big vision – but in small increments. It requires a commitment to iteration” Eric Ries
The User
What is (UX) User Experience? “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
(UX) Key Questions Why 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?
Know Thy User Users can be, ‘Experienced’, ‘Expert’, ‘Novice’ or ‘Power Users’ The more fluid and responsive the experience is the more emotionally, invested users will become Ask only for limited input from users Users are not stupid Create emotional connections Users want novelty
Know Thy User Build healthy long-term relationships with users User’s will ask why doesn't my brand / site / app know me? Build users trust incrementally and look for soft commitments along the way Reduce input forms, user fatigue Hide technology from the user
Simplicity Make it feel snappier – always go back to engineering Reduce chances for users to make mistakes Stop making people passengers and more partners of the user experience. Stop commanding users what to do Reduce everything thoughtfully
Tell a Story - User Research Contextual research Competitor Analysis In-depth interviews Visual Style Social analytics Focus Groups Online interviews Existing Users Analytics / tracking On Location Street interviews Third Party Studies Usability Review Card Sorting
Create Personas User Background: Age range, native language, physical and or cognitive limitations Experience: How familiar are your users with similar systems? Will they need to learn? Behavior: What motivates users. Do they share any behavioral traits? Desires and Concerns: What do they want to achieve, what concerns do they have?
Focus on Outcomes Not Deliverables Real people use your products and services, real people with different wants, needs, abilities, environments and a million other possible variables that need to be factored in… “Businesses cannot treat their customers as passive consumers any longer, every company is in the user experience business” “If you take the time to understand how people think, then design solutions around their true needs and behavior – your design will be far more likely to perform better with them.” http://alistapart.com/column/explaining-water-to-fish
Remember “Users will never forget how you made them feel” Maya Angelou
Responsive Design (RWD)
Responsive Design Still in it’s infancy Content Dictates It is ‘Future Friendly’ More Time = More Cost Content Managed Across All Devices / Screens Use of Best Practice in HTML5 & CSS3 Media Queries Many frameworks, templates and solutions
Responsive Design (Sample 1) boldandnoble.com
Responsive Design (Sample 1) boldandnoble.com
Responsive Design (Sample 2) skinnyties.com
Responsive Design (Sample 2) skinnyties.com
Responsive Design (Mobile Samples) thisiszone.com starbucks.com cibc.com
Design
Design Trends – Flat UI Design No drop shadows, bevels, gradients and no depth Every element is clean, crisp including buttons and navigation menus Color of the Year in Web Flat interfaces are easy for users to understand and interact with Use simple interface elements such as icons Simple, easy to click and tap Pantone Emerald 17-5641 Simple shapes – rectangle and circles Use of bold simple Colors
Design Trends – Flat Design – Color Palette flatuicolors.com
Typography Considerations Look and Feel of type used should suit the overall tone and message Use simple font pairings Flat design uses no more than two font pairings (novelty font for headings) Use sharp, crisp, bold clear typefaces San Serif Typefaces are typically used in flat design Flat design focuses on simplicity – so should your text (content) Reduce use of drop shadows, gradients – strong color contrast, (black & white) Give type / paragraphs plenty of room to breathe – lots of white space Good starting place – Google Fonts: http://www.google.com/fonts
Flat UI Design Flat UI Design Trends
Flat UI Design Flat UI Design Trends
Flat UI Website Design Square: http://www.square.com
Flat UI Website Design United Pixel Workers: http://www.unitedpixelworkers.com/
Flat UI Website Design Get Cellar App: http://www.getcellarapp.com/
Mobile First
Mobile First (Project Depending) No longer an afterthought Prepares brand thinking for the explosive growth in mobile apocalypse Forces brand focus and prioritization – under mobile constraints Allows for new and innovative brand experiences built on capabilities and paradigms of devices Start with presumptions of connectivity, context interaction, and location
Mobile First (Project Depending) “The simple guideline is whatever you are doing – do Mobile First” Eric Schmidt, http://bkaprt.com/mf/1 “We’re just now starting to get into Mobile first. What we are finding is that the designers on mobile are really embracing the constraints and that it is actually teaching us a lot about how to design back to the desktop” Kate Aronowitz, Facebook Director of Design, http://bkaprt.com/mf/2
Social Media
Social Media All Companies are social media companies now. Key Platforms: Pinterest, Instagram, Facebook and Twitter.
Social Media - Pinterest Pinterest: Female oriented mainly, aspirational – intent to buy (insights), pins drive traffic to websites – big referrals, more physiological, infographics – shared and repined and enormous virality and video.
Social Media - Instagram Instagram: Take print campaigns online creatively, youth marketing and strong visuals, storytell visually, promoted grams, more advertising to come, # tactics / be creative, animated gifs and video.
Social Media - Facebook Facebook: Virality, figure out how to storytell, scale in demographics, biggest opportunities, images matter – it’s a picture platform, infographics, storytell through photos, quality, calls to action, think mobile, less text, right times to post, video and animation…
Social Media - Twitter Twitter: Jump in on any conversation, you need to listen on Twitter – and jump in where you can on conversations to add value, a brand can show it cares, brands gain credit, create enormous context, bring value, build most equity, huge opportunities in storytelling, listen and engage, bring value – answer questions, share and re-tweets, need to be witty, smart and engaging.
Glossary User Experience Design (UXd) How the user thinks and feels Information Architecture (IA) How the system is organized User Interface Design (UI) How the content is organized Interaction Design (IX) How the user and device act and react Responsive Website Design (RWD) Optimal fluid grid based website design that will flow and stack on any screen size / resolution / device. Adaptive Website Design (AWD) Web design to scale to predetermined set of screens and devices.

More Related Content

UX / UI Mobile Trends

  • 1. Current UX / UI Mobile Design Trends
  • 3. Client Education & Acceptance (is Key) Speed of Industry Emphasis on User Internet of Things Brand Context Unlimited Options Time Apocalypse Ongoing Work / Maintenance
  • 5. Participatory Sketching Opportunity to collaborate with key project stakeholders Explore, Create & Invent Identify, create and prove key use cases Identify Pain Points Help Build the Brief Research & Analysis
  • 6. Rapid Prototyping Create Rapid Interactive Wireframe Prototypes Iterate and develop in Lean Agile Mode Receive and monitor real time feedback from key user demographics
  • 7. Identifying Contextual Differentiators Smartphone Tablet Desktop Action / Task Oriented Agnostic Paradigms Context of Content Simplified Navigation What the user wants. Key User Tasks Agnostic Paradigms Context of Content Tablet = Browsing / Couch Commerce Site speed, CSS, Retina Images and Resolutions Key User Tasks Context of Content Calls to Action Content Scale and Stack
  • 8. Kill Documentation (time waste) Time wasting on documentation creation Prototype instead – More Beneficial Learn More by Prototyping the User Experience
  • 9. Test & Iterate Quickly “You can Achieve a big vision – but in small increments. It requires a commitment to iteration” Eric Ries
  • 11. What is (UX) User Experience? “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
  • 12. (UX) Key Questions Why 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?
  • 13. Know Thy User Users can be, ‘Experienced’, ‘Expert’, ‘Novice’ or ‘Power Users’ The more fluid and responsive the experience is the more emotionally, invested users will become Ask only for limited input from users Users are not stupid Create emotional connections Users want novelty
  • 14. Know Thy User Build healthy long-term relationships with users User’s will ask why doesn't my brand / site / app know me? Build users trust incrementally and look for soft commitments along the way Reduce input forms, user fatigue Hide technology from the user
  • 15. Simplicity Make it feel snappier – always go back to engineering Reduce chances for users to make mistakes Stop making people passengers and more partners of the user experience. Stop commanding users what to do Reduce everything thoughtfully
  • 16. Tell a Story - User Research Contextual research Competitor Analysis In-depth interviews Visual Style Social analytics Focus Groups Online interviews Existing Users Analytics / tracking On Location Street interviews Third Party Studies Usability Review Card Sorting
  • 17. Create Personas User Background: Age range, native language, physical and or cognitive limitations Experience: How familiar are your users with similar systems? Will they need to learn? Behavior: What motivates users. Do they share any behavioral traits? Desires and Concerns: What do they want to achieve, what concerns do they have?
  • 18. Focus on Outcomes Not Deliverables Real people use your products and services, real people with different wants, needs, abilities, environments and a million other possible variables that need to be factored in… “Businesses cannot treat their customers as passive consumers any longer, every company is in the user experience business” “If you take the time to understand how people think, then design solutions around their true needs and behavior – your design will be far more likely to perform better with them.” http://alistapart.com/column/explaining-water-to-fish
  • 19. Remember “Users will never forget how you made them feel” Maya Angelou
  • 21. Responsive Design Still in it’s infancy Content Dictates It is ‘Future Friendly’ More Time = More Cost Content Managed Across All Devices / Screens Use of Best Practice in HTML5 & CSS3 Media Queries Many frameworks, templates and solutions
  • 22. Responsive Design (Sample 1) boldandnoble.com
  • 23. Responsive Design (Sample 1) boldandnoble.com
  • 24. Responsive Design (Sample 2) skinnyties.com
  • 25. Responsive Design (Sample 2) skinnyties.com
  • 26. Responsive Design (Mobile Samples) thisiszone.com starbucks.com cibc.com
  • 28. Design Trends – Flat UI Design No drop shadows, bevels, gradients and no depth Every element is clean, crisp including buttons and navigation menus Color of the Year in Web Flat interfaces are easy for users to understand and interact with Use simple interface elements such as icons Simple, easy to click and tap Pantone Emerald 17-5641 Simple shapes – rectangle and circles Use of bold simple Colors
  • 29. Design Trends – Flat Design – Color Palette flatuicolors.com
  • 30. Typography Considerations Look and Feel of type used should suit the overall tone and message Use simple font pairings Flat design uses no more than two font pairings (novelty font for headings) Use sharp, crisp, bold clear typefaces San Serif Typefaces are typically used in flat design Flat design focuses on simplicity – so should your text (content) Reduce use of drop shadows, gradients – strong color contrast, (black & white) Give type / paragraphs plenty of room to breathe – lots of white space Good starting place – Google Fonts: http://www.google.com/fonts
  • 31. Flat UI Design Flat UI Design Trends
  • 32. Flat UI Design Flat UI Design Trends
  • 33. Flat UI Website Design Square: http://www.square.com
  • 34. Flat UI Website Design United Pixel Workers: http://www.unitedpixelworkers.com/
  • 35. Flat UI Website Design Get Cellar App: http://www.getcellarapp.com/
  • 37. Mobile First (Project Depending) No longer an afterthought Prepares brand thinking for the explosive growth in mobile apocalypse Forces brand focus and prioritization – under mobile constraints Allows for new and innovative brand experiences built on capabilities and paradigms of devices Start with presumptions of connectivity, context interaction, and location
  • 38. Mobile First (Project Depending) “The simple guideline is whatever you are doing – do Mobile First” Eric Schmidt, http://bkaprt.com/mf/1 “We’re just now starting to get into Mobile first. What we are finding is that the designers on mobile are really embracing the constraints and that it is actually teaching us a lot about how to design back to the desktop” Kate Aronowitz, Facebook Director of Design, http://bkaprt.com/mf/2
  • 40. Social Media All Companies are social media companies now. Key Platforms: Pinterest, Instagram, Facebook and Twitter.
  • 41. Social Media - Pinterest Pinterest: Female oriented mainly, aspirational – intent to buy (insights), pins drive traffic to websites – big referrals, more physiological, infographics – shared and repined and enormous virality and video.
  • 42. Social Media - Instagram Instagram: Take print campaigns online creatively, youth marketing and strong visuals, storytell visually, promoted grams, more advertising to come, # tactics / be creative, animated gifs and video.
  • 43. Social Media - Facebook Facebook: Virality, figure out how to storytell, scale in demographics, biggest opportunities, images matter – it’s a picture platform, infographics, storytell through photos, quality, calls to action, think mobile, less text, right times to post, video and animation…
  • 44. Social Media - Twitter Twitter: Jump in on any conversation, you need to listen on Twitter – and jump in where you can on conversations to add value, a brand can show it cares, brands gain credit, create enormous context, bring value, build most equity, huge opportunities in storytelling, listen and engage, bring value – answer questions, share and re-tweets, need to be witty, smart and engaging.
  • 45. Glossary User Experience Design (UXd) How the user thinks and feels Information Architecture (IA) How the system is organized User Interface Design (UI) How the content is organized Interaction Design (IX) How the user and device act and react Responsive Website Design (RWD) Optimal fluid grid based website design that will flow and stack on any screen size / resolution / device. Adaptive Website Design (AWD) Web design to scale to predetermined set of screens and devices.