Categories
Design User Experience

Top 5 Most Common UX Mistakes That Designers Make

As web designers, we are constantly trying to create a great user experience and help users achieve their goals. In our daily work, we are using all kinds of common patterns and trends. In my experience, I have seen how those patterns and trends can easily steer both clients and designers/developers in the wrong direction. It’s no secret that from time to time we all get sidetracked with things that seem or look cool. I admit, I’ve fallen into those traps on plenty of occasions myself — I’ve opted to create something visually appealing and sacrificed the usability because of it. Why did I do it? I presumed a wow moment will happen and magically engage the user. I hoped this wow effect would make a long lasting impact. The sobering moment came when I found out my users had a hard time understanding the interface I had created and was proud of. Sometimes you learn the hard way.

Top 5 Common UX Design Mistakes

The lesson I learnt was that to avoid a bumpy ride for our users, we must always ask ourselves what is under the shiny surface of the user interface we are creating. It’s worthwhile to stop before embracing any patterns or trends and think about the value they provide. As Kate Rutter brilliantly said, “ugly but useful trumps pretty but pointless”.

Please don’t get me wrong — I am not suggesting we shouldn’t make things pretty — I am suggesting we should aim to make things usable and pretty. The key with patterns and trends is to find a balance between what looks nice and the value behind them.

In this article, I will list several common UX mistakes I see on a daily basis. While they are not all bad per se, they can be dangerous if not implemented with caution. I’ll also share some insight on how you can improve the usability when implementing those trends or even suggest an alternative solution. Without further ado, let us get on with the list.

Common Mistake #1: Large, Fixed Headers

We’re seeing more and more of tall, sticky headers — branding blocks and menus that have a fixed position and take up a significant amount of the viewport. They stay glued to the top and often block the content underneath them. I’ve seen headers on high-production websites that are over 150 pixels in height, but is there real value behind them? I might be pushing it a little bit, but large, fixed headers remind me of the dreaded and now ancient HTML frames. Yikes! Fixed elements can have real benefits, but please be careful when dealing with them — there are a number of important things to take into account. When implementing sticky headers, bear in mind a couple of common mistakes you want to try to avoid:

Too Large for Comfort

If the decision to design a large, fixed header has already been made, do some testing to find out if large is too large. Make sure not to go overboard and stuff the header with too much content, which will result in a super tall element. With the fixed header in place, browsing should still be comfortable and fast for your users. If you are having doubts about the sheer size of the header, try making it smaller without sacrificing too much of the visual appeal and brand presence. Failing to find a good balance could result in a somewhat claustrophobic experience for your users and leaving a small amount of room for the main content.

Last year, I have been working on a project where the client insisted on a sticky navigation bar on the desktop resolution. Even though the bar was not especially tall, I feared some users might get that claustrophobic feeling of being boxed in. My workaround was simple — by giving the nav bar a slight transparency using CSS, the users were able to see through the bar, which made the content area feel bigger. Here is that small piece of CSS code, so why not try and see if that works for you too.

.header { opacity: 0.9; }

Here is an example I found in the wild. Recently, I stumbled upon ATP’s player profile page on Roger Federer.

Its fixed header has a height of about 110px, and when you scroll down the page, a sub navigation appears, making the header 160px high. That is over 30% of the entire page height on my MacBook Pro with the dock open.

Not Fixing The Problem on Mobile

Granted, a lot of users will be using a huge screen, and sticky menus could be a plus on super big resolutions, but what about the smaller resolutions and the mobile world? Bear in mind that a significant portion of your users will be using a small resolution device, so for mobile, position: fixed is probably not the way to go. Thankfully, responsive techniques allows us to design a different solution and stick with the sticky for large resolutions only. The mobile-first approach will provide a lot of the answers — start with the mobile resolution, with only the essential content, and work your way up.

Coffee with a Cop also has a fixed header, but much smaller — less than 80 pixels.

This is arguably a good solution on large resolutions, as it enables quick and easy navigation. On small resolutions, the header is also fixed and takes up a considerable amount of the viewport. I would advise against a sticky header on mobile and suggest a sticky hamburger icon, which would open up a menu when tapped on. Although this pattern is not a universal problem solver, it does free up a significant amount of space. On smartphones and tablets, space can be precious.

