Optimal Blog

Stratis Valachis, senior user experience designer at Aviva’s Digital Innovation Garage, took some time out of his busy schedule to answer some questions about designing for conversational user interfaces (CUI). Learn more about his processes for research and design for CUI, what he thinks the future will look like, and some of the biggest challenges he’s faced while designing for CUI.Stratis will be speaking at MUXL2017, the third annual conference around Mobile User Experience in London on the 10th of November at City, University of London. Using case studies through talks and workshops, the conference will cover Core UX principles as well as emerging topics such as AI (Chatbots), VR (AR) & IOT.

What does the research and design process for conversational interfaces look like?

Like any design project, you should always start by identifying user needs and real problems. Research how users solve that problem currently and then evaluate for which use cases you can remove friction and enhance the experience by utilizing a conversational interface.Don't try to chat-ify or voice-ify your product just because it's a cool trend. In many ways conversational interfaces (CUIs), both voice and visual, have more usability constraints than traditional GUI. For example, it’s hard to interrupt the conversation to recover from errors, you can't easily skim through information, progress is linear and you very often need to rely on recall.Users make conscious compromises about which type of interface they want to use.This means that a solution utilizing a CUI needs to offer an obvious benefit for your chosen use case, otherwise users won't use your product. That's why special emphasis should be placed on early research about the context in which users will use your product and on why a CUI could provide a better experience. When you begin the design phase, a good practice would be to craft a personality for your interface. Studies have shown that because humans are empathetic, they will assign human character attributes to your CUI anyway, so it's better to make sure this is defined through design. This works really well for platforms like Google Home and Facebook Messenger, which make it clear to the user that each product built on them is a different entity from the default assistant.Some channels like Alexa, though, don't make that distinction clear. In these cases, you need to make sure that the character of your CUI doesn’t significantly deviate from the personality of the default assistant, otherwise you'll mess with their mental model and create confusion. For example, when you're ordering an Uber with Alexa, it’s Alexa that speaks back to you: "Alexa, ask Uber for a ride." "Sure, there's an Uber less than a minute away, would you like me to order it?". While on Google Home, the Google Assistant makes it clear that it passes you over to Uber "Hi, I'm Uber, how can I help?".After you define the personality, start drafting out the core experience of your product.If you're working on a visual CUI, type the conversation down like a screenplay. If you're working with voice, act the dialogue out with your colleagues and use voice simulators to see how it feels in the channel you're designing for. This will make it easier to decide the direction you'd like to follow and will also help you initiate conversations with stakeholders.At this stage, you will be ready to start designing your user flows to define the functionality at a granular level. Again, understanding context is crucial. Make sure you think of the different scenarios in which users will interact with your product and the ways they're likely to phrase their input. User testing is key for this.

What are some of the biggest challenges you've faced designing for CUI?

Setting the right expectations for users. That applies to both visual and voice interfaces. There's a gap between the mental model users have of what most AI products with conversational interfaces can do, and what they are actually capable of doing. That was a common pattern I've seen in user testing sessions even with users who had previous experience in the conversational channel that was being tested. As a designer your challenge is to make the affordances and constraints clear in a way that feels like a natural part of the conversation and mitigates disappointment from unrealistic expectations. Another challenge is trying to cater for all the different ways people will phrase the requests. The key here is to invest time and resources in user research and NLP (natural language processing) services. If you feel that this is out of scope for your project, you may consider limiting the options for your users as trying to guide them to say things in a certain way will not work. Good examples of this are Facebook Messenger bots which now allow developers to remove the input field entirely from the experience in order to prevent users from making requests that can't be supported.

How do you think CUI is going to change the way designers and researchers do their work?

It might require designers and researchers to slightly alter some techniques they're using (for example thinking aloud during user testing doesn't work with voice interfaces) but the fundamentals will stay the same. You still need to focus on understanding the problem, explore different solutions through divergent thinking, converge, develop and continuously iterate based on user feedback. The exciting thing is that these new technologies significantly expand our toolbox and offer new interesting ways to solve problems for our users.

