Learning User Experience Design Series: UI Design

In the previous part of the learning user experience design series, I discussed user research and validation. It is in that phase in which you take your best data-backed ideas and validate. Validating quickly verifies whether the ideas/solutions you crafted are indeed solving the problems you set forward to resolve.

Your users, whether or not they understand the product or service you are designing for, are the best method to use when uncovering the real reason behind why some design problems exist. I also discussed different methods in which you can get your users involved; all of which make up what is known as user research.

Without validation from actual users, you will most likely be solving problems that don't need to be solved. You may even be creating more.

Part 5 of the Learning User Experience Design Series discusses the next step in the design phase: User Interface (UI) Design. In this phase, we bring ideas to life by introducing interfaces and interactivity used to tie into the problem being solved.

UX Design vs UI Design

An ongoing misconception within the design community is defining the difference between User Experience design and User Interface design. You can have one without the other but having both will prove to be valuable.

Just because a website or application doesn’t look great doesn’t mean it isn’t necessarily easy to use. The same goes for websites and applications that look really nice but provide a terrible user experience. Providing a good balance between experience and interface design offers users a richer experience while making their lives easier.

User Experience Design

If you have been following along in this series, you may have noticed there are many moving parts contained inside the user experience design process. It’s way more than just design.

It’s way more than just design.

As a UX designer, you are responsible for paving the path in which your users take to perform tasks or functions within your website or application.

Thinking many steps ahead and providing the most logically sound experience will often win over users immediately. Your users’ don’t want to waste time nor do they want to have to hunt to find whatever it is they are looking for.

Each part of this series is a part of the user experience design process. Each phase should be repeated for every design you produce or the problem you solve. If part of the process is lacking or goes untouched you will often see the result of this presented blatantly inside your products.

If you can provide an experience that is simple and effective but is also pleasant for the user you may very well be on to something. THIS, in essence, is user experience design.

User Interface Design

User interface design is only a tiny part of the User Experience design process and is often mistaken for UX design itself.

UI design is the presentational layer a user both identifies and interacts with. More than the presentation, UI design is also the animation and interactions between the user and the elements on their screen.

It’s imperative the UI is legible, accessible, and most importantly, makes sense for the application.

Responsive Design
With users in mind, a good UI designer will already be aware the audience is coming from many different devices to view the app or website.

Common elements to pay attention to include:

Buttons - their respective sizes & interactive states
Legible typography - choosing good typography is crucial to maintaining engagement.
Text Size - too large or too small is hard to read. Make it easier on your users by optimizing text size. Test on many devices to validate.
Accessible content - content for screen readers, blind individuals, etc…
Device size - Computers, laptops, tablets, phones, projectors
Image size - Gotta be viewable on all screens.
Icon Usage - Do they make sense? Can the user understand them without accompanying text? Do you really need them?
Loading states & Error states - Don’t leave your users in the dark. Let them know something’s happening.

Why these elements? Well, think of these elements as dynamic components used to support your content. If you need the user to provide input or interaction these will need to be properly configured and optimized so they can do so easily.

The components need to mold together nicely as well as be easy to use. They shouldn’t take away from what your users came to see nor should they be impossible to use. You may need to tweak different components to better adapt to different devices or even content that changes in real-time.

Example use cases include criteria where images need to scale down to save space and be viewable, or if icons replace text on mobile and tablet devices, text size increases on smaller screens and providing loading states so the user knows something is happening before abandoning ship, etc…

Mobile First?
Many designers would argue in favor of the mobile-first approach when designing websites and applications, there are even books written on the topic. While I understand the reasoning, I don’t necessarily think mobile-first design a stronger method as opposed to designing for a desktop system first and then scaling the design down.

Both methods provide you with similar results but use a different process to get from point A to point B. I would also argue it boils down to preference and planning. If you know what your desktop design will entail while designing using the mobile-first approach then, by all means, practice this method.

It’s more than just aesthetics

UI design is more than just about the look of an interface. Certain requirements and constraints present themselves to designers which need to be taken into account. Experience doesn’t have to be jaw-dropping beautiful to look at to win people over.

