In a previous post about UI UX design, we discussed differences between UI and UX design. These distinctions are significant, especially the idea that UX design focuses on research with users, site organization, and task flows. User interface (UI) typically refers to the product’s visual presentation, the mechanism used to deliver the experience.
Naturally, UI and UX design intersect and overlap. In this post, we offer five tips that will help UI and UX designers.
UI UX Design Tip #1—Principles and Patterns
Patterns may not inspire passion, but they save time and enhance consistency. Here is a short list of useful patterns libraries based on our extensive work with UI UX deisgn principles and patterns.
Design principles are the concepts that inform and drive UI UX design. These resources are a great place to start when developing design principles.
IBM Design Language: IBM focuses on enterprise-level design and consulting.
Design Principles: A useful collection of design principles from many sources including industry leaders such as Airbnb.
UI Patterns: This long-standing library is useful for UI basics such as search, forms, formatting, and navigation menus.
Audi User Interface: This library with a focus on layout is a good reference for UI UX design efforts focused on mobile as well as physical products such as cars.
Project Clarity: A library with patterns, components, and code examples.
UI UX Design Tip #2—Re-visiting the Meaning of Design
Design is not Science, Art or Engineering: In this provocative article author Sherry Wu argues that design differs from science and engineering.
Quoting several sources, Wu argues that science focuses on how things are while design focuses on how things could be.
Unlike engineers who concentrate on solving problems between various parts in the artificial world, designers solve problems between humans and the artificial world. In this context, artificial refers to anything that is not strictly part of nature but built or created such as machines and software.
Both points apply directly to UI UX design:
- UI design is often about enhancing an existing system to make it more useful, functional, and aesthetically pleasing.
- Wu’s definition of design as solving problems between humans and the artificial word captures the essence of user experience, understanding and improving human interactions with their environment whether a building, device, machine, or software.
UI UX Design Tip #3—Reviewing Interaction Design Principles
Complete Beginner’s Guide to Interaction Design While this UX Booth article targets beginners, seasoned designers will benefit from this thorough review of:
- Alan Cooper’s goal-driven design
- The basic principles of usability
- The five dimensions of interaction design
- Three cognitive psychology principles that drive UI UX design; Mental models, interface metaphors, and affordance.
UI UX Design Tip #4—Product Design Guidelines
In The 10 Commandments of Good Products consultant Jeff Davidson outlines 10 guidelines that contribute to good products in the physical and virtual world. From making an undesireaable task easier, to efficiency, to helping people, these principles are a useful reference point when considering what to design next.
Guideline 8, Satisfying the Seeking System, refers to the human desire to explore, play, and challenge oneself by trying new things. The seeking system idea reflects a key principle that informs UI UX design, wayfinding. Wayfinding refers to how people orient themselves in a physical space and navigate from place to place. The wayfinding concept explains why site navigation must be based on a sound information architecture.
UI UX Design Tip #5—Enhancing Design with Microinteractions
Microinteractions are nothing new. Yet, a brief survey of web and mobile apps makes it clear that not all designers and developers attend to this essential aspect of UI UX design. Aaron Chichioco shows how to use microinteractions effectively in Utilizing Microinteractions To Enhance Your UX Design.
Chichioco offers a succinct definition, “In its most basic sense, microinteractions are individual moments in the product design that accomplish a particular task, while enhancing what is intended to be the natural product flow.” He cites examples such as the “skip intro” button on Netflix and the reaction to a post on social media. In the enterprise space, micro-interactions include masked form fields and links in error messages that take users directly to the spot where an error has occurred.
Drawing on the work of Dan Staffer, Chichioco outlines the four essential parts of an effective microinteraction:
- Triggers, such as a toggle switches, that initiates the interaction
- Rules that determine the response to the a trigger.
- Feedback that tells users what is happening during the microinteraction such as a red message indicating that the wrong password has been entered.
- Loops and modes define the meta-rules of a microinteraction and how it changes when used repeatedly. An example is a “Buy now” button that turns into “Buy another” when a user has previously purchased the same item
As with any design, it’s important to test microinteractions with real users. Read Chichioco’s article carefully and devote time to microinteractions. Your users will thank you.