Common Mistake #2: Thin Fonts

Thin fonts seem to be everywhere — numerous native mobile apps and modern websites. With screen technology advancing and rendering improving, a lot of designers are opting for thin (or light) fonts in their designs. They are elegant, fresh, and fashionable. However, thin type can cause usability problems. One of the main goals of any text is to be legible, and thin type can affect legibility in a major way. Keep in mind that not everyone will be using your website on a display that will render the thin type well. For instance, I have found thin type extremely difficult to read on my iPhone and iPad with Retina display. Before thinking about the look and feel of font, let’s step back for just a second.

If users can’t read the words in your app, it doesn’t matter how beautiful the typography is

From the Apple Human Interface Guidelines:

Above all, text must be legible. If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.

Apple is referring to mobile apps, but the exact same principle applies to all websites. As Colm Roche said, legibility ≠ optional, but mandatory for good usability. There is no point putting content on a website if most of your users can barely read it, is there?

Here are some of the common mistakes you might want to bear in mind before putting your type on a diet:

Using Thin for Thin’s Sake

As with any trend, it is dangerous to use it simply because others are using it. Fonts should not only look good. First and foremost, they should be legible and provide a stepping stone to good usability. The decision to use thin type simply because of the fact that it looks good is bound to backfire. In his excellent talk More Perfect Typography, Tim Brown talks about a sweet spot at which a typeface sings. This sweet spot would be a combination of size, weight and color where you set the foundation of your website.

To make sure you have found a good body font and hit that sweet spot, do some testing in various environments. Which leads us to the next mistake worth avoiding:

Not Testing the Legibility on All Major Devices

Thin type may look good on your display and you may not have a hard time reading it, but be aware of the fact that you are not your user. Invest in usability testing to find out if your real users are happy with the typography on all major devices: desktop computers, laptops, tablets and smartphones. While doing mobile testing, have your participants use your website on mobile devices in daylight — your real users will not always have perfect browsing conditions. If you had to read something on a mobile device on a sunny day, you probably know how difficult it can be. If you decide to use a thin font on your website, there’s a simple way to adapt to mobile users. I will show a solution on a website I saw recently:

Oak does a fine job of adapting to the needs of the users — on the desktop resolution, their H1 heading has a very thin font weight. Since the heading is large and had a good color contrast, I suspect legibility does not suffer. On mobile, where the size of the heading is significantly smaller, the weight is slightly thicker, which surely aids legibility. Clearly, they have spotted legibility issues with thin fonts on small sizes and implemented a greater font weight through media queries. Their solution is simple, but very effective.

Common Mistake #3: Low Contrast

Low color contrast has become somewhat of a trend in user interface design in recent years. We have already covered thin fonts, which create a low type contrast, but there is much a bigger trap you can fall in — a combination of thin type with low color contrast will make yours truly really scratch his head and think have we lost our minds? Of course, not all low contrast is bad. It can even add to the visual appeal if designed with care. But as is the case with all UX mistakes, it is important not to go over the top and keep usability in mind.

A couple of major mistakes you might want to avoid while dealing with contrast are:

Low Color Contrast in Body Copy

While low color contrast is not exclusively bad, it can have quite a bad impact on the usability of your website and make text very hard to read for some of your users. If this article inspires you to increase color contrast on one thing only, make that your main body copy. It is most probably the least favorable area to experiment.

Cool Springs Financial uses a thin variant of Helvetica for body text. While it looks elegant and contributes to an aesthetically pleasing user interface, it is difficult to read on a number of platforms.

I did a quick test on a MacBook Pro with retina display, as well as an iPhone and an iPad with retina display. The screenshot is from my MacBook Pro which reveals contrast and legibility problems. I had a hard time reading the text on the website on all of my devices.

Not Testing the Contrast

Consider doing some user testing to avoid issues down the road. I already hear some of my clients and colleagues go “Bojan, user testing is time-consuming and expensive”. It can be, but it really does not take an awful lot to test the contrast on your website. Start with body copy and work your way up. There is a nifty tool called Colorable which will help you set a correct text contrast according to the WCAG accessibility guidelines. Once you know you are using correct text contrast, adjust other colors on your website and do quick user tests to make sure most of your users have a pain-free time. I doubt low contrast will cause a rebellion, but it could frustrate a lot of your users.

