User

Experience
Design

Prof. Saurabh Mittal

GL Bajaj Institute of Management & Research

Greater Noida
 Online User Experience
‘you’ll know it when you see it’
• A standard website needs to be reliable, functional and
convenient – but a great UX website needs to be enjoyable to
use, and an experience worth sharing.
• What this means in practice for a specific website, company,
audience or context can differ, but the principle remains the
same – delivering a great experience to users, and making it
easy for them to convert to your desired goal.
• UX is the first, foundational step of an effective digital asset.
Key Terms
 User experience (UX)
• All the experiences (physical, sensory, emotional and mental)
that a person has when interacting with a digital tool.
• Online UX can be divided into two broad categories:
• The elements of the user experience
that relate to actually using the tool –
Functional UX such as working technical elements,
navigation, search and links.

• This is the bigger, harder-to-define

impression created by the tool – the
Creative UX so-called ‘wow’ factor that covers
visual and creative elements.
 • Findability –
can I find it
easily? Does it
appear high up
in the search
results?

• Usefulness – • Accessibility – can I

use it when I need it?
does it add Does it work on my
value to me? mobile phone, or on
Will I get a slow Internet
connection? Can I use
something out it as a disabled
of the time person?

UX
Qualitie
s
• Desirability –
• Credibility do I want to use
– do I trust it? Is it a
it? Is this pleasant
website experience, or
do I dread
legitimate? logging in?

• Usability – is
it easy to use?
Are the tools I
need intuitive
and easy to
find?
 BENEFITS OF UX
• Differentiate yourself market and give 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 helps 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.
 Ideal customer is a happy customer!
• People who love the experience you give them will become loyal
clients, and possibly even brand evangelists
• Get your digital tools working earlier, with much better functionality,
at a lower cost.
• Cut out features and elements that you simply don’t need, and focus
on the core user experience.
• This optimised development process leads, in turn, to sites that are
easier and cheaper to maintain, upgrade and support across multiple
platforms.
Core principles of UX design
 User-centric 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.

• Performance of web assets is compromised when the design process is driven only by

internal business needs (for instance, ensuring that each department in the company has a

space that it controls on the home page) at the expense of what the user needs.

What are the user’s

Why is the user
wants and needs
Who is the user? really coming to
from your
your website?
platform?

What are the user’s What features

capabilities, web would make the
skills and available user’s experience
technology? easier and better?
 Usability and conventions
• Making the digital assets we build easy and intuitive to use.

• Don’t make your users think: they should just do (Krug, 1997-2013).

• Sticking to standard conventions, which are simply common rules or ways of displaying

or structuring things on the web.

Popular conventions :

Logo in the top left hand

Links are blue and • Navigation menus at the corner, which is linked to
underlined top or left of the web page take the user back to the
home page

Ensure that all website

Search boxes placed at the
elements (such as menus,
top of the page, using
logos, colours and layout)
standard wording such as
are distinct, easy to find
‘search’, or a magnifying
and kept consistent
glass icon.
throughout the site.
 ‘Don’ts’
• Never resize windows or launch the site in a pop-up.

• Don’t use entry or splash pages (a page that site visitors

encounter first before reaching the home page).
• Never build a site entirely in Flash – most search engine spiders
cannot effectively trawl Flash sites, and these will not work on
many mobile devices.
• Don’t distract users with ‘Christmas trees’ (blinking images,
flashing lights, automatic sound, scrolling text, unusual fonts,
etc.).
 Simplicity
• Most customers want only the most basic information from you, such as “What is this?” and “How does it
work?”
• • 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. People faced with fewer
choices generally choose more quickly and confidently, and are more satisfied with their decision afterwards.
• • Plain language. Unless your website is aimed at a highly specialised 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. There’s no need to reinvent the wheel and try to teach your users a whole new way of
navigating a website.
 Credibility
• How trustworthy and legitimate something looks

• Looks – does it look professional and beautiful?

• Prominent phone numbers and addresses where they are easy to

locate –assures that there are real people behind the website, and in
easy reach.
• Informative and personal ‘about us’ – Customers want to see the inner
workings of a company and are especially interested in learning more
about the head honchos (Employee pictures & profiles).
• Genuine testimonials – What your current customers have to say about
your organisation. Trust is vital, and this is one way to encourage it.
 Important for Credibility
Links to credible
Logos of
third-party Fresh, up-to-date
associations and
references or content
awards
endorsements

Malfunctioning
No errors No broken links
tools, and

Interactive
elements that
don’t work as
advertised.
 Mobile UX
• Mobile should be prioritised in strategy, design and
implementation.
• Principles of good mobile UX works just as well on full sites –
simple designs, linear interfaces and clear buttons and features.
• Decide which content is most essential.

• Different device categories and models available – one estimate

puts the number of mobile phone handset models at over 6300,
running over 20 distinct operating systems (CEM4Mobile, 2011).
 Main Categories
Dumb or basic • No Internet access, just basic call and SMS functionality.
phones:
• Rudimentary mobile phones that can perform basic
Feature phones: communication functions, and possibly connect to the web,
but have limited functionality.

• powerful mini-computers that have full web access, larger

Smartphones: screens, and a wide range of functionality.

• larger versions of smartphones, usually including

Tablets: touchscreens, and are able to perform a wide range of
connectivity, lifestyle and work functions.

Other mobile • ebook readers, netbooks, portable game consoles and other
media devices such as iPods – can have a range of features
devices and varying ability to connect to the web.
 Mobile users
• Mobile users can be different from desktop users.

Goal orientated

Locally focused Time conscious

Search
dominant
 Limitations of mobile

Difficult
Small screens
inputs

Slow
Slow
connection
hardware
speeds
 Universal mobile UX principles
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).

Principles to 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. Deliver the same message across all your touchpoints. For exp. 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. Reduce manual input.
 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.
• Communication and understanding easier by putting information into logical, clear and familiar
structures.
• Categories and pages should flow from broad to narrow.

• 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.
Website Structure
 Analyse content
• Website already exists: Wide variety of content. Need to perform a
content audit
• Website is new / plan to add new content to an existing website :
Put together a content strategy. This is a plan that outlines what
content is needed and when and how it will be created.
• 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.
 Analyse content
• What the site should achieve. Achieving 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. Tone (fun, light, serious, and so on),
register (formal or informal) and style for content.
• Make sure this is consistent across text, images, videos and other
content types.
 Principles of creating content
Structure Hierarchy Relevance
• Content needs to be • On the page, use an • Content must be relevant
written so that users can inverted pyramid style to the user and the
find the information they for your copy. purpose of the page
need as quickly as • The important itself.
possible. The chapter on information should be at • If a user clicks to read
Writing for Digital will the top of the page. about a product but ends
cover this in more detail. • The heading comes first, up on a page with
• Copy can be made more the largest and boldest content about the
easily readable by: type on the page. The company, their
• Highlighting or bolding subheading or blurb experience is going to be
key phrases and words follows this, and then the tarnished.
• Using bulleted lists content is presented in a
• Using paragraphs to descending scale of
break up information importance.
• Using descriptive and
distinct headings.
Create a sitemap
 Build the navigation
• The navigation should guide users easily throu gh all the pages of a website; it isnot just about menus.
1. Where am I?
• 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.
2. 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.

3. 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.

4. 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.