Craigslist is very basic and that is completely on purpose. It provides a rich experience despite being lacking on the ”looks”.

The website uses pretty basic UI to appease the users who are more interested in content than the interface. If the team at Craigslist were to change the design drastically you can bet there would be decreased usage and/or complaints from their users. Lack of UI also promotes page rendering speeds behind the scenes which are sometimes an afterthought.

My own assumption is that Craigslist is completely content-driven. There is a lot of content from virtually all parts of the world and the site handles it well.

The team at Craigslist probably decided not to clutter the interface with unneeded components as it would just make the website harder to use. Sure, it doesn’t look as great as some other websites but as the expression goes:

“If it ain’t broke, don’t fix it”.

This is all especially true because of the amount of traffic the website receives daily.

Google search results

Google uses the same method as Craigslist when it comes to its search results design. The experience itself is balanced and legible and easy to scan. The UI hardly exists but it is still there and you can tell a lot of work has been put into it. Using the “less is more” approach Google has successfully made searching for anything incredibly fast and easy for its massive user base.

Accessibility should never be an afterthought

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web.1

Being a good designer means taking important factors such as this into account from the start. Some users won’t be able to read the content you share let alone deal with any part of the UI design. Making a website accessible allows everyone equal access to the same information we all know and love.

Imagine for an instant if you couldn’t see or hear yet you still want the information we all take for granted during our day-to-day lives. Can you emphasize with the frustration of a website not being accessible?

Dealing with different languages

Most of us have a primary spoken language we choose as our default. This often yields us to believe we only need to target users with of the same language. Designers sometimes get trapped inside this bubble and fail to think about other people who don’t speak their same language and then, as a result, their design becomes affected.

Some languages are read right to left and others are read left to right. How will your design adapt? What if a button needs to grow because the translated text inside it is longer than the original text you designed around? Factors such as this are crucial to keep in mind if you are building a website or application on a global or multi-lingual scale.

Animation

The animation is like the frosting on a cake for websites and apps. While experience is capable of using zero animations, what they do provide is a richer experience.

Users who use an application or website that leave them with a smile on their face have probably experienced some neat animations and effects. Some animations can help with loading times, error states, success states, and a ton more. Combining animation with content all leads to successful UI design.

Tread wisely
With so many ways to animate your designs these days, many designers are abusing their privileges. It's rather difficult to find a website or app without animations these days and the sad reality is that most designers overuse animation. Doing so is very contradictory towards good user experience.

UI/UX Design Tools

There are a ton of tools on the market that can help UI/UX designers perform their job and easily broadcast their ideas. Below I’ll outline my favorites as well as a bit about them.

As always, use whatever you are comfortable with. You don’t need to hop on the trend train as I like to refer to it. The latest and greatest tools aren’t necessarily better if you can’t use them to the fullest potential.

Sketch
Adobe Illustrator
Affinity Designer & Photo
Omni Graffle
UX Pin
Pixate
Invision
Marvel
Balsamiq
Pen and Paper Pen and Paper cannot be beaten when hashing out design ideas and prototypes. Here are some cool free templates to print.

Animation & Interaction based tools worth trying

UI Inspiration and Patterns

To design, we often need to be inspired. Doing so sometimes means looking towards other UI Design solutions and see what works and what doesn’t. Many websites exist to help with UI design inspiration directly. Below I’ll list some of my favorites.

Little Big Details
A daily dose of design inspiration which highlights the smaller details of great UI design solutions.

PatternTap
A bigger look at patterns discovered inside UI design.

Mobile Patterns
Common patterns curated by category in a visual feed.

Inspired UI
Mobile UI inspiration

KONIGI
Curated UI roundups which include video feedback on what works and doesn’t work with a given UI/UX solution.

UX Archive
“The iPhone app archive”. This site shows common workflows and experiences for iPhone based applications. A great look at current trends and patterns.

Call to idea
Inspiration delivered quickly for all varieties of components.

For a better look at some popular libraries and brand style guides out there, today check out my other post called The Ultimate Collection of Modern Branding Guidelines.

References

1 - w3.org/WAI/intro/accessibility.php