If you are a junior in UX:

I have previously introduced 5 best books for junior designers and if you are a junior designer, it’s important to read them first and then come back to read this Medium post.

How to be a Senior UX Designer

If you have been a UX Designer for a few years, you have probably read some books and articles about UX, UI, and related concepts. To become a professional in this field, you must “master the foundation of design”. Knowing web and mobile UI standards or Figma tools is not enough. As a Senior Designer, you must consider how humans interact with technology by studying typical users, the context of uses, interaction techniques and resulting emotions, and UX assessment metrics. That’s why you should read about the foundations!

Books to boost you up

1. Human-Computer Interaction by Alan Dix
   HCI is a foundation for UX Design, and you should master it. It’s a multidisciplinary field of study that deals with the design, cognitive psychology, fine arts, evaluation, and implementation of user-friendly interfaces between humans and computers, and it aims to make the interaction efficient, stable, usable, and attainable.
2. The Design of Everyday Things By Don Norman
   You know Don Norman, Right? The principal designer of Apple© who coined the term “User Experience” in 1993. This book is a must-read for senior designers. In this book, Norman talks about the foundations of design for humans.
3. The Innovator’s Dilemma by Clayton Christensen
   Harvard professor Clayton Christensen Focuses on “disruptive technology” and shows why most companies miss “the next great wave.” This book presents a set of rules for capitalizing on disruptive innovation.
4. Lighting the Road Ahead, The Guide to Usability and Accessibility by William Hudson
   Usability is a major issue in designing digital products. In this book, William Hudson, a usability expert and lecturer at NNGroup and Interaction Design Foundation, discusses how to make usable products that people can understand and use.

The Dream of Norman’s Design Class

I have always dreamed of being a student of these professors in the UX Design field, but I didn’t have the chance. Imagine learning UX from Don Norman, the Godfather of UX Design, or Alan Dix, the writer of the Book “Human-Computer Interaction.” Well, now you have this opportunity. How?

FYI:
Don Norman is a professor at Northwestern University.
Alan Dix is a professor at Swansea University.
Clayton Christensen is a professor at Harvard University.
William Hudsin is an associate lecturer in The Open University.

Interaction Design Foundation’s courses

The Interaction Design Foundation(IxDF) is where You can learn UX Design principles at an amazing price from top-tier professors like Don Norman, Alan Dix, William Hudson, etc. You can register for $22 (Canadian Dollar) per month and have access to all of these courses (40 professional courses that take 2 months to complete each, and you can take as many courses as you want at the same time)!

Interaction Design Foundation is not just another Coursera!

When it comes to learning UX through Video courses, you may think of Coursera, Udemy, Linkedin Learning, and other online schools. But IxDF is nothing like the others.

I have been a member of IxDF for 6 years, and it has helped me get updated on cutting-edge knowledge and UX trends in this journey. My favorite courses in IxDF are:

• Accessibility and Inclusive Design
• 21st Century Design By Don Norman
• Interaction Design for Usability By William Hudson
• User Research — Methods and Best Practices
• Service Design; Integrated Service Experience

You can see my certificates in my IxDF profile:

Why IxDF is the best place to learn User Experience:

1. IxDF is focused on UX (While the others are selling courses from knitting to C++ programming)
2. You can use a library of books and articles without registration from world-class writers.
3. IxDF gives you a specific roadmap (based on your desired job title), which helps you choose the right courses to save time and gain the skills you need for career enhancement.
4. Courses in IxDF are a mixture of Text, Images, and Video, which help you learn the materials and contain two types of questions: multiple-choice and open-ended. Multiple-choice questions are graded instantly, while open-ended questions are answered in full sentences. Your answer will be graded by your instructor. (Yes, A human checks your answers)
5. You can get the Course Certificate as soon as you score at least 70% of the course points and add them to your LinkedIn profile. (You can see my certificates in my IxDF profile)
6. There is a community for each city on the website which connects UX designers. You can join communities, participate in in-person meetings, and make new friends to grow your professional network. (e.g. Vancouver community)
7. You can see a list of other benefits of IxDF courses here.

Get 3 Months free!

