2 years ago

Designing For Edge Cases

Esraa Magdy - UI/UX Designer @uniparticle
UI/UX Design

We always prefer to share a positive attitude or "ideal life " with our friends; sometimes we try to hide "unhappy paths" just because we expect that people are perfect, they don't have any issues or mistakes.

A common mistake is to only plan for the perfect scenario. If working in digital design has taught us anything, it's that people are unexpected, they rarely use our products the way we expect them to. That's why great designs prepare for "edge cases" as well as the " ideal cases " even if these situations are rare.

In short, edge cases are all the unexpected scenarios that the system should deal with. 

In this article, I’m going to share some edge case scenarios you need to plan for in your designs during the early stages to prevent issues that may arise and eliminate usability problems or bad user experiences.

1-Error/Correction State.

 Once you interact with any interface, the possibility of errors is inevitable; of course, we need to prevent errors from happening, but still, we should think about some issues users may be facing especially at the data entering phase:

  • Validation: The way of entering data expected by the system and how it appears.
  • Detailed error messages: that will help users to detect the source of a problem.
  • The message: think about styling, position, clear language without technical words (no jargon).
  • A clear and simple solution: to help users return back or fix the error.
          Also Once users finish the task without errors let them know in an encouraging way.

Angara " provides a clear error message with mentioning the reason.

2- Done State:

Users need to receive a feedback message after doing something successfully, such as the reservation or check-out process, so the system must provide a confirmation message to ensure the user that the submission has been done successfully.

             "  Via creative design "  Payment and order confirmation.  

3- Zero Results Found:

Nothing depresses the user more than finding a blank page after a couple of attempts to find or search about something. Accordingly, You need to think about what will happen when it doesn't return any results.
If you design your search feature consider using the following techniques:

  • Provide suggestions based on terms or spell-check, it’s really helpful when the system detects a mistyped item.
  • Provide an alternative search and try to have featured content or similar results.
  • Another useful technique that will be really helpful for your users is autocomplete suggestions, thereby reducing the user’s effort in typing and so prevents them from entering incorrect terms.
  • You can at least give the user a way to reach you by writing down the contact info.
                   “ Wayfair “ uses the contact us option, also provides alternative options you can browse through.


To satisfy user's expectations, you should do everything you are capable of to make your system load as fast as possible. you need to provide them with evidence that the content is coming and reduce their perception of time. Also, provide feedback or at least why they should wait. 
A friendly technique we find in Facebook or LinkedIn while the system is loading called " Skeleton screens", is a version of your page that displays while content is being loaded. Skeleton screens give users the impression of speed. 


                                 "Slack" uses skeleton screens to give an impression of speed.

5- Empty States :

One of the most famous edge cases is  "empty state " or nothing state, if the user interacts with or lands on the page for the first time: you should think about how we can use the blank page to encourage users to start real interaction with this page by providing some instructions like :


  • Placeholder or text that explains what should go there.
  • CTA buttons to motivate users to get started.
  • Provide catchy illustrations, add humor and help the user understand the situation.

                                                              " Pinterest" empty state for trips planning application 


6- One, Some, Too many contents:
      You need to test how flexible your layout is and how it responds to different content sizes, so you must design the layout with:                          

  • One content item, maybe you’ll need to suggest to them to add more items.
  • Some Content is the ideal layout that most designers do.
  • How your layout will be different when the content is longer than expected, maybe you’ll need to add pagination or read more buttons. 
7- Interaction States :

  Design is not static actually, it must be interactive. One of our responsibilities is to think about how the users will interact with our product and that these interactions are clear for them.
    I’ll mention some examples about interaction states we need to cover:
  • When you design a page, you need scroll or move to see more content, let users know there’s more content to see.
  • Button/ cards states such as “ normal, hover, focus, disable, active and so on.
  • How do the transitions and animations fit with the interface? How long should animations be?


 “ Pinterest "  interaction states example.


As we know, empathy is trying to understand and predict users' behaviors, which is typically what we do, we expect the unexpected before the product release.

Successful design is all about attention to detail and giving a solution to our users to help them in their experience of using our products.
Put yourself in the position of a user and ask yourself what would be the most helpful thing.

Prevent edge cases from happening and support edge cases' scenarios, it's your responsibility.