Designing Web Applications

Well after a long hiatus, I thought I would share learnings from a large scale web application redesign project I have been involved in. There are many blogs that have shared similar recommendations but it is only when you come out first hand of designing a complex application for a large customer base do you realise how crucial attention to detail is when designing web applications.

Websites v. Applications


An application is typically defined as a website that requires a higher level of interaction from users, predominantly data entry. In a website, users are typically tasked with information gathering. By the time they come to your web application, they are looking to engage with your brand, self-service their acquired products or expect something on interaction with the application, whether that be a new account, transfer of funds or completion of a purchase order.

User behaviour and experience expectations of app design

Users usually have a limited attention span whilst they are seeking information about your products and services on your website - and that's on a good day. By the time they hit your application, they expect logic, intuition and plain old common sense principles integrated into your app to make their interaction as fast, concise and finishable with little thinking as possible. Admittedly there are applications that are geared more towards casual use (eg. social networking apps) but for this post, I am focusing more on B2C applications that have an eCommerce / conversion focus.

Remember, by the time a user gets to an application, they are no longer in browse mode, they are here to get a job done and it's at this crucial point of conversion that you need to utilise design and technology to get the customer over the line.


Guidelines for designing usable web applications


Self-service based applications

• Typically, you'll have a lot of information on a home page for example the main screen on an online banking system so research, user test and create multi-variates of the home page so you ensure you present the information that is relevant. You'll need to have a thorough understanding of what information users want to see when they logon to your application. 
• Whilst you can easily through everything onto the one page, this will impede user experience as they is too much information to take in, it will cause large download times and in the case of notifying the customer about news/updates/things to do, these areas will be dilated if they are overpowered by information overload on the homepage. Widget designs and other web 2.0 interfaces may look cool but for most of your market, it is simply too much and the learning curve for the average online punter outweighs any value they may get out of dashboard type view.
• When designing our online banking system, we asked users what they're top tasks are and designed for the user. We also utilised white space and split out each major section into clearly defined real estate on the page. This way, users become acquainted of knowing in the top left, where users look first, notification messages are displayed. Nice to know information is contained in the bottom right which is the least view section of a webpage.

