User Experience Design resonates your target users’ emotions and tries to make things very easy for them to understand. Everyone can be a website developer but what differentiates a top-notch website developer from others is his ability to capture and influence his website users via designs. Learning website design is one thing but making your users comfortable to take your predefined action is the crucial part of it.
A lot of websites get thousands of visitors per month, how do you convert your visitors to win sales’ deals with the experience they get via the structure of your website? Yes, it’s always great to keep it simple but in process, is it informative. Does it add value to your target audience?
A lot of web designers make the serious mistakes of depending on website templates/themes, unfortunately most of these templates aren’t user-experience-oriented. Despite the fact that as a web developer, you may not like to code and ofcourse, possibly you may not know how to code. But you can’t let that be your weakness, don’t bring down your esteem at all! User experience design neither lies in your coding ability nor your ability to customise a template. But it lies in your marketing and sales capability, your competency to insert yourself within the position of target users and speak to yourself like such via designs.
You don’t design for robots for humans, so your design should be human-voiced. Designing a great functional website demands you speak to humans who access your website using both computer and mobile devices, hence converting them to solve their problems. Targeting deals with gaining maximum insights via thorough market research, designing deals with utilizing your sales/marketing competencies while taking advantage of relevant applications and converting deals with utilizing appropriate “call to actions”.
From this post, you’ll learn:
- To think about web projects with a UX mindset
- How to create usable, amazing and enjoyable experiences for desktop and mobile users
- The nuts and bolts of implementing UX strategy step by step
- About a variety of awesome UX tools.
Let’s Understand What User Experience (UX) Design is all about:
User Experience deals with all the experiences your target users have when interacting with your digital tool. It deals with the overall satisfaction they get as they interact with your online assets. User Experience Design is the process of creating and mapping out a design as a touch point which interacts with your target users.
Good UX is an excellent way to differentiate yourself in the market and give yourself a competitive advantage. If your online touchpoints are easy, fun, intuitive and awesome to use, your customers won’t have any reason to look elsewhere. Good UX research and design allows you to find the best solution for your needs. Every business, website and online service is unique in some way, which means that the way it is set up must be unique too.
Basic Principles of a User-Experience Design
Business owners, marketers and web developers frequently focus on creating the web platforms they want and think are best, instead of really interrogating what the user needs. Often, the performance of web assets is compromised when the design process is driven only by your business needs at the expense of what the user needs.
When designing for the user, you need to ask the following questions:
- Who is the user?
- What are the user’s wants and needs from your platform?
- Why is the user really coming to your website?
- What are the user’s capabilities, web skills and available technology?
- What features would make the user’s experience easier and better?
The answers to these questions will come out of user market research. Of course, many users may not know exactly what their wants and needs are! It is your job to discover these through research and interpret them in the best way possible.
Usability and conventions
Usability is about making the digital assets we build easy and intuitive to use. One of the most important aspects of usability involves sticking to standard conventions, which are simply common rules or ways of displaying or structuring things on the web.
Popular conventions include:
- Links that are blue and underlined
- Navigation menus at the top or left of the web page
- The logo in the top left hand corner, which is linked to take the user back to the home page
- Search boxes placed at the top of the page, using standard wording such as ‘search’, or a magnifying glass icon.
Ensure that all website elements (such as menus, logos, colours and layout) are distinct, easy to find and kept consistent throughout the site. It’s useful to consider usability guidelines to ensure that your website is on track.
MIT Information Services & Technology provides a usability checklist online at http://ist.mit.edu/usability.
In UX projects, the simpler option is almost always the better, more user-friendly one. Though your service or product may be complex, that doesn’t mean your customer-facing web portals need to be. In fact, it’s important to remember that most customers want only the most basic information from you, such as “What is this?” and “How does it work?”
Simplicity can mean several things:
- Lots of Empty Space: In design terms, this is referred to as negative or white space (though, of course, it need not specifically be white). Dark text on a light background is easiest to read. In general, the more effectively ‘breathing room’ is placed between various page elements, lines of text, and zones of the page, the easier it is for the user to grasp where everything is.
- Fewer Options: When users have to make choices, there is a lot of psychology at play – worry about making the right choice, confusion and doubt over the options, indecision paralysis and more. Studies have found that people faced with fewer choices generally choose more quickly and confidently, and are more satisfied with their decision afterwards (Roller,2010).
- Plain Language: Unless your website is aimed at a highly specialized technical field, there’s usually no need to get fancy with the words you use. Clear, simple, well-structured language is the best option when creating a great UX.
- Sticking To Conventions: As we’ve said before, conventions are excellent shortcuts for keeping things simple for users. There’s no need to reinvent the wheel and try to teach your users a whole new way of navigating a website.
Credibility means how trustworthy and legitimate something looks, and is a big consideration for web users when deciding to use your website or not.
Here are some of the cues that visitors use to determine the credibility of a website:
- Looks – does it look professional and beautiful?
- Prominent phone numbers and addresses where they are easy to locate – this assures the visitor that there are real people behind the website, and that they are in easy reach.
- Informative and personal ‘about us’ – your customers want to see the inner workings of a company and are especially interested in learning more about the head honchos. Consider including employee pictures and profiles to add personality to the site.
- Genuine testimonials – this is a great way to show potential customers what your current customers have to say about your organisation. Trust is vital, and this is one way to encourage it.
- Logos of associations and awards – if you belong to any relevant industry associations or have won any awards, feature them. Not only does this go a long way towards establishing your credibility, but it will show that you’re at the top of your game, a notch above the competition.
- Links to credible third-party references or endorsements – this is a way to assert your credibility without tooting your own horn.
- Fresh, up-to-date content – a news section that was last updated a year ago implies that nothing has happened since (or that no one cares enough to update it).
- No errors – spelling and grammar mistakes are exceptionally unprofessional, and while the large majority of readers may not pick them up, the one or two who do will question your credibility. This also extends to broken links, malfunctioning tools, and interactive elements that don’t work as advertised.
Universal Mobile UX Principles
Mobile should not be an afterthought, in UX or any other digital endeavour – it should be prioritised in strategy, design and implementation. The ‘mobile first’ movement supports this notion, and aims to create mobile user experiences first, and then adapt these for the web (instead of the other way around). Designing this way has many advantages, since the principles of good mobile UX works just as well on full sites – simple designs, linear interfaces and clear buttons and features.
There are three main approaches to creating mobile-accessible content:
- Mobile websites (called mobi sites)
- Native and web applications (called apps)
- Responsive websites (websites that adapt to the device).
Whether you’re designing a mobi website, an app or a nifty responsive site, there are some principles you should always keep in mind:
- Simplify: Show information only when it’s needed. While you should ensure that the mobile asset provides all the same information as the desktop equivalent, this doesn’t need to be presented in the same format or volume.
- Reduce loading time: Try to keep content and actions on the same page, as this ensures better performance as there are fewer page loads.
- Encourage exploration: Especially on touchscreens, users like to browse elements and explore. This makes them feel in control.
- Give feedback: Ensure that it is clear when the user performs an action. This can be achieved through animations and other visual cues.
- Communicate consistently: Ensure that you deliver the same message across all your touchpoints, for example, by using the same icons on the website as you would on the mobile app – this prevents users from having to relearn how you communicate.
- Predict what your user wants: Include functionality such as autocomplete or predictive text. Remove as much manual input as possible to streamline users’ experience.
Step-by-step Guide to UX Design
The UX design process happens before, during and after the website is being built. It ties in very closely with strategy and research, web development and design, SEO, content strategy and creation, and later conversion optimisation. (Referencing: E-Marketing Textbook By Quirk Group)
STEP 1: CONDUCT RESEARCH AND DISCOVERY
Step one involves conducting detailed research on the business, the users, and the technology involved. Doing this lets UX practitioners know exactly what they need to do to address the needs of the business and audience. This will generate a lot of data that needs to be filtered and organised.
STEP 2: CREATE THE SITE’S BASIC STRUCTURE
Information architecture (IA) is about managing information – taking a lot of raw data and applying tools and techniques to it to make it manageable and usable. The purpose of this is to make communication and understanding easier by putting information into logical, clear and familiar structures.
The information architecture of a site is crucial to usability. Categories and pages should flow from broad to narrow. An intuitively designed structure will guide the user to the site’s goals. IA operates on both the micro and the macro level – it covers everything from the way individual pages are laid out (where the navigation and headings are, for example) to the way entire websites are put together.
Most websites have a hierarchical structure, which means there are broad, important pages at the top, and narrower, more specific and less important pages further down. Hierarchical structures can either be very broad and shallow (many main sections with few lower pages) or very narrow and deep (with few main sections and many pages below). It’s up to the UX practitioner to find the right balance of breadth and depth.
STEP 3: ANALYSE CONTENT
If you’re working on a website that already exists, it will be populated with a wide variety of content. In this case, you need to perform a content audit, which is an examination and evaluation of the existing material. If the website is new – or if you plan to add new content to an existing website – you need to put together a content strategy. This is a plan that outlines what content is needed and when and how it will be created. There’s no single template or model for this – every content strategy will be unique.
The content strategy is largely the responsibility of the strategy, copy and concept teams, but the UX practitioner needs to get involved in a few key roles.
The points that UX needs to address are:
- What the site should achieve: Naturally, the content should work towards achieving the site’s and business’ objectives.
- What the user wants and needs: By conducting thorough user research you should be able to answer this question. Provide only content that will add real value to the user.
- What makes the content unique, valuable or different: Content needs to provide value and engagement to the user.
- The tone and language used: You need to give thought here to the tone (fun, light, serious, and so on), register (formal or informal) and style you will use across your content. Make sure this is consistent across text, images, videos and other content types.
Principles of Creating Content
There are three key points you should consider here:
Content needs to be written so that users can find the information they need as quickly as possible. Copy can be made more easily readable by:
- Highlighting or bolding key phrases and words
- Using bulleted lists
- Using paragraphs to break up information
- Using descriptive and distinct headings.
On the page, use an inverted pyramid style for your copy. The important information should be at the top of the page, to make for easy scanning. The heading comes first, the largest and boldest type on the page. The subheading or blurb follows this, and then the content is presented in a descending scale of importance.
Above all, the content on the page must be relevant to the user and the purpose of the page itself. If a user clicks to read about a product but ends up on a page with content about the company, their experience is going to be tarnished.
STEP 4: CREATE A SITEMAP
In UX terminology, a sitemap is the visualised structural plan for how the website’s pages will be laid out and organised.
To create the visuals for your sitemap, you can follow this process:
- Start by defining your home page – this should be the top item in the hierarchy.
- Place the main navigation items below this.
- Start arranging your pages of content below the main navigational items, according to the results of your user testing and insight, and your information architecture structure.
- Continue adding pages below this until you have placed all your content. Make sure that every page is accessible from at least one other page – it may seem obvious, but you’d be surprised how often this is overlooked!
- Define any other static navigation elements (footer, sidebar, header navigation, search tools). Place these in your diagram in a logical place (possibly branching off directly from the home page, or as separate blocks).
Figure: A Typical Example of a Site-Map
STEP 5: BUILD THE NAVIGATION
The navigation should guide users easily through all the pages of a website; it is not just about menus.
Successful navigation should help a user to answer four basic questions:
Where am I?
Navigation should let the users know where they are in the site. Breadcrumb links, clear page titles, URLs and menu changes all help to show the user where he or she is. The larger your site is and the more levels it has, the more important it becomes to give your users an indicator of where they are in relation to everything else on the site. This helps the users to understand the content of the page that they are on, and makes them feel more confident in navigating further through the site.
How did I get here?
Breadcrumb navigation often indicates the general path a user may have taken. In the case of site search, the keyword used should be indicated on the results page.
Where can I go next?
Navigation clues let a user know where to go to next – such as ‘add to cart’ on an eCommerce site, or a contextual link that indicates ‘read more’. The key is making the options clear to the user.
How do I get home?
It has become convention that the logo of the website takes the user back to the home page, but many users still look in the main menu for the word ‘home’. Make sure that they can get back to the beginning quickly and easily. Test the designs against users’ ability to navigate home. Never design based on your own assumptions.
STEP 6: CREATE THE LAYOUT
A web page can be broken down roughly into four zones: Each of these typically contains certain types of elements and content, such as:
- The header, at the top of the page – used to identify the site and provide basic tools:
- Logo or identifying mark (possibly including the brand’s tagline)
- Main navigation
- Login feature
- Search bar
- The central content area – used to present the main content
- The actual content specific to the page – text, images, videos and more (this can be broken into several columns)
- CTAs of various kinds
- The sidebar, either on the left or the right, or sometimes on both sides – used to present secondary content and tools
- Secondary navigation bar, or other navigation features (for example, blog article archive by date)
- CTAs, including buttons and signup forms
- Additional content, like links or snippets
- The footer, at the bottom of the page – used for important but nonprominent content and resources
- Additional navigation elements.
Figure: A Typical Web Layout
The most important consideration for any page layout is the content – what needs to be included, what is the most important action or piece of information, and how can this be structured to meet the user’s needs? After all, web pages are created to support a user’s journey.
Another important consideration here is the different types of pages that make up your website. Not all page types can, or should be, structured in the same way. For example, your home page is a unique location where you want to showcase the most prominent news, offers, features or tools. The pages you use for, say, blog articles or product listings will be laid out quite differently from the home page, but will have the same structure as each other. Then you might have other page types for the login page, and an entirely different approach for your eCommerce checkout.
Wireframes are the skeletal outlines of the layout of a web page. Their purpose is to map out the placement of various elements on the page as a guide for the designer to create the visual design, and the web developer to create the code and interactivity required. Wireframes can be low fidelity (very rough and basic sketches, barely resembling the final output) or high fidelity (very detailed, complex layouts including creative elements). Any website project will have several wireframes – at least one for each template page. Capture your first ideas on paper – it’s the fastest and best way to capture good ideas.
Prototypes are a step up from wireframes, in that they are interactive. Prototypes are essentially sets of wireframes that have been linked together like a website, so that they can be navigated through by clicking and scrolling. Prototypes are excellent tools for testing the flow and function of a proposed website before diving into the costly and lengthy design and development phases – they can save a lot of time, money and effort by identifying problems and improvements upfront. Again, paper prototyping is the best method for fast, iterative UX design.
STEP 7: ASSEMBLE THE OTHER ELEMENTS
Once you’ve defined your content and mapped out the basic layout of each page, you need to add in all the extra elements that your website will need – remember that the page should only ever contain the elements a user might need to support them in their task.
These can include:
- Calls to action: CTAs can take a variety of shapes and forms, from intext links to large buttons.
- Forms: These are interactive fields where users can enter their contact details or other information, for example, to sign up for a newsletter or enter a competition.
- Search: Many sites can benefit from having a search function, both to help users navigate and to make finding specific information easier.
Calls to Action
Successful CTAs are simple, quick, clear actions that don’t require the user to do anything scary or make a commitment. They should always do exactly what they state to instil confidence and clarity. It’s all about managing the user’s expectations – do they actually go where they think they will, or perform the action they expect?
The primary CTA should usually appear above the fold to capture the attention focused here. Other CTAs can appear below the fold, and the main CTA can also be repeated lower down.
A single web page can be built around one CTA, or could incorporate a wide range of possible desirable actions. This all comes down to what the page and website overall is seeking to achieve, based on the business requirements.
When multiple CTAs are used, there should be one primary one that stands out strongly and the others should be more muted, playing a supporting role. CTAs can be differentiated through colour, shape, placement and size. The less choice, the better.
Any CTAs that can be clicked must look ‘tactile’, or touchable. This means they must stand out somehow from the background and from static elements. One approach is to make the button look like a real button, standing out from its environment. Another train of thought advocates for the ‘flat design’ approach as a more elegant and modern expression of this.
Finally, be sure not to overwhelm users with too many choices. Stick to one central CTA per page, making it obvious to users what the main goal, action or outcome of the page is.
Forms are extremely useful tools for gathering user information and encouraging interaction on the site. Users are generally familiar with them and have some experience filling them out, and there are lots of web conventions that govern how these should be set up. As a general rule, the shorter you can make your form, the better. The fewer fields a user has to fill out, the more likely they are to complete the process.
Steps and sections
Simple forms with only a few fields can be assembled as a series of boxes. For forms that are longer, for example, those in eCommerce checkouts or complex registration processes, it makes sense to split them up into manageable portions – and manage a user’s expectations by clearly indicating what the next step is.
Simplicity is a key consideration – forms should be as short and clear as possible. The effort must be equal to the reward gained. All of the fields included must be clearly relevant to the purpose of the form, otherwise the user may get confused or suspect that you are harvesting their information.
It is a good idea to include help for users filling out forms. This is especially the case where a specific field requires inputs to be entered in a certain way – and doubly so for password fields with special rules. Users will not instinctively know the rules associated with specific fields, so you must give plenty of guidance along the way.
Validation means giving the user feedback on the inputs they have submitted – whether correct or incorrect. Validation can happen at two points – after the user has submitted the form, or during the process of filling out the form. The latter, called ‘live inline validation’, usually results in a much better user experience as the users know that their information is correct before submitting the form.
Search has three useful functions on a website – not only does it help users to find specific things, it also serves as an essential navigation aid for larger sites, and collects valuable data from keyword research about what the user is looking for. For the most part, the way the search functions is created by the web developer, so we won’t go into any technicalities here. From the UX practitioner’s perspective, there are some important non-technical principles to bear in mind.
Search will either be the primary starting point for your site, or it will be a useful additional tool. In the former case, for example, on a large eCommerce site such as Amazon, the search tool should be positioned centrally and visibly to encourage the user to use this as the main navigational tool. In the latter case, best practice dictates that it should be in the top right corner, or easily accessible in the sidebar.
The better you can interpret what your user is searching for, the more relevant and accurate the search results can be. Google works very hard to fine-tune its search algorithm to ensure that users don’t just get what they searched for, but what they actually wanted in the first place. User research can suggest why someone would search your site in the first place, and what they would typically be looking for. Popularity and recentness of content are other key considerations.
When it comes to displaying search results, there are a few key questions to ask:
- How many results should be displayed (per page)? Ten to 20 results per page is generally a good benchmark.
- What order should results be in? Most popular first? Cheapest? Newest? Closest match? This will depend on the nature of the site.
- Can results be filtered? Some websites allow users to do a second search constrained to the results of the first one.
What happens if there are no results? If no search results are found, this should be stated clearly, followed by a list of the closest match of content to the search query – it’s quite possible the searcher didn’t know the exact term from what they are looking for or made a typo (though the site should be forgiving of these).
STEP 8: DEFINE THE VISUAL DESIGN
Before a user interacts with your carefully considered content, your excellent navigation structure and slick search bar, their first impression comes from the look of the website – the colours, graphics, and overall design elements that are used. As people are spending more and more time on the web, they are less tolerant of websites that don’t look good (and credible).
While a website is not an art installation, it is a design project, and the fundamentals of good design apply. While much of the visual design expertise will come from the graphic designer, it’s
valuable for the UX practitioner to know the following principles of visual design.
Colour has an incredible psychological effect on people. Based on our culture, preferences and learned cues, people interpret colours in very specific ways – and this can be used to inform and steer the user’s experience. When choosing the colour palette for the website, be aware of legibility and accessibility concerns. Using a lot of open or white space often makes sites appear
simple and easy to read.
The choice of images used on the website can have a massive effect on how users behave and interact on the page. You can never be quite certain which images will have the best results, so this is one area where you will need to do a lot of testing (more on that below).
Humans tend to gravitate towards and identify with pictures of other humans. We have an innate instinct to look at faces to understand a person’s feelings and mood – and we even look in the same direction as these characters, according to usability specialist James Breeze (Breeze, 2009).
STEP 9: CONDUCT TESTING
User testing means giving one or more users access to a website or prototype and observing how they behave when using it. The purpose of this is to discover problems and gain insights that can be used to improve the final product. The goal of user testing is not to eliminate each and every potential problem on a website – that’s simply not possible (especially if you consider how subjective this can be). The goal is to work towards creating the best possible experience for the user by constantly improving and optimising.
The two biggest questions around testing tend to be ‘What do I test?’ and ‘When do I test it?’ The answers are simple – test as much as possible, as often as possible, and as early as possible.
User testing follows a set process:
Formulate a Question To Test
Spend a little time nailing down exactly why you want to perform a test and what you hope to learn from it. Formulating a simple, clear set of questions to test will allow you to focus on what’s important, and will make choosing participants and techniques easier.
Choose A Test and Prepare
Once you know what the purpose of your test is, you can decide on a specific methodology to use. To choose the right one, answer these questions:
- How much time and money do I have for this test?
- What facilities are available?
- How many participants do I want to test?
- At what stage is the project?
Possibly the biggest challenge in the testing process is that of finding the right test subjects. So, how do you do this?
First of all, draw up a list of criteria that you want your subjects to fulfil – must they be men or women, of a certain age, in a certain industry, with or without children? The considerations can be endless, so limit yourself to the top three or not more than five most important ones.
Now, spread the word about the test through the most appropriate channels to this group. This can involve everything from advertising in a glossy magazine to posting on a Facebook page to chatting to some friends or neighbours. You can also pay a market research recruitment agency to find suitable candidates. The method you choose will depend largely on your budget and timeline, as well as on how many participants you want to recruit.
Once you get enough responses, you will have the chance to screen applicants. Screening is the process of filtering people into those who are suitable for the test and those who are not, because they do not meet certain criteria.
At this point, you are ready to begin testing! Tell the user what you want them to do, and let the test run. Don’t interfere!
Analysing means taking all of this existing data and transforming it into accurate, objective and useful insights. For example, your user observation study found that users tended to click on ‘contact us’ when looking for the opening times of a restaurant. It’s up to the researcher to analyse this – were the users confused by something? Was there no other obvious place to click? Were they expecting to find this information easily, but found themselves struggling and making a best guess?
Discovering the reason can then lead to possible solutions – possibly the opening hours should be placed on the home page or in the header; or perhaps they should simply be added to the ‘contact us’ page. It’s these practical outcomes that are the cornerstones of UX testing.
Reporting is the process of sharing your UX test results with the people who need them. Reports provide insights, information and recommendations by summarising the results of the testing phase, and the UX practitioner’s analysis of what happened. Ideally, the whole team should be involved in analysing the test data to encourage them to buy in to the UX process. Reporting can take various forms, from verbal discussions to professionally designed presentations. The most important consideration here is your audience and their needs.
Implementing means putting your user testing outcomes into practice. This will, of course, mean very different things at different stages of the project. If you’re testing your overall approach in the beginning planning phase, the implementation could involve taking a new direction on the project. Testing a working high-fidelity prototype may reveal that some design elements need to change.
We’ve said it before and we’ll say it again – testing is not a once-off action, it’s a constant process. Once you’ve run your test and implemented your solutions, your project can continue – but very soon you’ll need to test again. Aim to run a test every time you reach a major new stage of the project, or add something that is brand new or has raised controversy in the team. Even after the project has gone live, there is space and reason to keep testing, iterating and optimising.
GREAT UX TOOLS:
UX tools range from rudimentary (pen and paper) to highly sophisticated (web applications and tech tools). Here is a brief roundup of popular options. (Referencing: E-Marketing Textbook By Quirk Group)
- Balsamiq: bills itself as a ‘rapid wire-framing tool’ and is great for creating fun, low-fidelity wireframes and simple prototypes. It works both as a web app and a desktop download, and has built-in features for collaborating with other team members.
- Axure: is an all-purpose prototyping tool that allows you to create fully interactive wire-framed websites without needing to code anything. A useful feature is that it also generates technical specifications for developers to work from, based on the interactions and links you create in the prototyping process.
- Gliffy: is a web-based tool that allows you to create a wide range of diagrams – everything from wireframes to sitemaps to charts. It offers a free version, with a paid Pro Account that offers more advanced features. While its strength lies in wire-framing, it also creates sitemaps, which means you could have several features in one place.
- Morae: is a good place to start if you’re looking for a web-based replacement for user labs. This innovative paid-for tool allows you to research users interacting directly with your, or a competitor’s, website. The tool records video and audio of the user, and also captures their behaviour on the screen, so you can remotely watch exactly what they are doing and how they are reacting in person. The tool also allows you to prompt and interact with the user in real-time chat, track where they look on the screen, and more.