5 Fundamental UX Design Concepts to Improve Discoverability & Usability

UX design refers to the overall experience that a person gets from using a product. This is different than UI design, which is an aspect of the user experience (UX) that specifically involves the design of the visual interface.

Two critical aspects of UX design are discoverability and usability. Discoverability refers to the process of learning about a produce and understanding how to use it and what it is used for. Five fundamental concepts can be used to properly explain discoverability and its application to user experience.

 

1. Affordances

uxdesign_blog_01

An affordance, simply put, is what a product is used for. A chair affords sitting; Uber affords car rides. Visibility is crucial to an affordance. If your app allows you to instantly order a pizza, it needs to be obvious to the user that they can do that. If the affordance of your app is not clearly visible, then your user will never realize that they can order pizza, which renders your app useless.

However, products also have anti-affordances: actions it cannot be used for. To be effective, anti-affordances must be easily perceivable. For example, glass offers the affordance of transparency and support, but offers the anti-affordance of allowing objects to pass through it. This is why birds often fly into glass windows. A signifier is necessary to identity an anti-affordance: the signifier makes the anti-affordance perceivable. Putting window clings or a sign on a glass door would act as a signifier.

 

2. Signifiers

uxdesign_blog_02

A signifier communicates what the affordances of a product are. If you slide your finger across the screen to answer your phone, this needs to be clear to the user. In addition to these intentional signifiers, unintentional signifiers exist: signs that you did not intend to produce that the user interprets as signs. For example, if you have an arrow pointing down to signify that the user should scroll, they may incorrectly interpret the arrow as a button and try to tap or click it. Be aware of what users interpret when they test your app, and actively work to reduce confusion and make signifiers as clear as possible.

 

3. Mapping

uxdesign_blog_03

Mapping refers to the relationship between the elements of two sets of things. For example, if you have an iPad magazine with multiple stories, swiping right and left (signified by arrows) might switch among stories, while swiping up and down (signified by the words “swipe down to read more”) would allow the user to read more of an individual story. When determining how to lay out the interface to incorporate these interactions, one must use mapping. Straightforward mapping is the goal: it should be obvious on a page what features can be tapped, moved, zoomed in on, etc., and the location of these signifiers on the page (mapping) should make sense. If you swipe right and left to go among stories, these arrows should be on the far right and left of the page. Putting the arrows somewhere else on the page can cause confusion; if you put right and left arrows under a photo, the user will think the arrows signify a photo slideshow, not the ability to read the next story.

 

4. Feedback

uxdesign_blog_04

Communicating with the user is crucial, and when the user makes a request, they must receive an indication that their request was noted. Imagine if you turned off your device, and instead of seeing a screen that said “Shutting down; please wait,” nothing happened. You would assume you did not press the button hard enough and try to turn it off again and again. User feedback is essential. With that being said, avoid using too much feedback, as that will become annoying for the user. Feedback must also be prioritized; minor actions should receive less obvious and continuous feedback than major actions. Imagine a phone on vibrate: a long vibrate means a phone call, which is very important, whereas a short vibrate signals a text or email notification. If all interactions used a long vibrate, the user would be confused and annoyed.

 

5. Conceptual Models

uxdesign_blog_05

A conceptual model explains how something works. This is usually highly simplified. Consider the desktop on your computer: obviously there is much more to an operating system than those 20 icons, but most users do not wish to know or understand the inner workings of their laptop—they just want to open the programs they need. Most users understand their devices based on perceived structures presented to them. Making these structures easy to understand is essential.

These five aspects of discoverability and usability combine together to create an effective interface that a user can easily understand and interact with. All five components are necessary to have a great product, and when these five elements are properly used, the end result leave the user feeling satisfied and rewarded.

UI vs. UX Design: What’s The Difference?

Learning the difference between UI and UX design can initially be very confusing. Designers will tell you that UI is part of UX, but UX is not “experienced” from UI only. But what does that mean? Which one is more important? How do you use them together effectively? Rahul Varshney, co-creator of Foster.fm, explains, “User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. Something very usable that looks terrible is exemplary of great UX and poor UI.” –Helga Moreno

What is UX Design?

User Experience Design is the overall “feel” that a user gets from your product. It’s their entire experience. UX designers succeed if users have a positive and satisfying experience using their product. For example, if you open up an app on your phone and it’s confusing and complicated, and you feel frustrated after using it, that’s an example of bad UX design. On the other hand, if an app is simple and seamless, and you quickly and easily accomplished what you opened the app to do, that’s good UX. Remember that even though UX design is about how the user feels, good UX design doesn’t mean that after every interaction, the user is laughing and smiling because the interface was just so fun and easy to use. People expect apps to be simple and easy to use. So (unfortunately), UX design is not usually noticed unless it’s bad. It’s kind of like how people get annoyed if you forget to wish them a happy birthday, but when you remember, they just say “thanks!” and move on.
 

ux01

 

So, how do you construct this perfect user experience? It’s a whole lot more than just design. UX relies on research and data to determine what users prefer. Usability is influenced by visual aspects such as where buttons are, how a menu is formatted, and how you navigate through a product.

“UX designers are concerned with how the user experiences the product. They want the user to come away from the app feeling good.”
Matt Powers, web designer at Blue Soda Promo