Common Mistake #4: Scroll Hijacking

Another trend we’re seeing a lot of is the scroll hijack. Websites that implement this trend take control of the scroll (usually with JavaScript) and override a basic function of the web browser. The user no longer has full control of the page scroll and is unable to predict its behavior, which can easily lead to confusion and frustration. It’s a risky experiment that could hurt the usability, so I advise great caution.

If you’re set on implementing a scroll hijack, you might want to try and avoid the following mistakes:

Using the Hijack Just Because It’s Trendy

Some websites can get away with scroll hijacking, but that is no guarantee your website can. Trends and patterns can’t be blindly followed and implemented. For example, we’re seeing many designers follow Apple’s presentational pages with scroll hijacking, parallax effects and high resolution images of various devices. Apple has their own reasons, their own users, a unique concept, and unique content. Since every website has unique problems, it also must have solutions tailored for those problems.

Not Testing on Actual Users

To avoid issues when borrowing ideas or patterns, make sure to test the prototype of your website on users. Simple usability testing will reveal whether the implementation of the scroll hijack is feasible or not. Testing will surely answer a lot of questions and provide clues on how you can improve upon your idea. Without testing, you have no way of knowing which way to go and developing websites based on assumptions are often costly in the long run.

Tumblr uses scroll hijacking on their current homepage. While their implementation could also be a risky one, it seems they understand their target audience, the content and concept supports it, and that they have addressed many of the user needs. When the user attempts to scroll down the page, the scroll is hijacked by the website, but the user is then quickly taken to the next section of the homepage. The content is broken into several sections or blocks, which are clear to distinguish and big indicator dots are fixed on the left side of the viewport. As a result, the homepage feels like a huge carousel you have control over, rather than an experimental website with a mind of its own.

Common Mistake #5: Ineffective Carousels

Carousels are very common on the web, and have been for a long time. While they can be effective, they can also turn into a nightmare if not designed and developed carefully. The nightmare for your users could be the fact that they are having difficulties understanding it. The nightmare for you could be the fact that your users are not seeing the important content in some of the slides of the carousel.

Carousels with no content of importance: not the most effective use of space on your website

Carousels with no content of importance: not the most effective use of space on your website

A lot of carousels I’m seeing have similar downsides. Some of those are:

Lack of Real Value for the Users

What is the real value the carousel offers to your users? If done right, a carousel should engage your users and help them achieve their goals quickly and pain-free. I often see carousels that do not provide additional value, but appear to be mere decoration. Here is a quick test you can do: take a post-it and write down three benefits of the carousel for the user. If you fail to think of three, there is a good chance your carousel needs more work.

Too many slides could have a negative effect on the users and they might simply choose to ignore the carousel. Usability guru Jakob Nielsen suggests the following:

Include five or fewer frames within the carousel, as it’s unlikely users will engage with more than that. While more than five could be too many, less than three could indicate a better solution is well-advised. One of the premises for a carousel is the fact that you need a lot of content fitted into a small amount of space, but with just two slides, why not show both slides at a time and forget about sliding altogether?

The previous and next Arrows and Slide Indicators Are Not Obvious and/or Accessible

Make sure you are making your precious content accessible. Important information in a carousel could remain hidden if the next and previous arrows are not obvious and large enough for a comfortable click. Oh, and do not forget the tap — your mobile users will thank you.

Sometimes, there are no arrows in a carousel, and the indicator dots are links for jumping between slides. Remember that you need to provide a nice, big clickable and tappable area (I recommend 35x35px at the very least). Otherwise, the small targets might lead to a very frustrating target practice and an exit from your website.

The Floresta Longo Foundation website has a carousel of images in the header. It has an autoplay and slides through five photographs. The previous and next arrows are small and are transparent which makes them both hard to spot and hard to click or tap. There are no indicators of the slide you are on and no labels showing what the photograph represents. The images are not links and act as a decoration. While the carousel may hold some value of engaging the user, it certainly leaves a lot to be desired.

Conclusion