What improvements to this kind of technology do you wish to see? How would you like this technology to progress in the future?

I would like to see a more widespread integration of voice interfaces with visuals and GUI interaction patterns. A good example of the benefits of this approach is Amazon's Fire TV. Users can converse with the system via voice when it's more efficient than the alternative interaction options (for example, searching for a movie) but use their remote control to interact with visual UI elements for tasks that would be tedious to perform through voice. For example, selecting a movie cover to reveal descriptive text and then skimming through it helps you gauge whether the plot is interesting faster than if you had to consume this information through a conversation. This hybrid approach utilizes the best of each world to create a stronger experience. I think we will see this type of interface a lot more in the future. Think of Iron Man and J.A.R.V.I.S.

Any advice for young designers and researchers hoping to get into this part of the industry?

Invest time in learning best practices for crafting good dialogue. It's a crucial skill for designers in this field. Google and Amazon's design guidelines are a good starting point. This doesn't mean you should omit training and improving your knowledge in usability for traditional interfaces. Most of the principles are time-proof and channel agnostic and will help you greatly with conversational interfaces.Another thing you should make sure you do is stay up to date with the latest trends. The technology evolves very fast so you need to stay ahead of curve. Attend meetups, work on personal projects and participate in hackathons to practice and learn from the experts.As long as you're really passionate about the field, there will be plenty of opportunities for you to get involved and contribute. We're still in the early stages of mainstream adoption of the technology, so we have the chance to make significant impact on the evolution of the field and shape best practices for years to come, which is really exciting!

We’ve been working hard over the last few weeks on some nifty little changes to the way you can use, create and manage tags in Reframer. Today, we’re happy to announce that all these changes are now live. Yay!Now, you can group your tags and add custom colors. Learn a little bit about how these new features work and how you can use them below.

More flexibility with your tags

We made these changes so that the notetaking and analysis stages of your research projects are simpler. Previously, Reframer tags would all be the same shade of blue and organized alphabetically — not always the easiest way to find the tags you’re looking for. Now you can add as many tag groups as you like to your Reframer sessions to make managing and finding your tags much quicker and more effortless. Even better, you can also apply colors to these groups. Pick from our selected palette of colors, or choose a custom one through the hex color code chart. Grouping your tags gives you the freedom to organize your research observations in the way that makes sense to your project. Here are some of the many ways you can group and color your research observations.

• Based on sentiment (happy, sad, angry, confused etc.)
• Based on products
• Based on tasks — for example, testing a certain section or feature of a website
• Based on devices used
• Based on defining personas
• Based on period of time/time of day

These new tag features give you a lot of flexibility — each group doesn’t have to contain only one color. You can add multiple colors within one group (for example, within a ‘sentiment’ group you could select red for ‘angry’, green for ‘happy’ etc).For a bit more guidance on how to write effective research observations in Reframer, check out this article we wrote for UX Mastery.We hope you like these new tag features for Reframer. As always, if you have any feedback please let us know on support@optimalworkshop.comAlternatively, comment below with some of the ways you’ve used these new features in your research.

User interviews are a great research method you can use to gain qualitative data about your users, and understand what they think and feel. But they can be quite time consuming, which can sometimes put people off doing them altogether.They can be a bit of a logistical nightmare to organize. You need to recruit participants, nail down a time and place, bring your gear, and come up with a Plan B if people don’t show up. All of this can take up a fair bit of back and forthing between your research team and other people, and it’s a real headache when you have a deadline to work to.So, how can you reap the great rewards and insights that user interviews provide, while spending less time planning and organizing them? Here are 15 tips and tools to help get you started.

Preparation

1) Come up with a checklist