If you are planning to join the IxDF community and learn UX at a professional level, Use My invitation link to sign up. It gives you 3 months of free membership. I’d love to connect on Linkedin with UXers. Come and say Hi!

These books are also quite practical and do not confuse you with the fundamental principles of design. Rather, they teach you the rules you need to design interfaces and get to know usability and accessibility.

The Elements of User Experience

By reading “The Elements of User Experience”, you’ll gain a comprehensive understanding of the UX design process, from initial idea to final execution. You will learn how to analyze and define user needs, organize information effectively, and define the overall structure of visual interfaces.

100 Things every designer needs to know

The book “100 Things Every Designer Needs to Know About People” covers a variety of topics, including user research, interaction design, information architecture, visual design, and usability testing, and emphasizes the importance of understanding user needs, involving users during the design process, and creating enjoyable visual experiences. The book is concise and useful and gives you an overview of the principles of experience design.

Don’t Make me Think

One of the topics that you as a user experience designer should learn is the principles of usability (mostly in the web and mobile environment) and “Don’t make me think” is a practical guide in this field that introduces you to the concept of usability with many practical examples.

Designing User Interfaces

“Designing User Interfaces” is for those who want to know everything about web and mobile UI components. As a UI designer, you must be able to design attractive user interfaces with tools like Figma and to achieve this, you must know the standards and principles of user interface design. This 400-page book introduces you to these principles using simple images and texts. It is one of the most comprehensive books in this field and is very useful for novice designers.

Inclusive Design for a digital World

If you are designing a user interface, you must know the principles of accessibility for digital products so that your design meets the standards and the final product is usable for users with any disabilities. “Inclusive Design for a Digital World” introduces you to the basic principles of accessibility.

In the next post, I will introduce some books for senior UX Designers.

In designing a new product, I needed a scoring system. Users should vote for a series of parameters, and the first thing that comes to mind is the legacy 5-star rating system. But in recent years this rating system has shown that it’s not optimized and/or efficient.

To break the design rules, you must first master them.

To find an alternative system, first, we must understand the 5-star system so that we can pull out its weaknesses and understand what problems it makes in the user experience, which made me put it aside.

Stars do not convey the accurate meaning of how good or bad something is (from the point of view of different users)

Cons of the 5-star rating system:

• The main issue is that stars do not transmit the accurate meaning (from the point of view of different users) of how good or bad something is. In my initial research, I realized that a 3-star rate means “appropriate” for some users and “weak” for some others! This means that the data we collect from the rating system will not be accurate and reliable.
• Another Issue: Is it worse to give something 1 star or no star at all? Should no-star be considered the same as zero? If we want to calculate the average user rating for a product, do we have to calculate that zero? Or should we consider it equal to 3 (as average)? Or not to consider it at all?
• Next issue: while looking for high-rated movies on IMDB (which has a scoring system of 1 to 10) Good comedy movies usually have a score of 6 (which is equal to 3 stars in a 5-star system) whilst good horror movies usually have a score of 8! This means that users subconsciously give comedies fewer points (they attribute a sense of ridicule to the movie and devalue it in their minds), thus we have very few comedy movies with 8 stars. Whilst comedy movies are selling nicely, Even better than horror movies.

Netflix experience in designing a scoring system

1. Research shows that when users rate a movie a high score, it does not necessarily mean that they like that movie! Designers of Netflix found out that users rate documentaries higher, but when they return to the site, they are looking for movies that they have rated less! And so Netflix algorithms could not offer users the movies they really like based on their ratings. To improve the rating system, Netflix and YouTube decided to replace the 5-star system with the Like and Dislike buttons which resulted in more accurate rates.
2. Netflix recently announced that the ranks you see at the top of each movie is not necessarily the average rating given by users. But, it is a number that we think you will give to this movie based on our data mining algorithms, your interests, and your taste! (So if you have always given a high rating to comedy movies, we will show you a higher ranking on comedy movies!)
3. Research on comments on Amazon has shown that most comments fall into two categories: either they fell in love with the product and praised it, or they hated it badly and said bad things. There are just a few moderate comments that have criticized the product fairly.
4. Cognitive science can explain this better, but the bottom line is that people only react in extreme cases (not in normal situations)