I have listed several common UX mistakes in some of the current web trends. If you have implemented or are thinking about implementing any of them, I sincerely hope this article has provided something you will find useful. As a UX designer, use your best judgement and do not be afraid to improvise, but always remember to keep your users in mind.

Feel free to start a conversation below. I would love to read about your experiences, points of view, or suggestions on how to make things better.

Original article from Toptal.

Categories
Blogging Design Design Thinking KaraboNgoatle User Experience

How Standard Bank Online Onboards New Users

So recently I went to standard bank because I remembered that I had an account with them that I opened back in 2007, lucky for me I found that the account was still active after all these years, think the last time I used it was when I was employed at Quirk back in 2011

Anyway, I got my account number and ordered a new bank card ( still don’t know why I have to wait a couple of days for a personalised card in 2017 )

Don’t give that operational and printing cost bullshit argument.

So getting back to my story, with my old account number, I went and added it as a beneficiary to my current banking platform and deposited a R100, to give it some new life ( I had R0.46 cents left )

I then proceeded and tried to go online to setup my banking profile

Got introduced to a new shiny marketing site explaining the new banking evolution, clicked on Try it now and proceeded to Login, Mind you before doing the said above I had signed up for a profile using the mobile banking app already.

Now my pain point is here, I fail to understand why I have to have a card to access my transactional account ? Can I not activate my online banking journey with my Identity Number and for security measure Authorise that it is me via USSD on my phone ?

This Analysis will have to end here until I get my card. Peace for now.

Ps: this is written in my personal capacity and does not represent the thoughts of those that employ me

Categories
Design Thinking Development KaraboNgoatle User Experience Wireframes

Everything You Need to Know about UX Sketching

If you’ve done any sort of serious creative work, you are all too familiar with creative block. It feels like hitting a brick wall: None of the ideas you’re able to visualize are good enough, or can’t work in real life.

For designers, the feeling is all too familiar. However, like any complicated problem with no clear solution, a smart process can make all the differences. This is where UX sketching comes in.

UX sketching is a crucial, yet often overlooked, aspect of user-experience design. Sketching is a very efficient way of communicating design while allowing designers to try out a multitude of ideas and iterate them before settling on one.

In this post, I intend to cover everything you need to know about UX sketching, including the following points:

  • Introduction to UX sketches and wireframes
  • UX sketching basics, tools and techniques
  • Clarifying sketches with notes, annotations, numbers
  • UX sketching tips and tricks
  • Mini-methods designed to boost quality and productivity
  • All you need to know about Wireflows
  • A quick guide to UX flow sketching

UX Sketching is a Two-step Process

Many options must be considered in design, which results in the choice and the execution of the best one. Designers consider their options, and then proceed to work out the details, thus making UX design a two-step process:

Ux sketching

  • Idea Generation

In the initial step, multiple ideas are generated, but since they cannot be fully shaped, it is not uncommon for some of the elements to be incomplete or missing. The main thing is to consider different approaches and to decide which is the most efficient in the context of your task and the various constraints of the project.

  • Detailization and Refinement

Step by step, you settle on a few promising variants and proceed to work out the specifics, thus rendering some ideas unsuitable.

UX Sketches and Wireframes: Introduction and Classification

Your wireframes may differ depending on factors such as the desired level of detail, colors and style, whether you are going to show them to someone, and so on.

Good sketches will help you think clearer, find better solutions and save time.
I singled out the following sketch types:
  • Sketch: Idea Generation

These are initial sketches. Lower level details are simply noted. A limited number of colors is employed.

I draw a lot of basic sketches to consider the problem from different angles and to consider different solutions. While drawing such sketches, I am also striving to generate as many solution variants as possible.

At this particular step incompleteness frees my mind, which is why it is so important to avoid getting bogged down in minutiae at this stage. My goal is to generate as many ideas as possible and choose the most promising ones.
  • Wireframe: Specification, Detailed Phase

I usually pick promising sketches and go over the details, after which I choose the best variant and work it out in greater detail.

However, this does not mean every single detail. Obvious things may just be noted. Moreover, some aspects will be difficult to describe on paper.

At this step, I draw all the important details, but I do not yet draw wireframes in Balsamiq. After everything is done on the paper, I start drawing in Sketch.