Checklists can be lifesavers, especially when your brain is running 100 miles an hour and you’re wondering if you’ve forgotten to even introduce yourself to your participant.Whether you’re doing your research remotely or in person, it always helps to have a list of all the tasks you need to do so you can check them off one by one.A great checklist should include:

• the items you need to bring to your sessions (notebooks, laptop, pens, water, and do NOT forget your laptop charger!)
• any links you need to send to your interviewee if speaking to them remotely (Google Hangouts, webex etc.)
• a reminder to get consent to record your interview session
• a reminder to hit the record button

Scripts are also useful for cutting down time. Instead of “umm-ing” and “ahh-ing” your way through your interview, you can have a general idea of what you’ll talk about. Scripts will likely change between each project, but having a loose template that you can chop and change pretty easily will help you save time in the future.Some basic things you’ll want to include in your script:

• an introduction of yourself, and some ice-breaker questions to build a rapport with your participant
• your research goals and objectives — what/who you’re doing this research for and why
• how your research will be used
• the questions you’re going to ask
• tying up loose ends — answering questions from your participant and thanking them very much for their time.

2) Build up a network of participants to choose from

This is another tip that requires a bit of legwork at the start, but saves lots of hassle later on. If you build up a great network of people willing to take part in your research, recruiting can become much easier.Perhaps you can set up a research panel that people can opt into through your website (something we’ve done here at Optimal Workshop that has been a huge help). If you’re working internally and need to interview users at your own company, you can do a similar thing. Reach out to managers or team leaders to get employees on board, get creative with incentives, reward people with thanks or cakes in public — there are loads of ideas.

3) Do your interviews remotely

Remote user research is great. It allows you to talk to all types of people anywhere in the world, without having to spend time and money for travel to get to them.There are many different tools you can use to conduct your user interview remotely.Some easy to use and free ones are Google Hangouts and Skype. As a bonus, it’s likely your participants will already have one of these installed, saving them time and hassle — just don’t forget to record your session.Here are a couple of recording tools you can use:

• QuickTime
• iShowU HD
• Pamela for Skype

4) Rehearse, rehearse, rehearse

Make sure you’re not wasting any precious research time and rehearse your interview with a colleague or friend. This will help you figure out anything you’ve missed, or what could potentially go wrong that could cause you time delays and headaches on the day.

• Do your questions make sense, and are they the right kinds of questions?
• Test your responses — are you making sure you stay neutral so you don’t lead your participants along?
• Does your script flow naturally? Or does it sound too scripty?
• Are there any areas that technology could become a hindrance, and how can you make sure you avoid this?

5) Use scheduling tools to book sessions for you

Setting up meetings with colleagues can be difficult, but when you’re reaching out to participants who are volunteering their precious time it can be a nightmare.Make it easier for all involved and use an easy scheduling tool to get rid of most of the hard work.Simply enter in a few times that you’re free to host sessions, and your participants can select which ones work for them.Here are a couple of tools to get you started:

• Calendly
• NeedtoMeet
• Boomerang Calendar
• ScheduleOnce

Don’t forget to automate the reminder emails to save yourself some time. Some of the above tools can sort that out for you!

In-session

6) Avoid talking about yourself — stick to your script!

When you’re trying to build a rapport with your participant, it’s easy to go overboard, get off track and waste precious research time. Avoid talking about yourself too much, and focus on asking about your participant, how they feel, and what they think. Make sure you keep your script handy so you know if you’re heading in the wrong direction.

7) Record interviews, transcribe later

In many user interview scenarios, you’ll have a notetaker to jot down key observations as your session goes on. But if you don’t have the luxury of a notetaker, you’ll likely be relying on yourself to take notes. This can be really distracting when you’re interviewing someone, and will also take up precious research time. Instead, record your interview and only note down timestamps when you come across a key observation.

8) Don’t interrupt

Ever had something to say and started to explain it to someone, only to get interrupted then lose your train of thought? This can happen to your participants if you’re not careful, which can mean delays with getting the information you need. Stay quiet, and give your participant a few seconds before asking what they’re thinking.

