2. Designing the User Experience
Evaluating designs
A test of effective design for usability is dependent on three areas:
• Effectiveness: can users complete their tasks correctly and
completely?
• Productivity (efficiency): are tasks completed in an acceptable length
of time?
• Satisfaction: are users satisfied with the interaction?
3. Elements of site design
Nielsen (2000) structures his book on web usability according to three
main areas, which can be interpreted as follows:
1. Site design and structure – the overall structure of the site.
2. Page design – the layout of individual pages.
3. Content design – how the text and graphic content on each page is
designed.
4. Site design and structure
There are some basic factors that determine the effectiveness of an e-
commerce site. These factors are:
• Coherence: simplicity of design, easy to read, use of categories (for
browsing products or topics), absence of information overload,
adequate font size, uncrowded presentation.
• Complexity: different categories of text.
• Legibility: use of ‘mini home page’ on every subsequent page, same
menu on every page, site map.
5. • There is an example of research into website design factors supports
the importance of design. Fogg et al. (2003) asked students to review
sites to assess the credibility of different suppliers based on the
website design. They considered these factors most important:
6.
7. In the following coverage, we will review the general factors that
designers consider in designing the style, organisation and navigation
schemes for the site.
• Site style
• Site personality
• Visual design
8. Visual design
Despite modern browsers and broadband access, graphic design of
websites still represents a challenge since designers of websites are
severely constrained by a number of factors:
• The speed of downloading graphics
• The screen resolutions of the computer
• The number of colours on screen
• The type of web browser used
• Different access devices
9. Mobile design requirements and techniques
These are five common options for mobile site development t
identified by Thurner and Chaffey (2013):
A. Simple mobile site (different content).
B. Screen-scrape (same content).
C. Responsive design (same content, different mobile styling).
D. HTML5, PWAs and AMPs (same content, different mobile styling).
E. Adaptive design (potentially different content, different styling on
different mobile devices).
These are not mutually exclusive – for example, an HTML5 site can
typically offer adaptive and responsive design too.
10. Mobile site design option A. Simple mobile
site
The quickest method of creating a mobile site is to create a completely
separate mobile site on a domain http://m.company.com that has a
different design, build, hosting and content. This option may be
appropriate for very small businesses looking for a simple mobile site
that they don’t update frequently, but we would advise this is not a
viable long-term option for most companies for these reasons:
• updates to content have to be duplicated across each site;
• different tools and resources are often needed to manage each site;
• future updates to styling have to be duplicated too;
• it may not give a consistent brand experience for users.
11. Mobile site design option B. Screen-scrape
Screen scraping is the process of collecting display information from a
'screen' (typically a webpage) to use elsewhere or to perform actions
that the user would normally carry out. But the technology and ethics
behind screen scraping has made its usage quite controversial.
12. Mobile site design option C. Responsive
design
• Mobile Responsive design
includes scaling the page
components and content of the
website according to the screen
size of the device and
reformatting the contents to be
more user-friendly as the screen
size is reduced.
13. Mobile site design option D. HTML5, Progressive
Web Apps (PWAs) and Accelerated Mobile Pages
(AMPs)
• HTML5
HTML5 is the latest standard of Hypertext Markup Language, the code
that describes the structure and presentation of web pages. It's made
up of three codes: HTML, which keeps the structure; CSS, which affects
the presentation; and JavaScript, which creates interactive effects
within web browsers.
14. • Progressive Web Apps
A website development technique that combines the benefits of web
and mobile apps, enabling users to install web apps to their home
screen, receive push notifications and potentially work offline.
• Accelerated Mobile Pages (AMPs)
Accelerated Mobile Pages (AMP) is an open source project created to
improve the performance of web pages for mobile devices. The project
was spearheaded by Google and Twitter. The technology behind AMP
enables lightweight pages that load more quickly for smartphone and
tablet users.
15. Mobile site design option E. Adaptive design
So, when you open a browser on the desktop, the site chooses the best
layout for that desktop screen; resizing the browser has no impact on
the design. Some sites have been quick to embrace adaptive design.
Adaptive design has multiple fixed layout sizes. When the site detects
the available space, it selects the layout most appropriate for the
screen.
16. Mobile app development and personalization
requirements
Mobile App
A mobile application or app is a computer program or software
application designed to run on a mobile device such as a phone, tablet,
or watch. Apps are available for download from app stores hosted by
the mobile operating systems (e.g. iTunes for iOS, Google Play™ for
Android, Microsoft App Store, BlackBerry® App World).
17. Differences between mobile app design and
development
There are some key differences to consider:
• Context of use is different, with mobile apps often accessed ‘on the go’ in
expectation that using the app will be quick.
• Separate versions need to be created for the two main alternative device
operating systems, which have their own store (Google Play for Android OS and
Apple App Store for Apple iOS).
• Each operating system has standard design elements, for example for form fields
and buttons, which means that less creativity is possible within the interface.
• Mobile operating systems tend to be updated more frequently than desktop
operating systems, meaning that more updates are required and app makers
receive reviews for each version, thus creating more of a challenge of keeping up
to date.
All of these combine to typically give a simpler, more functional design for mobile
apps.
18. How IoT, VR and AR experiences will integrate
with M2M interactions
• Internet of Things (IoT) A network of objects and devices at home
and at work providing sensors and connectivity that enable them to
be monitored and exchange data with other systems.
• Machine-to-machine (M2M) These connections include home and
office security and automation, smart metering and utilities,
maintenance, building automation, automotive, healthcare and
consumer electronics.
19. What about the marketing applications of connected products? These
are commonly talked about in these ways:
• Products as media
• Products as a service
• Products as connected ecosystems
20. Virtual reality and augmented reality
• Virtual reality (VR)
Virtual reality headset and software technology creates immersive
three-dimensional spaces that simulate a user’s physical presence in a
virtual or imaginary environment.
• Augmented reality (AR)
In contrast to VR, augmented reality supports and enhances real-world
interactions. For example, retailers can enable consumers to try on new
clothing or glasses using AR devices.