Digital tools provide a lot more creative freedom than paper and you can easily shift attention to minor things. For example, you can focus on “pixel polishing” instead of design.
  • Visual Design Draft

This is a rarely used approach, but sometimes it can be helpful. Various visual solutions are considered at an early stage of the project, but it may take a long time to create digital sketches for all of them. That is why I draw design sketches on paper first, to consider different options and choose a visual design direction.

  • Components/Elements Breakdown

I find this technique useful when I have already have a general idea and I am thinking about a particular page functionality, or of the integral parts of interface components. I draw different page elements, going into detail, and then draw different possible positions of the page elements.

Elements, even the most simple ones, must have a state; a button can be pressed and it has a hover text block that may or may not be empty. The more complex it is, the more states it has.

Getting Started with the Basics

  • Prepare your tools – Find the most convenient place possible, a large table with plenty of space. Take a lot of paper and prepare some pens and markers.
  • Warm up – In order to get ready I recommend drawing some lines, circles, basic templates and icons.
  • Define your goals – Decide what you want to draw. Set your aim and decide what story you have to tell. Determine the desired level of detailing. Decide whether you are ready to draw a lot.
  • Define your target audience – If you are doing this for yourself, you don’t need to worry about the way your sketch looks. However, if you intend to show your drawings to a client, make sure you allow some extra time to add more details to your sketch.
  • Set a time frame – Having decided on the amount of time you are ready to allocate for sketching, let’s say 30 minutes, will help you focus on your work.

Now, you are all set and you can get started:

  1. Draw the edges – Draw the frames, a browser or phone window, a part of the interface, and so on.
  2. Add the biggest or basic elements – Menu, footer, main content.
  3. Add details – Add relevant details, but keep them simple at this stage.
  4. Add annotations and notes – These are required only if you’re planning to share the sketches. However, they can be useful even if you’re doing them for your eyes only.
  5. Sketch alternatives – Sketch some quick alternatives to your solution.
  6. Pick the best solution – Choose the best options.
  7. Add shadow and bevel – This is particularly important for sharing purposes. Add a shadow to make your sketch visually appealing, which is important if you plan to share it with team members and/or clients.
  8. Save the sketch – Take a photo or put it in a folder. I have a few paper trays on my table for sketches.
  9. Share – I usually use one of the following sharing methods:
    • Scan sketches via Evernote and provide a permalink to other team members or stakeholders.
    • Take a photo and upload to InVision.
    • Upload and map images to Realtimeboard.
    • Or just email a photo.
  10. Review the sketches and add notes – Take a break and then come back to your sketches a while later. Take a look at them again. Does the sketch still make sense to you? A good sketch must be easy to follow.

If you as the designer can’t understand something you have in your sketch, then the solution won’t be successful. Either the sketch doesn’t allow you to visualize your ideas well, or the ideas are too complex.

Clarifying Sketches with Additional Elements

Find or draw a proper sketch, and then add the following details to it:

  1. Title – Sometimes adding a title is a good option. Write a description and date, if necessary, at the top of the sketch. The title will help you understand what you are looking at and whether or not the sketch is relevant. This is especially useful if you have a lot of sketches or you are going to show to others.
  2. Annotations – Annotations are names and notes placed close to an element, to explain its content or other attributes. They add details that clarify other elements, and are usually difficult to draw. For example, it could be the name of the block, some interaction details, an explanation of a picture, some ideas for future design variations, and so on. You can check out one of my examples to see what an annotation sketch looks like.
  3. Numbers – Number the elements of your sketch, or the sketches themselves. You can decide how to order them (e.g., by interaction flow, the order in which you created them, etc.). It may also be useful during discussions (especially remote discussions), as your colleagues and clients can just point out the sketch number in their feedback and you will understand which one their comments refer to.
  4. Arrows – You can use arrows to indicate screen transitions. They can also be used to connect different parts of sketches, to indicate a sequence of actions, and so on. Since the meaning of an arrow can vary, just above the arrow you can add a description or explanation of what the arrow is meant to signify. Here is an example of a basic sketch showing a transition and several difrerent states.
  5. Notes – Just like annotations, notes are used to explain concepts. However, notes differ from annotations in their placement. They are not attached to an element or located near the described element, similar to this example. Notes can be placed at the top or bottom of the page. They can even describe elements that are not included in the design, questions that you may have, general explanations, unsketched ideas and so on.
  6. Gestures – Gestures are relevant in the case of touch device design. Drawing a hand gesture may require practice. There are several variants of gestures used to indicate different types of actions, so it is better to decide in advance how you designate a particular action (if it is not obvious, of course) and to practice drawing it.
  7. Feedback – You may receive suggestions for fixing or improving the sketch after showing it to others, or after you take another look at it yourself. It is often useful to mark such feedback in a different color so as to help differentiate feedback from the original sketch.