9) Don’t get interrupted

If you’re hosting your interview at your office, let your coworkers know so they don’t interrupt you. Hang a sign up on the door of your meeting room and make sure you close the door. If you’re going out of your office, pick a location that’s quiet and secluded like a meeting room at a library, or a quiet corner in a cafe.

10) Take photos of the environment

If you’re interviewing users in their own environment, there are many little details that can help you with your research. But you could spend ages taking note of all these details in your session. You can get a good idea of what your participant’s day is like by snapping some images of their workstations, tech they use, and the office as a whole. Use your phone and pop these into Evernote or Dropbox to analyze later.

Analysis

11) Use Reframer to analyze your data

Qualitative research produces very powerful data, but it also produces a lot of it. It can take you and your team hours, even days, to go through it all.Use a qualitative research tool such as Reframer to tag your observations so you can easily build themes and find patterns in your data while saving hours of analysis. Tags might be related to a particular subject you’re discussing with a participant, a really valuable quote, or even certain problems your participants have encountered — it all depends on your project.

12) Make collaboration simple

Instead of spending hours writing up some of your findings on Post-it notes and sticking them up on a wall to discuss with your teammates, you can quickly and easily do this online with Trello or MURAL. This is definitely a big timesaver if you’ve got some team members who work remotely.

13) Make your findings easy to read

Presenting your findings to stakeholders can be difficult, and extremely time consuming if you need to explain it all in easy-to-understand terms. Save time and make it easier for your stakeholders by compiling your findings into an infographic, engaging data visualization, or slideshow presentation. Just make sure you bring all the stats you need to answer any questions from stakeholders.For more actionable tips and tricks from UX professionals all over the world, check out our latest ebook. Download and print out templates and checklists, and become a pro for your next user interview.Get our new ebook

Related reading

• "Individual interviews" - An article from Usability.gov explaining how, when, and why you should conduct user interviews with individuals.
• "Interviewing users" - A guide from Nielsen Norman Group showing us the situations in which user interviews are best suited, and the kind of information they can provide us.
• "Open-ended versus close-ended questions in user research" - Another article from Nielsen Norman Group explaining the differences in question types.

Ahead of her talk at UX New Zealand 2016, Lana Gibson from Lanalytics writes about a project she worked on with Te Papa.Te Papa (a museum in Wellington, New Zealand) created audience personas based on user research, and I used these as a basis to create audience segments in Google Analytics to give us further insight into different groups. By regularly engaging with our audience using both qualitative and quantitative user insight methods, we’re starting to build up a three-dimensional picture of their needs and how Te Papa can serve them.

‍

Personas based on user research

‍

At Te Papa the digital team created six audience personas to inform their site redesign, based on user research:

• enthusiast
• tourist
• social
• educator
• volunteer
• Wellingtonian

‍

These formed a good basis for understanding why people are using the site. For example the educator persona wants fodder for lesson plans for her class — trustworthy, subject-based resources that will excite her students. The tourist persona wants practical information — what’s on, how to plan a visit. And they want to get this information quickly and get on with their visit.We’ll follow the tourist persona through a couple more rounds of user research, to give an example of what you can find out by segmenting your audience.

‍

Interpreting tourist needs with data

‍

Te Papa holds information for the Tourist audience in the Visit and What’s on sections of the site. I created a segment in Google Analytics which filters the reports to show how people who visit pages within these two sections interact with the whole site. For example the keywords they search for in Google before arriving on Te Papa, what they search for when on the site, and how many of them email us.Deeper digging revealed that the Tourist audience makes up about half of our overall audience. Because the content is useful to everyone wanting to visit the museum, and not just tourists, we broadened the scope of this persona and called the segment ‘Museum visitor’.

‍

Why segment by site category — what if the audience goes beyond these pages?

‍

