UX for non-designers: 10 easy ways to improve the usability of your website/app | Sofia Michili | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

UX for non-designers: 10 easy ways to improve the usability of your website/app

teacher avatar Sofia Michili, UX l Product Management | Service Design

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (23m)
    • 1. Welcome to the class

      1:34
    • 2. Principle 1 - Visibility of system status

      2:01
    • 3. Principle 2 - Match between the system and the real world

      2:23
    • 4. Principle 3 User control and freedom

      2:11
    • 5. Principle 4 - Consistency and standards

      2:11
    • 6. Principle 5 - Error prevention

      1:48
    • 7. Principle 6 - Recognition rather than recall

      2:08
    • 8. Principle 7 - Flexibility and efficiency of use

      1:30
    • 9. Principle 8 - Aesthetic and minimalist design

      1:02
    • 10. Principle 9 - Error recovery

      2:56
    • 11. Principle 10 - Help and documentation

      1:39
    • 12. Class project

      1:22
    • 13. Conclusion

      0:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

188

Students

--

Projects

About This Class

Do you want to evaluate user interfaces just by looking at them? Are you someone without a design background but still want to create great digital products that are easy to use? This class is going to teach you exactly how you can do this, with an easy and objective way.

We are going to learn 10 must-know UX principles, or guidelines, which you can use as your guide everytime you design user interfaces, or when you want to improve existing ones. These principles are based on studies and work EVERY SINGLE TIME. Anyone can use these principles, even if you are not a designer.

In less that 30 minutes you will be able to learn what makes interfaces good and easy to use, with easy examples, and you will be able to apply your knowledge to improve your own website or app.

Let's get started! :)

List with all usability heuristics: Nielsen Norman Group's 10 usability heuristics

More UX Principles with examples: https://lawsofux.com/ 

Topics related to this class:

  • User Experience
  • Heuristic Evaluation
  • Interface Design
  • Interaction Design
  • Usability Testing
  • Information Architecture
  • Expert Reviews

Meet Your Teacher

Teacher Profile Image

Sofia Michili

UX l Product Management | Service Design

Teacher

My vision is to improve people's lives through technology and my passion is to create digital experiences that customers love. I'm currently developing my own tech product, aiming to bring more transparency in the use of personal data apps and websites have on users. 