Alternative rating systems

“Given all this and the ambiguity of the 5-star system, we decided to find a more accurate rating system, and here are the advantages and disadvantages of each rating system:

The first alternative is to keep the same 5 rating levels and replace the stars with emoticons. Option 1 now means “very bad”. While in the previous picture, which had 5 hearts, it was not possible to take one heart as “very bad”. Because the heart or the star has no negative meaning at all.

The second alternative: the thumbs, more commonly known as likes and dislikes, are easier for users to measure. Because:

1. Like / dislike makes it easy for the user to judge. Because it has only two modes. Those are two extreme modes. That is, either the top line or the bottom line! (Compared to the 5-star modes that examine a larger domain)
2. Dislike clearly indicates that we have missed something. Netflix says the two-button option in the two-button system had a huge advantage for us: Now we can figure out what the user really hates so we never have to show it again in the timeline. (5-Star system had no dislike. Even if someone gives something 1 star, you can not tell if the user dislikes it.
3. Research has shown that the thumbs, encourage users to vote and increase user engagement with the service (in comparison to the 5-star system). If you want more engagement, you have to make voting easier. Like Twitter and Instagram, which have only one state instead of two.

Request accuracy from users = less engagement

Sometimes, we do not need so much detail, and when we ask users to be more accurate, they just leave the application.

Don Norman (The UX founder of Apple in the 90s) discusses in his book, The Designing of Everyday Things, that it is 55° Fahrenheit here. And I’m used to the Celsius system. So what is it in Celsius? This is the exact formula for converting Fahrenheit to Celsius:

C = (F-32) × 5 ÷ 9

It’s hard to memorize and calculate this formula and I will never remember it! But there is a semi-accurate formula that you can easily memorize and use:

C = (F-30) ÷ 2

The answer to the first equation is 12.8 and the second answer, which is less accurate, is 12.5. For me (Norman) an inaccurate answer is enough and it leads me to the result. Because I just wanted to see if it was cold to wear a sweater or not!

Result:

The kind of result we need determines how accurately we should get the numbers from users.

Final Design

This is the final rating component I designed for the product which shows how users agree or disagree with something.

Sometimes we do not need “2 thumbs down” button (which means totally disagree) and we can remove it. But we need to know if users “like” or “love” something, So I included two thumbs up button and one thumbs down button and also an indication for when users were undecided about the vote topic.

References:

1. businessinsider.com: why Netflix replaced its 5-star rating system
2. HBR : Online Reviews Are Biased. Here’s How to Fix Them
3. HBR : Designing better online review system
4. HBR : the problems with 5-star rating systems and how to fix

URL design principles in web apps:

1. Your URLs shouldn’t be case-sensitive, except for temporary pages that the user is not going to visit later. (The output of some hash generators is case sensitive, which is better if not used as a unique ID in our web application’s permanent URLs.)
2. When generating a unique ID in an application, remember to use the shortest combination of characters, so that your URL won’t be long. (The Nelson-Norman website says that the total URL size should be less than 80 characters). The combination of 7 characters consisting of numbers and English letters (which are 38 characters in total) can generate 78 billion unique ID. Isn’t that enough for you?
3. Content pages (like blog posts) must be Stateless, and by sending the page address to others, the exact same page must be shown with the same content. So, using iFrame or Ajax to load content on these pages is forbidden!
4. Broken links mean losing the user; So you have to keep your links alive forever. Even if you change the content management system of the site and your links change, you can technically forward the old URLs to the new ones, so that the users who have bookmarked the link will not be disappointed.
5. A good URL should be predictable. For example, for contact or support, just one word after the domain name is enough. (Try to have your URLs without page extensions, for example, .html or .php extensions. These are better for users and have a higher score for Google SEO)
6. Try to create URLs like the way they appear in your Sitemap. For example: we have “Music> America> JLo> Song34“ on the Sitemap. And in the address, “music/America/JLo/34” can be a good choice, and if the user deletes, for example, 34 from the end of the address and presses Enter, take him to the Jlo songs page…, and if he also deletes Jlo, take him to the America music page.
7. The slash at the end of the URL should be optional, and if the user uses it or not, it should reach a page with a canonical URL. (You have to control this with code)
8. Search page URL design: When a user searches for something, put the search word in the URL as a query string. If he sends the search link to his friend, his friend can see exactly the same content and results. So using the Post method in search pages is a very bad idea. Except in WebApp searches where the user may not see the URL at all (in mobile apps) or it may be an in-app search that does not allow links to be sent to others at all.

Specifications of a good domain name:

If you haven’t chosen the domain yet, you can consider some of these rules that can help you choose a better domain:

1. A Good domain is short. The shorter, the better, but no abbreviations.
2. When the user hears it, everyone should be able to guess and write it in a unique way.
3. For your target audience, it doesn’t have a bad meaning. (for example, pinup.com is not a good domain for pinning sticky notes
4. Most users are not yet familiar with long extensions (such as .design and .news), but .com or .net are widely known.
5. Your home page should not be on a subdomain. (Even a well-known site like Delicious, whose address was del.icio.us, switched to the delicious.com domain.

In this post, I will examine the reasons for stories’ popularity from the perspective of user experience. There are strong reasons why a billion stories are seen on Instagram every day!

1. FOMO: fear of missing out!

The sense of loss is in the stories and makes them popular. Humans want everything that is limited. Online shopping websites use this law of psychology to increase sales. For example, you have often seen an advertisement like “40% discount, only until tonight.” This issue multiplies the sales and forces you to buy something that you may not need much.

2. Full screen!

This is very important from the UX point of view. Firstly, it prevents interruptions (such as Notifications), and secondly, the fact that the images are borderless gives the viewer a feeling of realness and closeness.
Example: Mr. McWade, a graphic design professor, suggests removing the borders to make the graphic designs come alive. His example is quite evident in this poster design:

3. It’s temporary; just post it!

The temporary nature of the stories gives people the feeling that they can “sooner” publish the photo or video without obsessing too much about the quality in comparison to the times when They are more careful when publishing posts. This makes the stories even more attractive. And this makes a better user engagement.

4. It is only 15 seconds

The shortness of the stories convinces us that it does not take much time to watch them, and the brain is more easily encouraged to go to them. Thus, the goal of the user experience design has been fulfilled So, the next time a feature like Stories goes viral, it is better to analyze it instead of complaining to find the reasons for its success.

5. Do not rotate your phone!

All the video content produced since the invention of cinema, television, computers, and mobile phones has always been landscape, and users have to rotate their phones (which is painful). But Stories led to the creation of a new standard in video orientation and redefined video content. Now, we have millions of pages that create vertical videos.

Now, YouTube has a new rival: Facebook and Instagram.
Google (specifically YouTube) has been the home of classic horizontal videos, but now Facebook has a world of videos that can compete with YouTube in a new era.

Evolution of UI Design process

1. Once upon a time (2000-2010), when you asked a web developer to design a website for you, he would tell you that the tariff was based on the number of pages of the website. For example, if you want 5 pages, it will cost $500 and $100 for every further page.
2. Since 2010, content management systems have become common, and instead of designing pages, designers began to design CMS themes (which included several pages) and delivered it to you, and every page of the site that wanted to be displayed had to follow one of the page templates.
3. This process does not stop here. These days, we are working on products that will continue to grow, and new sections and features will emerge according to users’ needs. What should we do in this situation? How many pages should we design? How many components? How many combined design wireframes?

Designing a design system

The Atomic Design book recommends that instead of designing pages, we should design the elements that make up pages and calls this approach “Atomic Design”.

The author (Brad Frost) says that as animals are made up of organisms and organisms are made up of molecules and molecules are made up of atoms, we should consider this structure in our design process:

In a web-based environment, atoms make up molecules. Molecules make up organisms. Organisms make up templates which make up pages.

How Does This Structure Work?

1. The simplest HTML elements in this design model are atoms. For example, we can consider TextBox as an atom or Button or Label.
2. A TextBox, jointly with a Button and a Label, forms a molecule. The Search molecule (call it component).
3. Now, if we combine several molecules (for example, the MenuBar, Logo, and SearchBox molecules), we will reach the Header organism.
4. By putting together multiple organisms, Such as the header, news box, and footer, we will have a template for a web page.

The same process can be considered in a mobile app. For example, for the Instagram app, these five steps can be separated as follows:

Atomic Design System Building Tools:

The book has introduced a basic tool that helps us in atomic design;  patternlab.io  is a design system to create all the atoms of a design ( demo of this product ) which also helps you in documenting the design steps. This product uses the mustache formatting language , which provides the possibility of including code sections in HTML pages. Read the description of using each of these tools by clicking on their links.

< div class = " block-post " > 
  < a href = " {{ url }} " >
      {{ > atoms-thumb }} 
      < h3 > {{ headline }} </ h3 >
      < p > {{ excerpt }} </ p > 
  </ a > 
</ div >

This tool has the possibility of using dynamic data in json format and is a good tool for creating and displaying templates. PatternLab also provides the possibility to display the output in the form of responsive mobile and tablet sizes.

What Elements Should Be Designed?

Almost all the elements you see on the screen:

• General elements: header, footer and other general page elements
• Navigation elements: primary navigation, footer navigation, pagination, breadcrumbs, interactive component controls
• Photos: logos, decorative images, avatars, thumbnails, backgrounds
• Icons: social icons, arrows, hamburgers, spinners, favicons
• Forms: text box, dropdown, button, and so on …
• Heading elements: such as H1, H2, …
• Blocks of text, photos, advertisements, etc.
• Lists: ol, ul and their internal elements
• Media: Audio and video playback elements
• External elements include widgets and things not hosted on your host.
• Pop-ups: types of alert, success, failure, tooltip, help
• Element colors (  stylifyme.com  and  cssstats.com tools )

Interaction With Customers

In addition to suggested methods for user interface design, the book suggests methods for interacting with customers. Also, to get to know the customer’s mental model, he suggests using Gut test. The cost of designing a design system is a bit high and your customer may not be interested in receiving a design system. The book presents ways to talk with the client and gain their trust in the need to use a design system that works for you. Among other things, having a design system as a whole leads to the reduction of the team’s future costs during product development and also makes the final product that is developed in different sprints have design coherence.

Interaction With Developers From The Beginning

As you know, the waterfall approach has been outdated in software design for years, and the main reason is the software nature: “a product that grows over time and changes during design, and we cannot correctly guess all the next steps from the beginning to design the plan, hand it over to the development team, and get to work”!

The Atomic Design book suggests that designers must have close collaboration with frontend developers from the very beginning. Because what you design must finally be converted into code by frontend developers.

Therefore, it is vital to create a good relationship with the dev team, as you will be companying them in almost all phases of the product development, less and more. So the waterfall model will evolve into a new adaptive model like this:

The main goal of the book is to familiarize you with this design philosophy, and that’s why it does not go into details and design trends, and most of the discussion is in the field of design management.

Do and Don’ts in Designing Pagination

1. Many times we do not need pagination at all! Especially when the number of records is low or limited. For example, when you want to show the list of children of a family on the civil registration website, you should not paginate the children by 5 or 10, and you should show all records on one page. Because pagination wastes user time and also destroys information coherence.

2. Many users like to see all the records together. This is more important in cases where columns do not sort well ( nngroup site recommendation ). In this case, you should put a “View All” button next to the pagination. (Especially on store sites where users want to compare many parameters of several products Simultaneously)

3. Override the Defaults! The default number of records in many .NET table components is set to 10 records, and many programmers do not change this number. You as the designer should determine the number of records of every table you design:

Sometimes showing up to 100 records is ok. (Depending on the amount of data and the size of the photos of each product / record). So don’t be scared to use the 100 records per page.

4. Distinguish the columns that can be sorted with an icon from the other columns. Also, note that the sort feature is not supposed to be enabled for all columns. (For example, the sorting feature on the description column, which is a series of explanations, calls into question the logic of the table and seems silly)

5. According to Nielsen Norman’s research, using a combo box to determine the number of items on each page is cursing UX. And this research suggests using the same “view all” button instead. But if you have to use it, the number of items should be well-spaced. For example, 10 and 50. No 10 and 20.

6. Using page numbers or the next and previous links?
If jumping to some pages forward gives the user an advantage (for example, in the list of students of a school sorted in alphabetical order), put the numbered links. Otherwise, use the “next page.” This is like the Google results in the mobile version.

7. Another issue is the access to page URLs (second, third, and …) If your web page is publicly available, put the page number in the URL, so that when you send the link of the fourth page to someone, the user enters the exact fourth page. Also consider using the browser back button.

8. Use rel=”next” in the next page’s link tag to Enhance SEO level of the page . This will also help accessibility for blind people using screen readers.

Barrier Design vs Barrier-free Design

Barrier design is about designing barriers in a process or a product.
For example, forcing users to press two keys to unlock the phone! The reason is clear. If the phone could be unlocked by one key, there was a chance to get unlocked in our pocket.

Barrier-free Design approach: Reduces or eliminates barriers to make a process happen faster. For example, Taking photos or Answering calls without having to unlock the phone

Time is an important parameter in urgent processes and can make a process work or fail.

Different conditions, different approaches

The lid of a can of dangerous medicines opens with two simultaneous movements (pushing down and turning at the same time); thus, it is not easily accessible to people, especially children.

But the lid of cans that are used immediately (such as sublingual tablets for myocardial infarction…) should be opened as fast as possible (importance of quick access during a medical accident)

First aid pack’s door is usually designed to open easily. Because we usually need them when we’re in a hurry and don’t want to challenge with the box.

When designing a product, you should think about the conditions your product is usually used in and consider the mental and physical condition of the user at that moment.

Designing Barriers in Urban Environments

I suppose that municipalities created the first barrier designs, using various barriers in the city to orchestrate cars and people in predefined directions or prevent a group of people from entering.

Park entrance

A good example is the curved entrance of parks, which allows pedestrians and wheelchairs to enter but prevents bicycles from entering the park:

Hospital Doors

Hospital doors are usually self-opening (automatic) to make it easier for patients and disabled people to enter:

Bank Doors

The doors of jewelry stores and banks open by pulling inward, making it difficult for robbers to exit. Sometimes, there are two sets of doors in a row.

The design goal defines when to use a barrier or when to remove one. Using them in the wrong way can cause problems for users, so study your users and the product’s workflow to decide whether or not to use them.

Disclaimer: Barriers are not good for every situation. So use them at your own risk

These psychological rules help you to design products that are more engaging, usable and practical for users.

1. Hick’s Law:

By increasing the number of available options, the user’s decision-making time (for example, while choosing a product and making a purchase) increases. ( and this is not good)

2. Fitts’ Law

Users click on larger buttons that are closer than small/distant buttons (so make the call-to-action button more prominent)

3. Jacob’s Law

Users spend most of their time on other sites and prefer your site to have the same functionality as other sites:

4. Pragnanz’s law

Your mind makes the vague pictures that you have seen as simple and comprehensible as possible. It helps the brain to assign a meaning to every object. (This law is a part of Gestalt principles)

5. Law of Similarity

Elements that are more similar in appearance seem related.

6. Law of Proximity

Objects that are placed close to each other seem related.

7. Miller’s Law

A normal person can keep 7 things in their real-time memory. (This principle is important in designing the information architecture of a website or app. Also, when designing the product comparison feature on online shopping websites.

8. Pareto Rule or 80/20 Rule

The Pareto Principle is a concept that specifies that 80% of consequences come from 20% of the causes, asserting an unequal relationship between inputs and outputs.

9. Parkinson’s Law

Parkinson’s law is an axiom that states: “Work expands so as to fill the time available for its completion.” In other words, things become harder to complete when more time is given to complete it

10. Serial-position effect

A German psychologist named Hermann Ebbinghaus noticed that the brain remembers the first and last item better when faced with several items in a list!

11. Von Restorff’s effect

When several items are similar, the one that is distinct from others is more likely to be remembered.

12. Zeigarnik’s effect

The human brain remembers unfinished tasks better than completed ones, and in short, our minds are busy with unfinished tasks.
Studies show that students who suspend their studies to perform unrelated activities (such as studying a different subject or playing a game will remember material better than students who complete study sessions without a break (related article)