Here’s an example of UX design: Most apps go to a loading screen (known as a splash screen) when you first open them. This splash screen usually is colorful and prominently features the app logo. And, it usually features some sort of animation. Why? Because when something is loading and a user sees a circle turning or a bar filling up, they can easily see that their app is indeed loading. If a loading screen is a static page, the user may wonder if the app is frozen, or they may get impatient waiting. If an app says it’s 90% loaded after a minute, the user is a lot more likely to wait than if they’ve been waiting a minute and have no idea what percent of the app is loaded yet. Little things like that contribute to the overall user experience.

 

UX02

 

What is UI Design?

User Interface Design is more visual. It’s how a user interacts with your interface and is a part of UX design. UI design is comprised of the visual aspects of a design, including the colors, buttons, images, etc. With the demand for digital products only increasing, UI design is the future of graphic design. Some UI roles require coding knowledge or proficiency, while others have a separate team of developers. Knowing coding as a designer definitely won’t hurt, though.

“If the UX designer is looking at a website from 40,000 feet, the UI designer is looking at it with a microscope.”
John T. Jones, digital marketing manager for USA Financial

UI designers create tangible elements that comprise an app or website. They want to optimize the layout and determine which assets appear where. Especially now, digital design is essential to establishing a website’s identity and legitimacy. If your website or app is unattractive, you lose a significant amount of credibility, which is going to hurt you.

How do UI and UX design work together?

UI design is one aspect of UX design. Larger companies separate these roles, while smaller companies often combine them. Either way, they’re both crucial. You don’t want an elegant interface that’s difficult to use. And you don’t want an app that’s easy to use but is boring and unappealing. When UI and UX combine together perfectly, the result is a clean, simple, stunning product that is both easy to use and engaging to the user.
 

ux03

 

So…how can I learn UI/UX design?

Because these fields are very new, there are very few college programs specifically tailored for UI and UX design. If you’re interested in UI design, you can enroll in a graphic design, interactive design, or visual design program and apply those concepts. A background in visual design, computer science, or psychology/sociology can help you with a career in UX design. Learning about emotional intelligence will also be helpful. For a more specific, immersive experience, look into UI/UX bootcamps or courses, especially if you live in a major metropolitan city. There are also online courses or tutorials you can try. No matter what route you take, pursuing a career in UI/UX is a great career move, as these skills are in extremely high demand.
 

Why Designing for Mobile Devices Is Like Eating Ice Cream

Mobile devices account for more than half of online search traffic, and that number is only going to increase. Designing for such a small screen is significantly different than designing for a computer screen, and it’s crucial to design unique interfaces for both. And don’t forget about tablets, either! Each device should have a design that is optimized for its dimensions. All these factors to consider might seem overwhelming at first, but don’t worry, I have a solution. During my research for this post, I found quite a few connections between mobile-first design and ice cream. Whether you want a career in UX design or you really like ice cream, these five points will definitely interest you.

summer-dessert-sweet-ice-cream

 

1. You keep the size in mind.

If you go to an ice cream shop and order an extra large cup that you load with sprinkles and chocolate chips, you’re going to put less sprinkles/chocolate chips if you get a size small. Yes, either way you’ll have sprinkles, but not nearly the same amount. This is true for mobile design as well. If your website has a video, 5 photos, and an interactive map, you’re not going to put ALL of those items on the home page for your mobile site. You could stagger them so they appear as you swipe down, but you won’t see all of them immediately above the fold. Don’t try to cram in all your desktop features to your mobile site. Design with the space you have in mind.

 

2. Options are essential.

Why do ice cream shops serve cups and cones? Because some people prefer cones, and some people prefer cups. You’re serving the same thing, just in two different ways. Compare this to a slider in a mobile design. Some people want to swipe to see the next image, while others prefer tapping an arrow. So, which do you put? Both. If you just put arrows, people who prefer swiping will be annoyed. If you just put swiping, people who like tapping arrows will be annoyed. Options ensure that each user has the experience they want. And then everyone who wants an ice cream cone gets one.

 

3. You don’t want too much in one bite.

Your website has a ton of cool stuff. Great! But you need to space it out. White space is definitely your friend, and a clear and clean user interface provides a much more pleasing experience. If you eat too much ice cream too fast, you’ll get brain freeze. If you throw all your content at us at once, your user is going to get overwhelmed.

 

4. It can make people happy.

People use their cell phones when they’re bored on a bus, annoyed that their friend is late, and frustrated that their plane got delayed. The last thing they need is an app that is boring, glitchy, and confusing. Mobile apps can be fun, interactive, and engaging. Use that to your advantage! Just like eating ice cream, using a cool mobile app won’t make all your problems go away, but it can make you forget about them for a few blissful moments.

 

5. It’s fun for all ages.

The fact that toddlers can and do use iPads and smart phones is simultaneously exciting and terrifying. Mobile interfaces are extremely intuitive, which is why they’re so easy for people of all ages to use. Use that intuitive aspect to your advantage. As explained here, minimize the interface chrome (buttons, tab bars, check boxes, sliders, etc.) to make your content as easy-to-use as possible. Hopefully, I don’t need to explain to you why ice cream is kid-friendly. I think that one goes without saying!

food-ice-cream