The Basics
User Experience (UX)
Refers to the users’ interactions with the application. What the user benefits from while on the app.About the feel or flow of the entire app. Making the overall product intuitive and enjoyable is a part of UX.
User Interface (UI)
Refers to the visual aspects of the application. The appearance or animations of individual components or elements are parts of UI. The User Interface(UI) contributes to the User Experience(UX).
These concepts have overlapping similarities, but both make up your users' enjoyment and likelihood of returning.
Image from What is UX Design? Differences Between UX and UI Design
A positive User Experience (UX)
Looking into some super successful companies we can see what works.
Airbnb
The founders of Airbnb stumbled upon an idea that was not widely available. There was a consumer want for non-hotel lodging. The founders stayed focused on the user experience. Keeping every listing personalized, lets the user feel a connection. They have many interactive features. One is a map that includes many filter options. Another is an “Experience” feature that allows Airbnb to develop further a connection with the user and the user to their environment. Public reviews and user verifications allow hosts and travelers to feel confident in their decisions. It’s hard to trust just the seller! This app has become so successful that many landlords have tried switching to running Airbnbs and even made renting less affordable in many areas.
Google took over as a search engine because of its far superior UX. It started with being faster, prettier, and giving more relevant results than its competitors. Their About Page has an article, From the Garage to the Googleplex about the founders' original mission,
“to organize the world’s information and make it universally accessible and useful.”
So successful, that it was the first technology company that’s usage became a verb. Now, Google is so much more. You can easily change your search between websites, images, shopping, and more. Currently, the search engine even gives snippets or relevant question drop-downs that should be useful to you based on your search, not even needing to leave the search page. The company did not stop there and created many sharing-based apps that allowed people to work together for free on the internet like never before. Logged into your Google account, you can switch seamlessly between the search engine, mail, calendar, etc...
The above image shows the first thing shown from search What makes for good UX?
When thinking about improving your user experience, think about ways your user can feel more connected with your product as a whole. Keep them engaged with your site, whether through personalized ways or with features that could help them seamlessly accomplish your product’s goals.
A positive User Interface (UI)
Some more on the big guys
Airbnb
Hired professional photographers for listings when they noticed the photos were lacking. Shows helpful information about listings on the search page, including photos, cost, rating, location, and others depending on the search. Features like filters and the map are intuitive and easy to look at. Minimalistic design and visually pleasing spacing.
Apple
Their developer site has an article, “UI Design Dos and Don’ts” with a nice four-section quick reference to help with mobile development. Keeping the following four topics from their article in mind should greatly impact the UI of your final product.
- For interactivity, they suggest the layout to fit the size of the screen, users won’t enjoy having to scroll horizontally to read important content. Keep an appropriate size and spacing between clickable elements. Apple suggests at least 44 by 44 points(Similar to pixels, but points are slightly larger. Pixels are about 1/96th of an inch, while points are about 1/72nd). To add to user engagement, choose elements that allow for touch gestures in addition to clicking.
- As far as readability, “Don’t let text overlap.” Add extra spacing between lines so your component doesn’t look too chaotic. To avoid having the user zooming while reading, keep text at a minimum of 11 points. Only use font colors that greatly contrast the current background. Failing at any of those three things can make it impossible for a user to even read important information.
- On the graphics side, your product’s images should offer higher-quality options for today’s high-resolution screens. Don’t let your images become distorted. Pictures often look very strange if their original height-by-width ratio is changed
The above 3 photos were also included in Apple's aritcle, "UI Design Dos and Don’ts"
- For clarity, make sure your layout has controls that are intuitive and minimalistic. Proper alignment allows users to easily tell where they are and what elements on your page are related.
Have fun designing!
You need both for users to want to keep returning. These major companies with publicly acclaimed UI and UX have kept their user’s experience as a priority and suggest you do the same, before even starting your project.
Top comments (0)