You can use different colors for different types of elements. Sometimes I use black for drawings, blue for links, dark green for notes, red for titles and feedback. Try to use different colors in your sketches, but make sure your choice of colors is consistent!

More Specific Tips and Tricks

  1. Don’t worry about the quality – Don’t look at the sketches on Dribble; they are about something completely different. Bear in mind that the main purpose of sketches is to help you think clearer, find better solutions and save time.
  2. Practice – For a start, you can try to draw a few apps. Open a web or mobile app and try to copy the screen, describing the elements in the notes. Whenever you have some free time, practice drawing basic building blocks of your designs. In general, practice makes perfect. In a while, it will become part of your designer self.
  3. Buy a folder – I often don’t work from my office, but rather from a cafe or my home. Paper sketches are very prone to damage, so buy a simple folder to keep them safe and sound.
  4. Bring tools with you wherever you go – This helps ensure that you can capture your idea on paper at any time, otherwise you may just lose the thought or not be able to remember it in sufficient detail. I always have a notepad, a few A4 sheets, and pens with me.
  5. Share with others – It’s very important to engage other people and communicate with your team. Involving others and getting their feedback, especially early on, helps save time and resources in the long run. You can also encourage others to draw the way they envision the design.
  6. Paper trays – Think of placing paper trays on your worktable. For example, I have three of them: For incoming tasks, for sketches, and clean sheets of paper.
  7. Experiment and customize – My recommendations are based on my experience. In time, you’ll find out what suits you best; which methods, which sequence of steps, what exactly fulfills your creative potential. You will get there only if you constantly try something new, which is why it’s important to experiment with different formats, styles, and try new templates.
  8. Use templates – Templates will save time and implicitly take into account format restrictions, freeing up more time to focus on what is important.

Additional Mini-methods to Improve Your Sketches

These aren’t necessarily tips and tricks, but they’re a collection of methods, tools, and suggestions that should boost your productivity or improve the quality of your sketches.

  1. Create a Sketch Board – One of the biggest benefits of using pen and paper instead of a digital sketching tool is that you can actually stick it to a wall. Everyone on your team can see it and participate (although I recommend setting up review sessions).
    • You will see your sketches yourself, and this will stimulate your thinking and let you see the big picture, not isolated pieces, but the whole system. You will see interactions between parts and the way they fit one another.
    • Create the sketch board – attach your whiteboard sketches. If there is no whiteboard in your office, you can use double-sized adhesive tape or post-it note sheets to stick your sketches to the wall. If you don’t want to stick to the wall, you can find a big piece of cardboard paper instead. I strongly recommend using sketch boards, as they’re one of the best design tools.
  2. Use a Whiteboard – A whiteboard is a great drawing tool. It has a number of advantages: It is collaborative; it is easy to involve other team members in the discussion and in the drawing as well. Even if their ideas do not fit well, you will understand their way of thinking and it will help you to be on the same page.
    • Markers do not let you focus on details, you have to think about the general things. Sketches are open to interpretation.
    • A whiteboard is easy to clean and make corrections on.
    • There is a lot of space and you can easily think through the whole system flow.
    • You can attach sketches, printouts, and reference materials using magnets.
  3. Prototypes – Make a clickable prototype to evaluate your design. Try to get feedback about some elements. This works particularly well when you are using templates – your sketches are of the same size. Obviously, it will be much easier to draw same size sketches if you are using a template. I will try to make it even easier by providing you with a few templates you can download and use: Mobile, Browser multi-window, Browser scroll, Personas.
  4. Use your Printer and Scanner – Draw the framework by hand (you can use ruler to draw more accurately), then just scan it using a scanner or mobile app, and print it. You can edit your template in image redactor before printing. You can remove unnecessary details or duplicate some elements. You can also print a readymade site page, photos, and other descriptive elements. You can paste the cut-outs in your sketch.
  5. Use Evernote for Scanning – Evernote is a great design tool. You can keep and share your sketches in it, you can create themes, and use tags to organize your sketches. The abilities of the “Scanner” mode are particularly impressive. You put your sketch in front of it and it “scans” it, so you get the copy of the sketch. Then you can invite your colleagues to Evernote and give them your note link. Since there is a mobile app for tablets and phones, you can always have your sketches at hand.
  6. Hybrid Sketching – To put some life and realism into your sketches you can combine them with photos. That means that you have to take a photo and then draw some story with interface elements on it. This can also help you to notice some interaction issues and details.
  7. Tracing Real World – If you need to create a storyboard, illustrate an experience in a specific context (e.g. a person using a smartphone at a bus station), you need to include depictions of people, places, and various real-life objects. These can be difficut to draw, especially if you haven’t mastered drawing skills, but here’s simple tip:
