4 reasons user interface workflows are important

This blog post is for teams that are looking to build new applications, or are rebuilding existing systems from the ground-up. User interface workflows are the steps someone needs to take in order to complete a single task. These are no different from any other system you may have for doing things in your daily life. We all have systems. Sometimes we implement our own systems without even thinking about it because we they can make our lives intuitively easier.

Some common examples of systems that you might use are making coffee every morning and then drinking it on the way to work. Or, taking the same route to and from work every day. Eating dinner at the same place every Friday night. Maybe you have a system for creating passwords. The list goes on. We often also refer to these as rituals. It’s rare, or perhaps even unheard of, for us to devise a ritual for ourselves that causes frustration or anger. Eventually a ritual, or system, can become a habit and then you don’t even think about doing it anymore…it just happens.

User interfaces deserve the same love and care as any self-imposed ritual or system you’ve ever devised. We’ve all experienced bad user interfaces: things are hard to find, or finishing a task isn’t intuitive, or the application breaks. A good user interface follows a natural progression and it simply just flows along with a minimal number of instances where you simply “get stuck.”

The 4 Reasons

Note, I’ve vastly simplified these reasons and I could certainly write a lot more on each topic. So rather than blathering on and making this an academic-grade paper, I think these speak for themselves and can hopefully spark constructive conversation within your team or organization.

Time and money. Intuitive workflows are enjoyable to use and almost second nature. If a workflow is non-intuitive, it can cost your organization time and money as users struggle to complete tasks. Long term technical support costs can be a direct reflection of how easy or hard your application is to use.

Attracting/retaining customer. If you own an online retail site, where seconds matter to web visitors with the sub-second attention spans, having a well-designed site can actually help attract and retain customers. New customers appreciate when a system is easy-to-use. Systems that take to long to learn can cause customers to leave and never come back.

Training costs. Training costs can be lower for well-designed systems, especially if the concepts are easier to grasp. More complex systems, of course, have a longer learning curve and involve more in-depth training and training follow-up.

Modification resistance. There is typically some resistance to change and change is inevitable for most applications as time goes on.  Re-training costs are almost always taking into account when systems are modified in any way. If a system has been well perceived to begin with then small changes may not be a big deal. However, if a system has a perception of being very complex then there will be an expectation that any new additions will also be very complex. It may be fair to say within an organization that any resistance to change increases along with perceived complexity of the application.

What are some examples of simple workflows?

I believe travel web sites have nailed down their workflows pretty well and we can learn a lot of from them. Competition is fierce in the travel industry and they live and die on generating high sales volume. Sites such as Hotwire, Travelocity and others have to get you the information you need as fast and as easy as possible or visitors simply go elsewhere. Because of this pressure, they have to deliver exactly what you are looking whether it’s a simple round trip plane ticket, or if you need lodging, rental cars, an entire travel package or more.

How hard is it to build a simple user interface?

In many software circles there are often discussions proposing it’s far easier to quickly start coding an interface and to simply get the project going than it is to take the time and design a really good interface beforehand.  If you’ve ever worked with a user interface designer you’ll have had this concept strongly debunked and new concepts drilled into your brain. Understand and agree on the design first with all interested stake holders…well before anyone types a single line of code.

It can seem counter-intuitive at first to hear about spending time at the whiteboard drawing story boards and diagrams rather than simply sitting at your desk slamming down lines of code and pushing out prototype after prototype. I can guarantee one thing: It is far faster, easier and significantly less expensive to change an initial user interface storyboard in something like Basalmiq than it is to re-write user interface code over and over again as different groups try to agree on the best workflow.

3 Steps for Determining if Your Website is Mobile Ready

Here are three step for helping determine the mobile ready strengths and weaknesses of your existing website. I’ve had a number of conversations from website teams recently asking the question: “Can we reuse our existing site for mobile users?” I was surprised to learn that the individuals asking me the question had, in fact, never visited their own site on a mobile device.

Note, this blog describes steps that need to be address before you decide whether to build for the web or native applications.

Step One – Create a small focus group of company outsiders, friends as well as employees.

  • Gather as many different types of mobile devices as possible including: iPad, iPhone, Android tablet, and several varieties of Android phones. Try to use a combination of older and newer devices. Don’t fool yourself by simply using all of the latest great versions, especially if your web visitors are the general public.
  • Get a mobile projector, such an Elmo or IPEVO.
  • Write down the common use cases, and the workflows associated with them. An example use case might be logging in to your site. And, a workflow would describe the steps a user takes to complete the login process  from beginning to the end.
  • Visit your website and run through the common use cases.
  • Turn off wireless, if possible, and let everyone experience typical internet speeds to simulate, for example, standing in line at the grocery store.
  • Trade off using different devices.
  • Hire a user interface (UX) designer if you don’t already have one. Bring them on board at the beginning, or as early as possible, in this evaluation process.

Step Two – Create a grading system to help assess the experience everyone had with each device.

  • Were you able to accomplish your task as easily and quickly as if you were at your desk with a full-size laptop or computer?
  • Did you have to do a lot of extra panning and zooming in and out to navigate through the use cases and workflows?
  • Was there any functionality that simply didn’t work, didn’t work correctly, or didn’t work as expected on the mobile device?
  • Were there any aspects of the site that looked different or wrong? For example, was all the text the right size? Was everything in the right place?
  • Were you satisfied with the amount of time it took for pages and images to load?
  • Were you able to comfortably use the site when rotating the phone between landscape and portrait views?
  • Were you okay with how quickly you were able to switch between different pages on the website?
  • Were you able to access secure resources without any problems?
  • And, perhaps most importantly, were there any obvious improvements you would like to see made to make mobile surfing experience better?

Step 3. Apply some commonly known mobile-specific conditions to your findings and see if helps to provide context to everyone’s experience.

  • One-handed plus gestures. It’s a fact that navigating a mobile web is significantly different from a desktop browser. There’s no mouse! Mobile browsing is usually done with one hand, while the other hand is used to hold the device. The screen is driven by what are called gestures. Examples of gestures are when you swipe your thumb upward on a page to scroll it downward, or when you use two fingers, usually the index finger and thumb, to pinch zoom the screen in or out.
  • Smaller Screens. And, of course the screens are much smaller than what you would find on a desktop or laptop. Different devices have different resolutions. And, navigating a full website can seem more cumbersome as you use gestures to navigate around, in comparison to the desktop experience of seeing the entire page, and using your a precision mouse to whip through the different links on a page.
  • Download Speeds. Download speeds on mobile devices vary considerably compared to your work machine hooked up to a reliable local area network (LAN). A site that seems zippy on your work machine, may load much differently on a typical smartphone. Also, for some older phones they may have much less processor power and that may lead to the perception of slower download speeds as the CPU chugs through displaying the page.

How do I interpret the results?

When you are done compile, discuss and analyze the findings with your internal teams and stakeholders.

Good. If most testers successfully navigated the majority of use cases and workflows then you are in good shape, and you may simply need to do some additional tweaking to your site.

Not so good. However, if most testers had unsatisfactory experiences then you’ll need to spend more time looking more closely as what worked and what didn’t work. You may find workflows that are great on a desktop machine that are clumsy and awkward on a mobile device.

Don’t be surprised. Portions of your site may have to be redesigned. You may not be able to include everything that’s in your full site into your mobile site. You may have to spend a lot of time optimizing the site to speed up page load times. Pay special attention to functionality that didn’t work on mobile. Mobile web browsers have well known limitations compared to full browsers. Looking at what didn’t work may help you decide if you need access to native device capabilities.

You’ve just taken a huge first step towards helping your team set the stage for stepping into the mobile world.