Google Analytics segments allow you to see all the pages that a particular audience visits, not just the ones you’ve filtered. For example over 2,000 people who visited a page within the Visit and What’s on sections also visited the Kids and families section in July 2016. So, the audience segment allows us to expand our concept of our audiences.You can segment by a lot of different behaviors. For example you could segment visitors by keyword, isolating people who come to the site from Google after searching for ‘parking’ and ‘opening hours’ and seeing what they do afterwards. But segmenting by site category tests the information architecture of your site, which can be very useful if you’ve got it wrong!

‍

Visit persona wants opening hours information

‍

What did we learn from these personas? One example is that the most searched term on the site for the Visit persona was ‘opening hours’. To help fix this, the team put the opening hours on every page of the redesigned site:

‍

‍

This resulted in a 90% drop in searches that include ‘hours’ (May 2016 compared with May 2015):

‍

‍

Developing personas with Matariki

‍

After the re-design the team ran a project to increase the reach and engagement of the Te Papa Matariki audience. You can read more about this in "Using data to help people celebrate Matariki". Te Papa holds Matariki events in the museum, such as the Kaumātua kapa haka, and this event in particular enhanced and challenged our ideas about this audience.

‍

Experiencing Kaumātua kapa haka performances online

‍

The Kaumātua kapa haka is the biggest Matariki event held at Te Papa, and this year we had 4,000 unique page views to the two Kaumātua kapa haka event pages. Traffic spiked over the event weekend, particularly from Facebook and mobile devices. We assumed the traffic was from people who were planning to come to the event, as they sit in the What’s on section. But further analysis indicates that people were visiting for the live streaming of the event — we included embedded Youtube videos on these pages.The popularity of the videos suggests that we’re taking events held within the museum walls out to people on the move, or in the comfort of their own homes. Based on this insight we’re looking into live streaming more events.

‍

We’ve taken Te Papa personas through three iterations, based on user research, analytics, then a practical application of these to the Matariki festival. Each user research method has limitations, but by regularly using qualitative and quantitative methods we’re engaging with a  three dimensional view of our audience that’s constantly evolving. Each user research piece builds that view, and allows us to plan projects and site changes with greater clarity about what our users need. It means we can plan projects that will have real and measurable impact, and allow people to engage with Te Papa in useful and meaningful ways.

‍

Want to hear more? Come to UX New Zealand!

‍

If you'd like to hear more about how Lana and Ruth redesigned the Te Papa website, plus a bunch of other cool UX-related talks, head along to UX New Zealand 2016 hosted by Optimal Workshop. The conference runs from 12-14 October, 2016, including a day of fantastic workshops, and you can get your tickets here. Got some questions you'd like to ask Lana before the conference? You can Tweet her on @lanalytics00!

The key purpose of running a card sort is to learn something new about how people conceptualize and organize the information that’s found on your website. The insights you gain from running a card sort can then help you develop a site structure with content labels or headings that best represent the way your users think about this information. Card sorts are in essence a simple technique, however it’s the details of the sort that can determine the quality of your results.

‍

Adding context to cards in OptimalSort – descriptions, links and images

‍

In most cases, each item in a card sort has only a short label, but there are instances where you may wish to add additional context to the items in your sort. Currently, the cards tab in OptimalSort allows you to include a tooltip description, a link within the tooltip description or to format the card as an image (with or without a label).

‍

‍

We generally don’t recommend using tooltip descriptions and links, unless you have a specific reason to do so. It’s likely that they’ll provide your participants with more information than they would normally have when navigating your website, which may in turn influence your results by leading participants to a particular solution.

‍

Legitimate reasons that you may want to use descriptions and links include situations where it’s not possible or practical to translate complex or technical labels (for example, medical, financial, legal or scientific terms) into plain language, or if you’re using a card sort to understand your participants’ preferences or priorities.

‍