Take a photo of the object or the situation, and then obtain the key objects contour using an image editor. You can use the resulting contour in your sketches afterward.

Of course, if you have a tablet and stylus it will be even easier.

Wireflow: Outlining System Flow and Branching

The wireflow is essentially a sequence of the system flow, screen after screen, with branches and decision points. We should consider how a user addresses their task, the way they move from screen to screen, and their overall experience of the product over time.

Wireflow, or what you are drawing and the way it is connected, could be organized according to the following approaches:

  • Sequence – A sequence is a straight journey, screen after screen. It can also be a story with decision points; you show not only the journey but also decision points and different paths the user can choose. You can show the structure of screen interaction.
  • State changes – Depict different screen states of some element and the conditions or actions that cause the transitions between these states.
  • Screen vs. screen elements – You can draw the whole screens or consider micro-interactions and interactions.
  • Platforms – You can consider a one platform experience or multiple platforms.
  • Scope – Will you depict a part of the user journey or the whole journey? One user interaction with the system, or multiple users’ interactions?

I generally try to define the following wireflow types, depending on the organization and practical use:

  1. Mapping overall flow and high-level flow – Promptly sketch the screen shifts and draw the general journey of your product usage. Here you can include some context and you can optionally show some user interaction. For example, an e-commerce shopping service is quite a long journey that may include a lot of steps: How the user found the shop, the steps they went through to order the product, how they paid, and so on.
  2. Screen flow – This focuses on a specific functional flow through the system. It could be a small straight sequence of screens or a journey with branching. For example, a user uploading some photos or a video.
  3. Navigation scheme – Draw your screen and the options it contains. This is not supposed to map the journey. This step includes information that shows the options a user can choose, the directions users have, and various app parts. I usually create a navigation scheme at the beginning of a project. It serves to understand how navigation should be structured (what points should be included, how many levels are necessary).
  4. Screen states – Draw the screen or element states (an example might be a file upload dialogue). In this case, for example, the screen will have the following states:
    • Blank
    • A user pulls the file in the active area
    • The file is uploading
    • The file is uploaded
    • There is an error

Sketching UX Flow: A Quick How-To Guide

The wireflow design process is similar to the wireframe one. Many steps are similar or identical, but there are some important differences:

Define what you need to draw – Decide exactly what you want to draw (e.g. the general history or a fragment of your design). Do you want to generate different options or to think through the details of one journey? Decide whether you are going to show your sketches to someone else or not.

Define what keyframes and transitions you should include in your drawing – If you add all the screens and shifts your wireflow will be very long and complex. Consider which key screens you should show to convey the essence of the interaction that helps accomplish your task. The same goes for screen shifts. You need to choose which shifts will be more useful in expressing your idea. Check out this example for reference.

Define the starting point – What will be the starting point of your journey? You can start with the entry point, i.e. the start of the journey, for example, what a user sees when they log into your app. Alternatively, you can start at the midpoint or with the most interesting/difficult/important screens or process steps. Or you can start at the end, with the end-result achieved by a user, and describe the steps the user took to come to this point.

