UX Patterns & Design Systems
2 likes254 views
The document discusses the UX trends of 2018, focusing on UX patterns for consistency and the development of design systems. It highlights the importance of atomic design methodology in creating reusable components and standardizing UI elements for improved user interfaces. Additionally, it addresses the significance of immersive user experiences and the integration of frameworks to measure user satisfaction.
UX Patterns & Design Systems
- 1. UX TRENDS OF 2018 UX PATTERNS, DESIGN SYSTEMS, TOOLS AND FRAMEWORKS Roshan Ravi
- 2. UX Architect Trend 01 UX PATTERNS FOR CONSISTENCY
- 3. UX Architect But, first.. UI Patterns UI Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for creating user interfaces.
- 4. UX Architect User Goal Jean’s TV has stopped working. She wants to buy a new TV within her budget. User Tasks Searches a product Compares prices and features Reads reviews Checks delivery options Checks payment options Adds to cart makes payment Checks e-mail for confirmation Tracks the delivery Reviews the product Functionality Clicks on compare check-box Clicks on Compare button Compares Price and features. Clicks on a product that fits her requirement within the budget. Success of a user goal will depend on how well a digital property can facilitate the user to perform user tasks. Jean The Mom 50 Years old Self Employed writer UI Pattern - Product Comparison
- 5. UX Architect You have seen this everywhere.
- 6. UX Architect UX Patterns. UX Patterns are collections of tried and tested UI Patterns that solves common UX problems. UX Pattern consists of many UI Patterns that collectively solves a set of user tasks. Example - Shopping Cart
- 7. UX Architect Why Use UX and UI Patterns? Tried & Tested Familiar to users. Users look for patterns. Readily available libraries to implement the designs.
- 8. UX Architect Trend 02 Design Systems
- 9. UX Architect What is a Design System A design system is a collection of reusable components, UI Elements and styles in a standardized format, that can be put-together to build any type of application. - Convenient and easy to build - Makes development easier - UI Patterns and libraries will become standard and easy to recognize for the users.
- 10. UX Architect That’s great.. But, how do we build one? Atomic Design Methodology
- 11. UX Architect Atomic Design - Inspired by chemistry. Atoms Molecules Organisms Templates Pages
- 12. UX Architect Atomic Design Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages
- 13. UX Architect Atomic Design Atoms Elements Textbox, Paragraph Label Heading 1 Molecules UI Patterns A form field that captures name (consists of a label and a textbox) Organisms Components A contact form that captures Name, email, Phone number And a message Templates UX pattern A form template that Is designed to Display any type Of form elements And related functionalities Pages Application / Page A specific page created using the form template to capture feedback from a customer.
- 14. UX Architect Atomic Design Demo Atoms Molecules Organisms
- 17. UX Architect ...and, we are building a design system of our own. Accion Design System.
- 18. UX Architect Accion Design System - Preview
- 19. UX Architect Accion Design System - Preview
- 20. UX Architect Accion Design System - Preview This Presentation and all our branding materials have been designed using the Accion Design System
- 21. UX Architect Accion Design System - AccionLabs.com
- 22. UX Architect Benefits of Atomic Design System Branding Consistency - Colors, - Imagery, - Design Language - Messaging UI Consistency - Branding - UI Elements - Interactions UX Consistency - Usability - Standard UX across all products and platforms Theme-ability - Ability to change styles - Ability to extend the design when needed Device Agnostic - UI Elements are designed to work with all devices. - Responsive/Adaptive Time-saving - Reduce the design iterations - Improves UI Development process and time.
- 23. UX Architect Trend 03 IMMERSIVE USER EXPERIENCE
- 24. UX Architect Immersive UX - Conversational UI
- 25. UX Architect Immersive UX - Auditory UI
- 26. UX Architect Immersive UX - Augmented Reality
- 27. UX Architect Immersive UX - Virtual Reality
- 28. UX Architect Few Little Known Benefits of Auditory UI Accessibility Ability to combine ARIA (Accessible Rich Internet Application) roles and convert websites to Voice Enabled Interfaces Assistive Technology without the added cost. Assistive Tech, such as screen-readers are expensive tools. With a voice enabled virtual assistant, you can eliminate the need for such proprietary tools and still give a better UX for differently abled users
- 29. UX Architect Tools & Frameworks Can you quantify & measure an experience?
- 30. UX Architect “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” DON NORMAN “Informed by data, driven by empathy” Booking.com Design Guidelines “The main tenet of design thinking is empathy for the people you’re trying to design for” David Kelley, Founder of IDEO
- 32. UX Architect Google HEART Framework