With more that 7 years of experience in tech companies creating tech products, I have gained expertise in UX, CX, Product Management and Agile. I am certified UX professional by the Nielsen Norman Group UX, and have obtained the Interaction Design Certification from UC California, at Coursera. Currently, I am improving the usability and conversion rates of the Proximus webshop using data, UX, CX and agile techniques, which has already lead to a significant increase in the online sales of mobile su... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to the class: do you want to create? Get websites, Or perhaps even if you're not a designer? Do you want to know what makes user interface is good and why websites like Google Airbnb and booking the commerce so successful, Then you're in the right place. Hi, everyone. My name's Sophia Me, Healy and I'm experienced in product management and user experience. Today I will share with you 10 practical tips You can follow toe a violent and improve the visibility of your website or up, even if you're not a designer. These 10 usability tips are not only the user experience community as a 10 visibility heuristics, and they were created by the Nets, a normal group who is the top of 13 usability worldwide. There is a basic heuristics are basically rules of thumb about what makes user interface good and easy to use, and they are based on science about human behavior. The benefit of the usability heuristics is that they are easy to understand and needed to apply by everyone without necessarily having any user experience knowledge. They basically servers a checklist and as an objective to to find and fix usability bugs. These classes open for everyone and it doesn't require any prior knowledge. We're gonna learn everything we need during the class. In less than 30 minutes, you're gonna be able to learn with examples what makes a good or a bad user interface. You're gonna let all the 10 usability heuristics with examples, and you will be able to apply your knowledge in your own website or up the other class project. Are you as excited as I am? Then let's get to it. 2. Principle 1 - Visibility of system status: The first user building design principle we're going to learn today is the visibility of system status. Basically, it says that we need to tell the user what's happening. The system should always tell the use of what's happening, meaning give feedback to the user within a reasonable time. This figure can be persistent or one time, What do we mean by persistent? When we think of a persistent type of feedback, we can think off the battle of a mobile phone. This is a persistent feedback to the user because the user always has access to the status . They can always see the battery levels of their phone from their home pitch. That's why this is called persistent thing. But at one time feedback can be something that has been done after the user did something on the system. In this example, we can see the progress of the file being uploaded. This is already a good feedback, as we see with a through line that the files being uploaded and the text below is mentioned that 01 file has been uploaded. However, this can be further improved if which would show the can't upload speed and how long it would still take toe Abdel the file. So this way, the user knows exactly how much time it will take before the final is uploaded. The visibility autism status is very important because it creates expectations. Management to the users. It's all about creating tasked with the user, because keeping the user up to date makes the system is liable, the user remains in control, and it's not left wonder about what could be happening. The system. This is another example of a feedback to the user. It's a confirmation page that says that the animal has been scheduled, and so scaling the user when this campaign will start. This provides reassurance to get the user as the action that they want to take care off. Husband taken care off by this confirmation message, we can also see the visibility of system. State is in real life non digital examples, such as an elevator. Some elevators, such as this one, will solve their status on if they're going up or down and in which floor they currently are. This way, the user of the elevator can decide on their own if they want to wait or take the stairs 3. Principle 2 - Match between the system and the real world: The second usability principle is a principle of much between the system. In the real world, we need to use human language and follow real world conventions. The first example that comes to mind when I think of human language and computers is this one. All of us have been carded at least one of the several messages written by a developer and has some technical jargon in the text. But who would be able to tell, What's the problem here? Probably only a developer. A common pitfall in many websites or software programs is that they assume that because the person creating is an expert, users will also understand the program. We should never take such assumptions as we don't know who comes to our website and what their background. This. When writing for the digital world, always arrive in simple human language and avoid using jargon terms. If you really need to use a jar content, try to explain it in a glossary or replace it with a better alternative. The general rule of thumb is that your title should be understood by five year olds and your key points by eight year olds. If you want your message to be understood. The longer your sentences are and the more words you use, the more the difficulty of the tax rises and people will have trouble to understand your message. I've added some links to websites that can help you with selecting better words instead of jargon and calculate the reading level of your text. In the first thing, you'll find guidelines on how to write jargon free. It will also show you some examples of how typically jargon is used and what are some better ways to deal with jargon and use better words Instead? The second link provides examples of jargon, alternatives and simplified words that help increase in the build of your text. In the last link, you will be able to other texts and calculate the reading level of your text. There are also additionally excited about how to calculate the readability level, which will definitely help you improve the readability of your side. This all our great food resources to improve the copyrighting on your side. The second aspect of the march between the system of the real world principle is to use real life conventions. Let's look at an example to understand this better? Can you notice the similarities between these two? Turning a page in digital books has been designed to much how we effectively do it in real life by turning the benches from the right to the left. And that's why it's also working successfully. For most people, this is a great example of a real life convention applied on the digital interface. 4. Principle 3 User control and freedom: another really important principle when designing user interfaces is the principle of user control and freedom. We need to always allow the use of change her mind or to change direction. When people use user interfaces, they might click somewhere by mistake. Or they might click on a wanted action so they always need an emergency exit. We need to allow for and do we do council and closing off. This is unnecessary actions that appear to the user. The navigation should also allow the user to take a new path, and ideally, that should be if at any point where the user is on the website. Last but not least, is so, so very important Mobile, where it's more difficult for users to go back to the previous action. Allowing users to go backwards and forwards gives them a sense of freedom. And they're not afraid to click on different sections of the website as they know that they can recover the jersey mind. Now let's take a look at some examples of user control and freedom. In this example, we see a pop up where the user has the option to upload the picture, go to the gallery will close the pop up The emergency exit here is a close battle which allows the user to close the pop up and not take any further action. In the example of a typical browser. We can also see the backwards and forwards buttons which allow an emergency exit to the user in the case of the by accident link to a website that they didn't want to go in this pop up. We also have a confirmation message before the user takes a critical action such as the living an album in this example, the users able to cancel the action or delete so he always has a way out. Last but not least in on boarding flows, it's also really important to take care off this kind off behavior. This is because a lot off his own boarding flows have a lot of steps, and some of those don't allow the user to escape, which can become really annoying for users that want to try the product themselves First. In this example, we see the example of revolution, the banking up, which allows the user toe at each step of the journey, continue the tutorial or skip so this way, the user has a sense of control and does not necessarily need to waste time by going through the whole tutorial. 5. Principle 4 - Consistency and standards: the fourth usability principle is a principle. Of course, insists Ian Standards. We need to follow standard conventions. The background, basically for this principle is the fact that users spend a lot of time on other sides and learned how to use websites based from these conventions. For example, Web sites like eBay and Amazon shape how customers buy things online, and this has an influence on ivory commerce sides. We need to follow common patterns, used widely known terms and have a consistent use of wording across our site. Let's take an example. Think of the example of shopping baskets When you're shopping online, you expect on the left side and shopping basket page with the price and quantity of the product possibility. Delete the item up, did the quantity or put it in the wish list in the right side. Most of the time, you will find the summary of the order cost shipping fees and about in to check out. You have probably noticed that most e commerce sites fall of his design pattern, and this is definitely not by accident. Customers have led to expect this kind of information when shopping online by Amazon, another big e commerce giants. If you create a shopping basket case, it is completely different. Users will start to wonder why this is the case, and they will spend considered amounts of effort to find information that they need to verify the order. That's why it's so important to be consistent and to follow widely used standards. Another example of a common convention is the Collins. When searching for dates, for example, for flights or hotels, most websites now use a calendar picture where you can choose the departure and return date . It is highly recommended. Therefore, when designing for date feels to use such conventions to keep up with the user expectations for this features. Let's now take a look at an example of a consistent warding. Notice how, when we go deeper in the levels of the products, the label, kitchen, dining and bar remains consistent all along. Even when we expand them a new to see more options. The label shop all still includes the same name as a title, kitchen, dining and bar. They didn't try to be trendy by changing their label to, for example, Chappelle supplies, but they kept the consistency all along, which makes it easier for the user to not get lost in the site. 6. Principle 5 - Error prevention: the fix usability principle is the principle of error prevention we should avoid to let errors happen. The principle behind their prevention is that we should prevent devils from happening in the first place wherever possible, rather than explaining why they happened. Examine how you can do this by grain out actions when they cannot happen yet and using appropriate for months for each beat that the user needs to enter information. Also, by choosing good default, you help the user make a choice and reduce the mental effort. You can find a full list with guidelines from Google in this link on how to design forms to prevent errors. Let's take a look at some more examples. In this example, we need to enter a date in Mobile instead of letting the user type the date manually in a small screen where they would need to type numbers and hyphens. The moment to user tops in the feet will let because you select the date with a date picker functionality such as this one. This prevents typing errors and avoids frustration when governments disappear, especially when there are a lot of fields to feeling. This is an example often appropriate former. Let's not take a look at an example of smart defaults. In this example. We have a task. The stool and the user has added the task and wants to change the date for this task instead of just letting the users select the date from the calendar, which they also do. They also proposed some smart default, such as postponing to tomorrow next week or suggest that day by the system based on how many tasks you have under task ist Another great example of smart four month thing is a calendar of booking dot com. If we select a date for check out, which is before the date of the checking, the calendar will automatically correct this by changing the checking date to the last date we entered. This prevents an error message from appearing. It saves effort to the user. 7. Principle 6 - Recognition rather than recall: the sixties. A build the principle is a principle of recognition. Government record. What does this concrete in me? Users should not have to learn or remember where things on our website, but they should be able to recognize them easily. We need to be able to use metaphors and visual clues, bake objects and actions visible and suggested related items. And the most important thing is that the important item should be prominent on the page. Let's take a look at some examples to understand this concretely, This is an example of a very clear call to action battle. It's clear that the focus of this page is to let users register and get started for free. There are also secondary actions on this page, which are the log in and watching the video, which are also said to identify but not as prominent as the main call to action, which is even repeated twice and uses exactly the same format and wording get started for free. In this example of Airbnb, we also see the text What can we help you find, which actually souls, clearly the aim of the page and what we can do in the spate we conceptual states, experiences and adventures. There's also suggest deduction to continue my previous searches so that I can easily remember what I look for last times that I looked in in the example off Cora, which is a site where people ask questions and get answers instead of letting the user go through all kinds of options and categories possible. When they type a question, we suggest them some related questions to the topic that the user wants to know about. This makes it easy for the user to start using the site and access the content directly. Comparison. Now there's two ways to scroll up the page. Which way do you think is easier to recognize for a user? They go to top with an icon autumn winds because the arrow gives a visual cue to the user off what's going to happen and users much more likely to recognize this bottom rather than the simple back to top label battle without the arrow. This is because humans are visual beings, so we work much better with icons and text than only with just text 8. Principle 7 - Flexibility and efficiency of use: the seventh usability principle is a principle of flexibility and efficiency of use. We need to allow for shortcuts for frequent e done actions we need to offer functionalities for both basic and advanced users. Toe allow routine tasks to be done faster. This concretely means for that. We need to add keyboard shortcuts, advanced settings and also templates that allow the users to use the so for more efficiently and faster. If you're an INSTAGRAM fund, you might know that you can quickly like a photo by tapping twice on it. This is a clear example off how instagram gators, too frequent users needs by offering the shortcut. Another example is Google images. Google images offers advanced functionalities for users that might need to do advanced types of searches orphans by clicking on the tools bottom. Some additional functions are offered to filter on the color. The copyrighting writes the type of the file as well as the time that the file was created . These functions are normally not visible when we search for Google images, but they're there in the background for advanced users. Another example, which is in more elaborate example of his flexibility and efficiency of use is a dog before to soup. For those up offers templates for common designs where the users can work on a standardized way for each one of their designs instead of starting from scratch. It's also possible to create your own, then play the way you want to cater to your own specific needs. 9. Principle 8 - Aesthetic and minimalist design: the eighth usability principle is a principle of a static and minimalistic design. We need to show only what's needed. A good rule of thumb to remember is that the more clattered societies, the more risk you have that users will live directly without reaching it. Users don't want to put their for to search information, as within a few clicks. They could easily find a competitor product, which is more simplistic and easy to use. So we really need to stick to the point and don't show it relevant or too much information . We need to make sure that we reduce clatter, allow for white space. And we didn't need to examine each element of our side and ask ourselves is this is useful ? And it adds additional value to the customer. The best example off the set chickens and minimalistic design is Google. The search bar of Google does what it's mostly meant for. Let the user's search. There's no unnecessary clatter in the page with articles or music, the day or the weather. And that's why so many people appreciate and prefer to use Google much more than other search engines 10. Principle 9 - Error recovery: the ninth years Ability. Principle is a principle of error recovery. We need to explain the problem when never happens and provide the solution. When a letter occurs, we need to explain why it happened and what the user can do to continue. First of all, we need to apologize and never blame the user. Even if its used the users fault, we should never take something. Secondly, went to explain the error. And last but not least, we need to tell the user how to make it right. Do you have every messages like this on your side? This is an example of a really, really bad error message. It doesn't explain what happened. I'm sure not even a developer can tell what happened here. It does not apologize, and it doesn't then the user how to what to do to make it right. What will happen if I blake or if I continue? It's totally unclear to me as a user. Let's take a look at some better examples in this example. We have ever note the note taking to we have a finger really happening error where the user tries to create a password, but it doesn't fulfill the password criteria. This is a very frequently happening at our in all of the websites, this error messages already explaining about how the password should look like. But it still felt given example off how successful passport blue plaques because the visual example would be much easier for the user to understand. Even better, they could inform the user about how many password carded a have been filled in the moment that they're tapping the password. This way they would give real time feedback, which would be much more helpful for the user. Compare also, in this example, how the first ever missed doesn't help the user fix the error as it doesn't explain why the specified date is incorrect. The second example on the right side is better as it tells the user that the date is in the past. If you want to take it one step further, we should not even allow the user to select the dates in the past and great those out in the calendar picking in this example, we have the website of Airbnb and we have the typical error message of for 404 error code, which is basically appearing when page cannot be found. What they do here is they make their message a bit funny by having the girl with the ice cream on the floor. And they also provide some helpful links so that the user can continue in the next action and not abound on the website. Last but not least, we have a really good example of how Eric Ovary has been applied very well, which is a typical technical error of the message hero. The recovery principles are present. First of all, the are apologizing. They're saying we're sorry something has gone wrong in our then they are explaining what the problem is. They're saying we're currently experiencing technical difficulties and they explain what the user can do next to recover from the error. So basically, they say, please reload disputes to resolve. And if the problem persists, please contact support. There's even a bottom there to reload the page so the user can continue. So this is a complete example of a recovery 11. Principle 10 - Help and documentation: the last visibility principle is a principle of help and documentation. We need to foresee answers to the users questions, Although we should always aim to have a manual free system, we sent indicator for in unexpected questions. We need to make sure that the information is easy to find and searched through. The information also needs to be structured in a way that is easy to follow and links to the user tasks. And it should also be short and easy to follow with steps. I deal with screenshots and video. Let's take the example of Holzer's support guide. The support section is great, and you can clearly see that they have put a lot of work on it. There's a big search function. Popular guys are listed first because these are probably the most frequently asked questions. And then the topics are split by category. And if you notice, they also focus on the user's tasks, for example, in stolen culture, analyzing user behavior and collecting feedback from users. In the next example, we have an example of a price estimate for shipping a package here. The system foresees that the users will wonder about how the prices calculated. So they have put a halt next to the price where the user can hoover over with the mouse and see how this is calculated. This information is transparent and easy to find as just next to a place where you needed the estimated price. It's also very important to provide help and documentation when a user starts using a system, and this is what we call on boarding process. Do Lingo is a great example of a no boarding process as they explained the key aspects of their up. When the user installs it this way, the user already knows what they can do in the up instead of starting and not knowing where to go. 12. Class project: Now it's your turn. Now that you have land all the 10 usability principles, apply this knowledge to perform a few extra view of your website or up and share at least one of your findings with us in the class discussion. If you want to take it one step further and do a complete review of your side, I've prepared for you a template for an expert review in the Class three sources, which you can use to categorize and organize your findings. In this template, you will say five columns, which are named Observation Bates or you are l. Heuristic violated severity in priority, either observation calm. You cannot. The explanation of the issue, the pager, you ourselves as a indication of where the problem finds itself and the heuristic violated mentions which one of the 10 usability principles is the one violated here. Keep in mind that there could be multiple principles that are being violated. It's better to separate those problems into lives that refer to only one usability heuristic at the time. In the severity column, you can indicate how much of a problem is this for the user and the priority. The indication off When do you want to talk to this problem? This is a file that you can easily share with your team. So I encourage you to download it and share it with your colleagues. If you don't have your own website or app you're currently working on, you can also just review any other website to practice your knowledge. I'm excited to see with what? You will come up. Good luck. 13. Conclusion: congratulations. You completed the class. By now, you will have a very good understanding of what makes a good or a bad user interface, and you will be able to apply this practical skills for your own project. Don't forget to share with us in the class project the evaluation that you did on your own site or another website and ask your questions in discussion Forum so that we can help you out and get you have any questions? If you like this class following your scarcer to get updated every time I post a new class and you can also check out my other classes on user experience in project management, which will definitely help you out to further hone your usability skills. Thank you and see you next time.