If you do decide to include descriptions in your sort, it’s important that you follow the same guidelines that you would otherwise follow for writing card labels. They should be easy for your participants to understand and you should avoid obvious patterns, for example repeating words and phrases, or including details that refer to the current structure of the website.

‍

A quick survey of how card descriptions are used in OptimalSort

‍

I was curious to find out how often people were including descriptions in their card sorts, so I asked our development team to look into this data. It turns out that around 15% of cards created in OptimalSort have at least some text entered in the description field. In order to dig into the data a bit further, both Ania and I reviewed a random sample of recent sorts and noted how descriptions were being used in each case.

‍

We found that out of the descriptions that we reviewed, 40% (6% of the total cards) had text that should not have impacted the sort results. Most often, these cards simply had the card label repeated in the description (to be honest, we’re not entirely sure why so many descriptions are being used this way! But it’s now in our roadmap to stop this from happening — stay tuned!). Approximately 20% (3% of the total cards) used descriptions to add context without obviously leading participants, however another 40% of cards have descriptions that may well lead to biased results. On occasion, this included linking to the current content or using what we assumed to be the current top level heading within the description.

‍

Use of card descriptions

‍

‍Create pie charts

‍

Testing the effect of card descriptions on sort results

‍

So, how much influence could potentially leading card descriptions have on the results of a card sort? I decided to put it to the test by running a series of card sorts to compare the effect of different descriptions. As I also wanted to test the effect of linking card descriptions to existing content, I had to base the sort on a live website. In addition, I wanted to make sure that the card labels and descriptions were easily comprehensible by a general audience, but not so familiar that participants were highly likely to sort the cards in a similar manner.

‍

I selected the government immigration website New Zealand Now as my test case. This site, which provides information for prospective and new immigrants to New Zealand, fit the above criteria and was likely unfamiliar to potential participants.

‍

‍

‍

Navigating the New Zealand Now website

‍

When I reviewed the New Zealand Now site, I found that the top level navigation labels were clear and easy to understand for me personally. Of course, this is especially important when much of your target audience is likely to be non-native English speaking! On the whole, the second level headings were also well-labeled, which meant that they should translate to cards that participants were able to group relatively easily.

‍

There were, however, a few headings such as “High quality” and “Life experiences”, both found under “Study in New Zealand”, which become less clear when removed from the context of their current location in the site structure. These headings would be particularly useful to include in the test sorts, as I predicted that participants would be more likely to rely on card descriptions in the cases where the card label was ambiguous.

‍

‍

I selected 30 headings to use as card labels from under the sections “Choose New Zealand”, “Move to New Zealand”, “Live in New Zealand”, “Work in New Zealand” and “Study in New Zealand” and tweaked the language slightly, so that the labels were more generic.

‍

‍

‍

I then created four separate sorts in OptimalSort:Round 1: No description: Each card showed a heading only — this functioned as the control sort

‍

‍

Round 2: Site section in description: Each card showed a heading with the site section in the description

‍

Round 3: Short description: Each card showed a heading with a short description — these were taken from the New Zealand Now topic landing pages

‍

Round 4:Link in description: Each card showed a heading with a link to the current content page on the New Zealand Now website

‍

For each sort, I recruited 30 participants. Each participant could only take part in one of the sorts.

‍

What the results showed

‍

An interesting initial finding was that when we queried the participants following the sort, only around 40% said they noticed the tooltip descriptions and even fewer participants stated that they had used them as an aid to help complete the sort.

‍

Participant recognition of descriptions

‍

‍Create bar charts

‍

Of course, what people say they do does not always reflect what they do in practice! To measure the effect that different descriptions had on the results of this sort, I compared how frequently cards were sorted with other cards from their respective site sections across the different rounds.Let’s take a look at the “Study in New Zealand” section that was mentioned above. Out of the five cards in this section,”Where & what to study”, “Everyday student life” and “After you graduate” were sorted pretty consistently, regardless of whether a description was provided or not. The following charts show the average frequency with which each card was sorted with other cards from this section. For example in the control round, “Where & what to study” was sorted with “After you graduate” 76% of the time and with “Everyday day student life” 70% of the time, but was sorted with “Life experiences” or “High quality” each only 10% of the time. This meant that the average sort frequency for this card was 42%.