Define your approach and make a general paper sketch.

Decide what comes next – After drawing the starting steps, decide what goes next by answering the following questions:

  • Which way does this step lead users?
  • Which way do you want them to go?
  • What do they have to do to get there?

Sketch alternative routes, entries – Think about alternative ways the user can get to each step:

  • What will happen if the user’s Internet connection fails?
  • What other options do they have?
  • What can go wrong in the case of user or app error, what will happen?
  • What will happen if the user closes the app at this step?
  • Where will the user start the next time he launches the app?

Think about alternative flows – Analyze the history, design an alternative flow, and sketch it.

Add annotations, notes, details – Add the explanatory elements that will clarify non-obvious details.

Save – Make a digital copy of the sketch.

Share – Share the sketch (e.g., via Evernote or Invision).

Essential UX Flow Sketching Tips and Tricks

Draft a wireflow first – If you are going to think quite a long journey over, you would better make a quick sketch in order to understand how much space you need and in order not to miss some important steps or details. It would be difficult to add them to the paper sketch afterward.

Don’t create a huge map with too many details – Paper sketches don’t have an undo button, so it will be difficult to make changes. You may draw the details too accurately and this will distract your imagination from the generation of different high-level variants. Instead of creating a huge scheme that would illustrate the entire system, try to focus on the key scripts and try to dedicate an individual page for each script.

Cut unnecessary details and combine various detalization levels – It is not necessary to draw all the interaction descriptions, so try to use only the key elements of your journey. While drawing a huge interactions map, you have no need to work every single screen out in detail. Some screens could be just represented by several squares, and other, key screens, could be worked out in detail.

Try different paper sizes – Try different paper formats, A3 or A5. Paper sheet size will limit you and will affect your process in different ways. A small paper sheet will not let you add many screens or details, but it can help you to concentrate on the main ideas. Using a big paper sheet you can draw one huge journey, a lot of details and additional notes. Alternatively, you can place a number of small journeys on it.

Post-it notes can help too – You can also try to use Post-it notes. You can draw separate screens or some footnotes on them, or you can draw additional states of your sketch’s elements. Their advantage is that they can be easily replaced, you can also simply move the note somewhere else. For example, in case the flow has changed you can just change the order of your Post-it notes.

Use templates – Try to use templates. They will save time and will enable you to create more clickable, high-quality prototypes.

Try using a whiteboard – A whiteboard has a number of advantages. It is becoming more and more popular because it allows you to draw a huge journey with a lot of branches. You can draw a lot of application components on paper and then just attach them to the whiteboard using magnets, adding them to the journey.

Sketching a shadow – Shadows can help you to mark important elements and they add visual attractiveness to your sketch. I use three different types of shadows

  • Lines following the light direction – this does not always look beautiful, but you can use the graduation and pick the objects up to different “heights”
  • Outlining of some part out with a darker color (only the bottom or the bottom and right side)
  • Using the Pro-marker (or its equivalent in the app you use for drawing)

Drawing components – An objection like “I can’t draw that well” may stifle your initiative. It is actually easier than it sounds. Even the most complex sketches are generally composed of a number of basic blocks, like in this example.

If you can draw a point, a line, a triangle, a square and a circle, then you have the essential building blocks you need to draw anything for your sketch.

Putting it all together – The basic elements, buttons, radio buttons, and dropdowns are composed of basic elements. After learning to draw these elements, you can combine them and draw complex blocks and components.

Wrap Up

The goal of this post was not to create the ultimate, one-size-fits-all guide to UX sketching, or sketching in general, because designers have different needs and personal preferences.

As you can see, this is a lot to cover. Designers use a myriad of tools, techniques, and approaches to produce UX sketches, and it’s rather subjective. Certain techniques may or may not work for different people working on different projects. If you’re just getting started, you should definitely experiment.

Constant practice and experimentation will help you find what works for you.

It’s up to you to choose tips and techniques that will be the best fit for your project and your approach to design. Do you have any additional sketching tips for fellow UXers? Feel free to share them in the comment section.

This article originally appeared on Toptal.