Dev fest ile ife 2014-ux, material design and trends
5 likes1,131 views
This document discusses user experience design and trends. It covers the fundamentals of UX including focusing on users and prioritizing speed. Popular UX techniques like personas, wireframing, and user testing are explained. Material Design is introduced as Google's visual design language using concepts like color palettes and animations. Current design trends involving layered interfaces, simple color schemes, and thumb-focused interactions are reviewed. Emerging UX trends towards always-connected devices, smart watches and homes, and setup guides replacing manuals are also examined.
Dev fest ile ife 2014-ux, material design and trends
- 1. User Experience, Material Design & Trends Tunde OJEDIRAN UX Designer & Developer
- 2. GOALS •Know the fundamentals of the UX (User Experience) Process •UX Techniques •A deeper look into Material Design •Get familiar with latest User Experience Design Trends •Questions and Answers
- 3. WHAT IS UX? Does It Matter?
- 4. WHAT IS UX? UX is everything you need to know, think about and doto make sure that you are launching the right product for the right people
- 5. UX incorporates: •User-CenteredDesign •User Interface (UI) or Graphical User Interface (GUI) •Usability •Human Factors & Ergonomics •Human-Computer Interaction WHAT IS UX?
- 6. 6 FUNDAMENTALS OF UX
- 7. UX Fundamentals FOCUS ON THE USER User-CenteredDesign. Understand your user’s needs, motivations and limitations. Put them at the centre of your decision making.
- 8. UX Fundamentals DO YOUR RESEARCH Understand the product area, the strengths and weakness of your competitors Validate your assumptions with friends, relatives and likely users Adapt your initial plans based on what you learn
- 9. UX Fundamentals STRIVE FOR SIMPLICITY •Make sure your proposition and benefits are clear and can be championed by the user •Identify which features are most valuable to the user and work hard to remove road blocks from their path
- 10. UX Fundamentals PRIORITIZE SPEED •Get the user to task completion as quickly as possible •Make the most important actions the easiest to accomplish •Use existing conventions; don’t confuse the user
- 11. UX Fundamentals NEVER STOP LEARNING •Seize every opportunity to learn from the insights you get about how your product is being used •Use analytics and experiments to understand usage and adapt your product to build on what you find out
- 12. UX Fundamentals SOLVE BIG PROBLEMS •Be ambitious and innovative in your choice of product area and approach •Question established procedures and look for opportunities to create lasting value for users
- 13. UX TECHNIQUES
- 14. UX TECHNIQUES PERSONAS A personais a fictitious identity that reflects one of the user groups for whom you are designing. Personas need to be informed by research to be useful. It can be tempting to put on your creative writing hat and invent details to make them believable or interesting. However, the goal should be to have your personas reflect patterns that you’ve identified in your users (or prospective users). There’s no shortcut for identifying these patterns—they come from user research: conducting interviews, surveys, user testing, contextual inquiry and other activities.
- 15. UX TECHNIQUES WIREFRAMES A wireframe—a rough guide for the layout of a website or app—is the deliverable most famously associated with being a UX Designer. Once created by designers as a series of static images, these days tools like Balsamiq Mockups, Axure RPandUXPinmake it straightforward to evolve your wireframe into an interactive prototype without writing any code. Other design tools like Adobe Photoshop, Fireworkscan also be used
- 16. UX TECHNIQUES USER TESTING Sitting users in front of your website or app and asking them to perform tasks you’ve planned for them while they think out loud is the fundamental premise of user testing. User testing is straightforward enough that anyone can—and should—experience running one. Being in the same room while someone struggles to use your product is a powerful trigger for creating empathy with users—a common trait.
- 19. MATERIAL DESIGN •Google’s approach towards transforming the look and feel of their products (Android L, Android Wear and even Polymer) •Based on the concept of an intelligent material that is as simple as paper but could transform and change shape in response to touch •“…a design for the material of the future.” -Matias Duarte Vice President of Design, Google
- 20. How Google Designed Android L (Click here to watch the video) VIDEO PRESENTATION
- 21. Material Design is the new visual look coming to replace the Holo MATERIAL DESIGN
- 22. MATERIAL DESIGN Themes DARKand LIGHT
- 23. MATERIAL DESIGN Themes Every material theme has: •colorPrimary–Action bar color •colorPrimaryDark –Basically darker colorof action bar in status bar, automatically set to black for non- supported apps •textcolorPrimary •windowBackground •navigationBarColor–black for non-supported apps
- 24. MATERIAL DESIGN Themes These colorscan be customized
- 25. MATERIAL DESIGN ColorPalette Primary Colors Accent Colors Google suggests using the 500 colorsas the primary colorsin your app and the other colorsas accents colors.
- 26. ColorPalette
- 27. MATERIAL DESIGN Widget RecyclerView A new kind of ListView Provides more performance improvements and is easier to use
- 28. MATERIAL DESIGN CardView Displays important information in consistent cards Widget
- 29. MATERIAL DESIGN Android L Developer Preview contains a new API including new animations such as touch feedback animations, transitions and more. Animations
- 30. MATERIAL DESIGN To make everything in the same simple way so anybody can fully understand them even if it is an app that comes with brand new functions To create unified experiences across all platforms and screen sizes and input mechanisms Core Concepts/Idea Unite classic principles of good design with innovation and possibility of science and technology
- 32. Layered Interfaces Done right, this approach gives a real sense of 3D depth and will establish a clear relationship between elements and interactions. This is achieved by putting elements not in use at the back while placing current interaction at the front. 1
- 33. Swipe, swipe, swipe A gesture, once discovered and learned, can become a delight to use and can bring “magic” to the user experience, reducing steps in the user flow while interacting with the interface. 2
- 34. 3 Simple colorschemes Simplifying the interface improves the user experience while having too many colorscan have a negative impact upon it. A good use of colorshighlights the action you want your users to carry out.
- 35. Icons –Stroke & Fill This gives better contrast between active and inactive sections. Recognition of active tabs, controls and toolbars is more straightforward. 4
- 36. Animations –Do it well or don’t Animated demo tutorials are a great way to capture users’ attention while educating them on how best to use the app for the first time. But don’t animate just for the sake of it, have a clear motivation behind the animation effects, the abuse of motion effects can completely ruin the experience. 5
- 37. One app, one typeface This one goes hand in hand with simplifying colorschemes. The ultimate goal is simplicity, functionality and usability. 6
- 38. Thumb focused interaction When designing, take into consideration that your app will be used in several contexts, people will not always be in the situation where they can use more than one finger or both hands to interact with your interface. Design for the lazy, this can increase the usage of your app! 7
- 39. OTHER TRENDS Landing Pages Expanding Search Bars Lazy Loading Mobile First Design Quick User Registration Vector Icons and Shapes
- 40. UX Trends On A Broader Perspective
- 41. The biggest factor for providing a new UX is internet connectivity. I am not talking about computers, tablets, or smartphones here. Rather, ALL types of products will be connected to the internet at all times. New devices will thus have the ability to send and receive data, display graphs on your smartphone, and store it all on the cloud. Experts call this latest phenomenon the “Internet of things (IoT).” UX TRENDS Always Connected
- 42. •Android Wear •Apple Watch •Pebble •Tesla Motors UX TRENDS Smart Watches, Smart Homes, Smart Automobile
- 43. Setups Guides, Walkthroughs now popular UX TRENDS End of User Manual
- 44. The best way to explain products. UX TRENDS Concept Movies Itis very hard –if not impossible –to explain a new type of product through static images or even on a website. The short movie needs to be able to express how the product will improve the user’s life by giving real life examples.
- 45. Wrap Up Fundamentals Of UX Processes UX Techniques Introduction To Material Design Design Trends UX Trends
- 46. Thank You!! @danieltundeoje tundeojediran@gmail.com