‍

Untitled chartCreate bar charts

‍

On the other hand, the cards “High quality” and “Life experiences” were sorted much less frequently with other cards in this section, with the exception of the second sort, which included the site section in the description.These results suggest that including the existing site section in the card description did influence how participants sorted these cards — confirming our prediction! Interestingly, this round had the fewest number of participants who stated that they used the descriptions to help them complete the sort (only 10%, compared to 40% in round 3 and 20% in round 4).Also of note is that adding a link to the existing content did not seem to increase the likelihood that cards were sorted more frequently with other cards from the same section. Reasons for this could include that participants did not want to navigate to another website (due to time-consciousness in completing the task, or concern that they’d lose their place in the sort) or simply that it can be difficult to open a link from the tooltip pop-up.

‍

What we can take away from these results

‍

This quick investigation into the impact of descriptions illustrates some of the intricacies around using additional context in your card sorts, and why this should always be done with careful consideration. It’s interesting that we correctly predicted some of these results, but that in this case, other uses of the description had little effect at all. And the results serve as a good reminder that participants can often be influenced by factors that they don’t even recognise themselves!If you do decide to use card descriptions in your cards sorts, here are some guidelines that we recommend you follow:

• Avoid repeating words and phrases, participants may sort cards by pattern-matching rather than based on the actual content
• Avoid alluding to a predetermined structure, such as including references to the current site structure
• If it’s important that participants use the descriptions to complete the sort, you should mention this in your task instructions. It may also be worth asking them a post-survey question to validate if they used them or not

‍

We’d love to hear your thoughts on how we tested the effects of card descriptions and the results that we got. Would you have done anything differently?Have you ever completed a card sort only to realize later that you’d inadvertently biased your results? Or have you used descriptions in your card sorts to meet a genuine need? Do you think there’s a case to make descriptions more obvious than just a tooltip, so that when they are used legitimately, most participants don’t miss this information?

‍

Let us know by leaving a comment!

Wireframes. Mockups. HTML. Fonts. Elements. Users. If you’re familiar with user interface design, these terms will be your bread and butter.An integral part of any website or application, user interface design is also arguably one of the most important. This is because your design is what your users see and interact with. If your site or app functions poorly and looks terrible, that’s what your users are going to remember.

‍

But isn’t UX design and UI design the same thing? Or is there just an extremely blurred line between the two? What’s involved with UI design and, more importantly, what makes good design?

‍

What is UI design exactly?

‍

If you’re wondering how to test UI on your website, it’s a good idea to first learn some of the differences between UX and UI design. Although UI design and UX design look similar when written down, they’re actually two totally separate things. However, they should most definitely complement each other.

‍

UX design, according to Nielsen Norman Group, “encompasses all aspects of the end-user's interaction with the company, its services, and its products.” Meanwhile, UI design focuses more on a user’s interaction, the overall design, look and feel of a system. The two still sound similar, right?For those of you still trying to wrap your ahead around the difference, Nielsen Norman Group has a great analogy up on its site that helps to explain it:

‍

"As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.”

‍

This just goes to show the complementary relationship between the two and why it’s so important.User interface was popularized in the early 1970s, partly thanks to Fuji Xerox’s ‘Xerox Alto Workstation’ — an early personal computer dubbed “the origin of the PC”. This machine used various icons, multi windows, a mouse, and e-mail, which meant that some sort of design and design principles were needed to create consistency for the future. It was here that human-centred UI was born. UI design also covers graphical user interface design (GUI design). A GUI is the software or interface that works as the medium between a user and the computer.

‍