Even a trusty Facebook page (which I'd consider an application) follows basic principles of having major navigation options / core content on the top left whereas mostly unused functions in bottom right as users rarely look at this part of a webpage. Interesting to note the mass decluttering that occurs on each Facebook redesign with white space being more and more utilised each time. White space is your friend when designing info heavy applications.

Designing the layout of a typical application form

• When designing for a non-self service application, it is important to notify the customer of where they are in the form, task wise. Customers invest time in an application form but they also like to 'budget' their time and not spending 15 minutes filling out a form where they thought 5 would suffice. Utilise step '1 of 4' indicators etc. and visual markers to show the progress they're making.
• Don't clutter your app with copy that isn't necessary. Keep a leash on the legal content as it can either create too much noise on the page or simply scare customers off. 
• Go easy on the assistance test. If you find you're putting too much help and assistance text in your application, you haven't designed it well enough or are covering up design flaws with quickie ' how to' blocks of text.

Form design and data capture

• Don't ask or force the customer to enter anymore information than they need to. A culprit is often the 'where did you hear about us' question or asking for 4 different phone numbers. Customers usually have one preferred number and analytics software will tell you where they have come from so don't clog up your form with these types of questions.
• Use progressive disclosure. Don't show 10 questions per page if only 5 are relevant to a customer. Ask leading questions at the top of the form that dynamically configure the form. This will give the illusion of a shorter form which can assist conversion dropout but will also demonstrate that you're actually making the form as short as possible. 
• Use auto-complete, calendars and address lookup. When a user is entering details such as their address, offer suggestions to save them entering the data themselves. For recent date entry, a calendar is usually more convenient than a customer entering a full date. Ensure there is year toggling too for longer searches.
• If you have a question with 3 or less options, use radio buttons. For 3 or over, utilise a dropdown but don't have a million options in their as it makes scanning harder for users. Trying and break your question into 3 drop downs combining with progressive disclosure to make selection more efficient.
• Pre-fill as much data as possible such as drop-downs for area codes, postcodes and streets. Populate the most popular options at the top eg. If you're in Australia, make Australia at the top! Don't make users search through 200 different countries on a drop-down.

Error Handling

• Use real time in-line error handling appropriately when you can. If the customer usually enters a 10 digit mobile number, check for 10 digits now, it will save effort on correcting data if you have a mass submit / check data process. You should really only be doing the real processing on submit, using server side validation to check 'you haven't selected a title' simply wastes time for customers
• Have clear indications of where the error is. The best combination is a list of friendly error messages on the top of the form, an in-line error next to the field and a highlighted field box. There is nothing worse than being told that you have entered something incorrectly and have to trawl through the form to find it.

A simple example of good vertical alignment of fields for easy scanning, right aligned labels which also assists in scanning and friendly errors / highlighted missing information in field boxes

Things to avoid

• Poor AJAX - Some forms can either have too much AJAX where 2nd click a user makes, an AJAX loader spins away and delivers something with little value. This can become frustrating so have clear calls to action so a user knows that intend on bringing information in from the backend. On the other hand, having no AJAX at all is just as frustrating as a user fills in field, hits next, information loads and repeats this process 2 or 3 times when all of this information could have easily been shown on one clean screen via AJAX.
• Don't suggest or predict everything - Being an iPhone user, I find it's predicted text more harm than good when composing emails so don't predict forms where for most part, will have a wide range of responses from customers.
• Don't be too aggressive on the validation - Let the customer write English when they fill out your form. Don't be so aggressive on spaces, formatting, grammar, special characters etc. that the customer basically should code their response in HTML and email it to you

Summary

Applications utilise a lot more of your customer's or prospective customer's attention than your website so take care in providing an intuitive, simple and efficient application. Whilst you can incorporate all of the above, testing your application is key and seeing how customers interact will provide a plethora of information on how to enhance your application, scale back, design tweak and provide a user experience that will either retain customers or convert new ones.

Website Redesigns - The Mini-Series

PILOT EPISODE - Gearing up for renovation

If you are considering a website redesign, this new series will aim to give you the lowdown and hopefully some handy pointers for those who are considering the daunting task. Having just spent 9 months of one myself, there are plenty of learnings to pass on.

Step 1 - Why do you need a redesign?

Remember, the look and feel is only part of your website. There are many other elements that are just as important including content, information architecture (IA/sitemap), navigation and most importantly, governance.

There may be other types smaller redesign work that you need. Don't just change a website because 'you're bored.' Your users aren't bored and unless you're going to make their lives easier - which for online users is easier task completion or information gathering, they'll get very annoyed.

It may just be that your content is getting way out of hand. A redesign won't fix this. Creating a content strategy that will involve a cull of content, audit by content owners and perhaps a rework of the IA is more of a fitting solution for you rather than running over it with bright colours and flash. With content management systems in heavy use which have allowed any old Bill and Bob to author and publish content, it is very easy for a website to get out of hand content wise.

Step 2 - Ask your customers

Don't rely on staff to tell you why you need a redesign. Staff are likely not your target audience, your customers are. Conduct surveys, work with your retail channels such as call centres and God blimey - ask your users what they think of your current website. Ask them to compare it to your competitor's sites. I did this and the feedback was excellent. Users are very honest (perhaps too honest at times) and happy to give feedback if they know if will go to good use.

Step 3 - Form a team

Before you even think about pulling out the digital paintcans, ensure you have people around you that can guide you through a potential project.

Who you'll need:

• A project manager - someone to run the show who is preferable not an online nerd. If you are an online nerd, it is strongly advised to detach yourself from the governance and management so emotions don't get in the way of structure. (I did this a few times) You need a strong leader who can escalate issues, manage tasks, vendors and timelines to ensure bickering is minimised and that go live date is achieved.
• Sponsors - If you have a budget, you'll likely need to show people of who have written your cheque. Ensure your sponsors have an understanding of why a redesign is needed, forecasted ROI and have a sound knowledge of the web so when an escalation is required, they'll understand what the problem is.
• Technical people: It proves extremely valuable to have people from IT with you from day 1. Whilst you may not be coding, they will be able to provide advice on technology and coding choices which are the backbone to the pretty stuff that you and your peers will see.
• Content owners on tap: If you are embarking on a redesign that will impact thousands of words of content, ensure the people that own all those words are on board. Ensure they know the reasons for a web design and what they will be expected to do. Don't surprise them with a new site a week from go live and expect them to sign it off with a big smiley face. Once your project manager creates milestone dates, you can communicate when the content owners can see designs and need to be involved.

Key Tip: Once you have a team, decide very early on who the people will be that get to sign off designs, changes to content or development. Once more and more people become aware of your website redesign, you will get a lot of interest, opinion and ultimately come to a scrum over who has the final say over milestones or deliverables. Leaving this to one or two people with the appropriate skills and authority to make hard 'n' fast decisions will save you a lot of grief.

Step 4 - Working with partners

Remember, you may need to outsource some work. It may depend on your budget of course but in an ideal world of being given a modest budget for a web project, you will soon realise that you can't do everything and whether it be creative, testing, development or hosting, there are other people out there that specialise in these areas and can help you. 

Prepare a brief of the requirements that you are looking for. Include business objectives, feedback from content owners on sitemaps, layout etc, include the research, wireframes and the purpose of your website. Don't just include details about brand or creative - vendors will need to understand your online strategy and business needs - not just your brand. 

So, in preparation for a website redesign:

• Do you need a redesign of the website or are you really after a content or sitemap redesign?
• Research and understand what your users, like, don't like and would like to see improved in your site.
• Prepare a team of people with appropriate skills who can work in a team and work under pressure (towards the end, it can often get full on).
• Realise your skill strengths & weaknesses and prepare a brief to select partners who can assist you to fill the gaps.

Coming Up Next: EPISODE 2 Plans and Pictures - preparing the IA, content and page design.

Agile - buzzword, benefits and business buy-in

I have been involved in web development for around 5 years now but it is really only in the last 12 months that I have come on board agile projects. Many companies are now adopting the framework and is often seen as the savior in combining IT, business and vendors all holding hands to deliver a superior product.

But does agile make development a dream or a disaster?

Benefits of agile:

• Communication. When daily stand-ups, showcases and retrospective meetings are all utilised, the value of having the project team be aware of all issues, risks, blockers etc. is fantastic. Never before has a few simple concepts allowed business stakeholders such as myself to have such high visibility to what developers and business analysts are tackling on a daily basis.
• Flexibility. This can be either effective or a nightmare for agile development, depending how it is managed. In terms of business requirements and more so for user interface design, you don't need all the answers up front. With web and UI design evolving so rapidly, front ends can be designed iteratively to make use of trends and best practice. It also allows usability testing since working UAT versions of your project are usually available.

Disadvantages of agile:

• Business participation. This is the killer.. If you don't have your business reps on board  and being on tap to answer questions and sign off functionality, your project will struggle. Since agile works on development, test, development, test - having stories linger around simply slows down velocity and above all frustrates the developers and testers. Fair enough they might not be able to give you all of their time if your project isn't their sole focus (I have been guilty of getting slammed on other work and not following up questions that delay testing) but explaining to them the benefits of daily communication is key - which i'll get too.
• Stakeholders not in agile mode. Whilst there may be times that stakeholders such as external vendors don't have to operate in an agile form, from my experience, its best to get them on board. There have been instances where vendors have dumped deliverables into your inbox which are completely out of whack to what you need because a) due to the benefit of agile, your design/build may have shifted direction or b) since they don't get the daily update or are proactively involved in the project, they become detached. Vendors should make an effort to be available and flexible too. After all, your paying them more often or not.
• Expectations of go live. While there's flexibility in designing & building under agile, it can be a challenge to get firm go live dates. Whilst some may not mind, those pesky managers expect hard-line dates as above all - your website or application needs to sell, acquire, retain, convert and numerous other functions that lead to one thing: $$$

Working in a business environment with an IT background has allowed myself to get an interesting perspective on IT development.Whilst you love to build websites and apps that are beautifically designed, intuitive and have had extensive usability testing.. the reality is, most people in the business world don't have the same passion or honestly don't care about these things.

Your completed product is simply technology that allows your employer to make money.

What IT colleagues forget is that product/marketing managers - usually the customers of the web app being built have profit and loss driven targets in their jobs. They aren't reviewed on how many well built IT systems are made for them....they are reviewed on how much cash they bring in.

Tips on how to get better business buy-in for agile development:

• Focus on the tangible benefits of agile. You are asking for a lot of time from a business rep so explain that their involvement will give them a much higher quality web app. Look for case studies out there from well known companies on how agile worked for them. 
• Explain how they can user test easily. Whilst promoting usability and user centered design to business reps is a topic in itself, explain how you will get access to a working prototype from start to finish which you can then take around to colleagues, friends etc. to test. By identifying errors/issues early on, they can be tackled swiftly to deliver a usable product.
• If they come for the ride - they get flexibility and of course less documentation. Moving away from massive requirements documents into storycards may interest business reps and by using other agile elements like personas, it allows them to understand who and how their customers will interact with what is being built.

Social Media: It's all about baby steps

Whilst it was soooo 2009, I still seem to get asked by friends and work colleagues about social media - 'what is it?' 'Is it just setting up a corporate Twitter account?' and 'What can I do with SM to help me bowl over my sales/job targets?

There are endless definitions of social media, with the most common being the 'creation of dialogue between a business and its customers via technology.' I recently read a great quote that said social media is now a catalyst for 'word of finger' as oppose to word of mouth. 

This is now very true as in this day in age, if a customer wants to complement or whinge about a company they can ring the call centre, (press 4 to complain....) write a letter to the company (write a what?) compose an email that may end up in the inbox of 'the newbie' to reply to or...jump onto twitter and let rip.

Now of course every man and his dog now utilises social media with some great and not so great success stories but if you're under pressure to get into the SM arena, where do you begin?

• Is your company looking to just bypass legal departments and blab to the world in 140 characters? (contrary to belief, the legal ramifications of SM are far greater online rather than offline, simply put, you can't undo anything on the web...not quickly anyway)
• Are blogs just a more trendy medium for companies to casually mingle among their customers (yet a lot of the time, disable customer feedback to posts or just ramble on about brand values?) 

So what are your objectives for getting into SM? If it is just to jump on the bandwagon or that you think its the 'in' section of marketing to get into..think again. Like most things, anyone can create a run of the mill marketing campaign, but only few can create one that lingers on forever and rolls in the cash and/or brand recognition.

If you're looking to get your business into SM, follow these simple steps to ease your way into a solid SM strategy:

Step 1: Just Listen First..

There are a number of great tools out there, my favourite for the moment being TweetBeep that searches the world of twitter and sends an email with tweets related to your chosen keywords. You can do this for Google etc. as well for news and blog posts. This allows you to actually get first hand, uncensored feedback from your customers. It's free insight and can often alert you of issues much faster than via a survey or market research.

This simple process can lead to continuous product improvement, enhanced customer experience, simply allow you to really know what customers think of you or be alerted of brewing public relations storms.

Step 2: Start to talk back but focus on customer service, not marketing

Whilst its very tempting to create the obligatory Facebook and Twitter pages for your company and push out the latest specials every hour...customers don't care. The most popular social media apps are used by users for social purposes, they are there to check what their friends are doing and to also tell the world they just cooked a piece of toast. Users aren't interested in reading something they can easily read in a newspaper.

Instead of flogging specials, respond to tweets that users have posted using your official Twitter/Facebook account. Just remember a few things when replying:

• Who ever is replying should know the response context blindfolded. Eg. if a customer is complaining about a product, run your response by someone in your product area and understand the procurement & sales process so you can give a concise but correct answer
• Know your boundaries - If someone is complaining about their superannuation - make sure your author is actually qualified to give advice or a solution
• Remember Privacy - Never ask for personal details etc. over SM channels. Always give generic advice and also include an appropriate call to action so the user can follow this up utilising a secure channel. (It's also good to ensure you have a good customer relations page on your website so you can easily post a shortened url link in your post)

Step 3 - Use the power of SM and user generated content to enhance your online marketing

There have been some great uses of social media driven websites to entice user input such as makeofficebetter.com (which isn't up anymore) that allowed users to make suggestions to improve Microsoft Office. 

Customers enjoy giving tips to a business that is willing to listen to them and if you can demonstrate that you have taken their feedback on board, you'll go a long way with your customers.

If you have a campaign out there for a particular product or service, think of reasons of how any why users would respond to your product and then incorporate that into your campaign call to actions. That way, apart from the usual push brochureware content, users can actually respond to you which creates better brand recall and most of all, enhances conversion for a sale.

Facebook - Under the knife...again

Another month, another user interface change to Facebook...

Logging on to my social comfort pillow, I am hit with a splash page of another redesign:

http://www.facebook.com/sitetour/homepage.php

Now I am all for optimising the designs of websites and applications for users but there were a few questions that popped into this inquisitive noggin when logging on:

• Considering the backlash by users for most Facebook redesigns, where do they get their usability testing feedback from?
• Did they ask real Facebook users to test the new design? If so who?
• Why don't they give us a heads-up that they are redesigning Facebook instead of just launching?
• For the users who aren't fans of the redesigns, why not let us know how you discovered the problems in the first place (for 90% of users, they'll get used to an average design on a loved website cause 'its easier')

and the big question...

• Since Facebook is free to users, should they just be able to change what they want when they want?

In previous experience, communicating a redesign is key and often more important than the redesign itself. If you have an avid user base of a web application or simply a high traffic website, your users are often habitual; they check in everyday to see what's new, they use widgets and applications everyday. 

What's the theme here?.. these users know where to find the content and they know where to locate the application they want to use because they usually only spend 5 minutes at these sites to 'check-in.' They don't want to spend 2 of those 5 minutes learning a new design, unless it allows them to do twice as much in those 5 minutes next time they come back.

Changing websites/applications requires communication. If you let users know that you are redesigning, let them see screen shots of the new design and if it is CSS based, why not offer a trial view?

It is especially important that if you are redesigning a website/app that either stores private information or is a habitual website that users visit everyday, you need to let users know well in advance. In a world where users need to be aware of phishing and compromised websites, users shouldn't have to go out of their way to ensure the site they are using is legitimate, just because a redesign was launched without communication.

I was involved in a redesign of a customer facing application a few years ago and we gave just over 2 months notice, which I thought was enough. We did screenshots, we did FAQs and we briefed our support staff. We thought we had done everything...

Catch is, we had a high subset of users who ignored or just simply didn't see all that hard work I had poured into a pre-launch communication and simply went..'What the **** happened to the website?' It can be very frustrating to you and other people that had practiced what they preached in terms of letting users know after spending months redesigning the site. 

When entering a website / application redesign:

• Incorporate a communications plan early into the project, figure out who needs to know
• Let customers know about the redesign as early as you can (ensuring your design is close to or fully signed off, don't tell the world about a design that gets carved up in usability testing)
• When communicating the change, say why you are redesigning, you have the feedback, you should have the usability testing to backup the feedback
• Give them a chance to view the redesign or even better, play with the design before launch
• Give them an approximate date of launch
• Give them a chance to provide feedback, even though may not have the time or resource to take it on board straight away. From experience, there are many Joes on the street that are willing to help you out in improving your website and hey, it's free...