7 months ago

Designing For Edge Cases

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

We always prefer to share positive 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 obstacles 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 that way we expect them to do so , accordingly great designs prepare for  "edge cases" as well as the " ideal cases "even if these situations are rare.

So in summary edge cases are e 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 them in your designs in early stages to prevent issues that may arise and eliminate usability problems or bad user experience.

1-Error/Correction State.

 Once you interact with any interface , the potential of errors is available , of course we need to prevent errors from happening , but still we should think about some issues may users will 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.
  • Think about message styling , position ,clear language without technical words ( no jargon ).
  • Provide 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 "  provide 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 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 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 “ use contact us option, also provide alternative options you can browse by them.


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 for them evidence that the content is coming and reduce their perception of time. Also, provide feedback or at least why they should wait. 
Such a cozy 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 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 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 content:
      You need to test how flexible your layout is and how it responds to different content size, so you must design the layout with:                          

  • One content or item , maybe you’ll need to suggest 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 them:
  • When you design a page and need scrolls or moves 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 the transitions and animations fit with the interface? How long should animations be?


 “ Pinterest "  interaction states example .


As we know the empathy is trying to understand and expect users behaviors , that is the typical what we do, we expected the unexpected before the product release . The successful design is all about attention to details and giving a solution for 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.