It uses a number of graphical elements, such as screen cursors, menus, and icons so that users can easily navigate a system. This is also something that has stemmed from Fuji Xerox back in the late 1970s and early 1980s.Since then, UI has developed quickly and so has its design principles. When the Xerox Alto Workstation was first born, Fuji Xerox came up with eight of its own design principles. These were:

• Metaphorically digitize the desk environment
• Operating on display instead of entering on keyboard
• What you see is what you get
• Universal but fewer commands
• Same operation for the same job at different places
• Operating computers as easily as possible
• No need to transfer to different jobs
• System customized as desired by users

‍

Over time, these principles have evolved and now you’ll likely find many more added to this list. Here are just a few of the most important ones identified in “Characteristics of graphical and web user interfaces” by Wilbert Galitz.

‍

UI design principles:

‍

Principle #1: Clarity

‍

Usability.gov says that the “best interfaces are almost invisible to the user”.Everything in the system, from visual elements, functions, and text, needs to be clear and simple. This includes layout as well as the words used — stay away from jargon and complex terms or analogies that users won’t understand.Aesthetic appeal also fits into this principle. Ensure colors and graphics are used in a simple manner, and elements are grouped in a way that makes sense.

‍

Principle #2: Consistency

‍

The system should have the same or similar functions, uses and look throughout it for consistency. For example, the same color scheme should be used throughout an app, or the terminology on a website should be consistent throughout. Users should also have an idea of what to expect when they use your system. As an example, picture a retail shopping app. You’d expect that any other retail shopping app out there will have similar basic functions: a place to log in or create an account, account settings, a way to navigate and browse stock, a way to purchase stock at the press of a button. However, this doesn’t mean copying another app or website exactly; there should just be consistency so users know what to expect when they encounter your system.Apple even states an “app should respect its users and avoid forcing them to learn new ways to do things for no other reason than to be different”.

‍

Principle #3: Flexibility and customizability

‍

Is there more than one way people can access your system and its functions? Can people perform tasks in a number of different ways, too?Providing your users with a flexible system means people are more in control of what they’re doing. Galitz mentions this can also be done through allowing system customization.Don’t forget use on other kinds of devices, too. In a time when Google is using mobile-friendliness as a ranking signal, and research from Ericsson shows smartphones accounted for 75% of all mobile phone sales in Q4 2015, you know that being flexible is important.

‍

Examples of good UI design

‍

For a list of some of the best user interface examples, check out last year’s Webby Awards category for Best Interface Design. The 2016 category winner was the Reuters TV Web App, while the People’s Choice winner was AssessYourRisk.org.As an aside, this is the second year that the Webby Awards introduced this category — just goes to show how important it is to have good UI design!While you don’t want your site or application to look exactly the same as these winners, you still want yours to function well and be aesthetically pleasing.

‍

To help you get there, there are a number of UI design tools and UI software available.Here’s a list of some of the many out there:

• UXPin - An online UI design tool that allows you to create wireframes, mockups, and prototypes all on one platform.
• InVision - A prototyping and collaboration tool. More in-depth than Balsamiq, and it allows you to go from mockup to high-fidelity in minutes.
• Balsamiq - A simple mockups tool for wireframing, which allows users to test out ideas in the early stage of interface design.
• Atomic - An interface design tool that allows you to design in your browser and collaborate with others on your projects.

‍

Have you got any favorite UI design examples, or tips for beautiful design? We’d love to see them — comment below and let us know!

‍

Further reading

• “UI, UX: Who does what? A designer’s guide to the tech industry” - An article from Fastcodesign that provides a breakdown of some of the design roles in the tech industry.
• “7 rules for creating gorgeous UI (Part 1)” - A great guide from Erik D. Kennedy for creating good UI design, with some fantastic tips to help you get started.
• “10 usability heuristics for user interface design” - An article from Nielsen Norman Group’s Principal Jakob Nielsen explaining some of the key principles to keep in mind when designing a user interface.