Part of the IDM Professional Diploma in Digital Marketing from The Institute of Direct and Digital Marketing: The IDM
Delivered by Katrina gallagher of Digitangle.co.uk March 2014.
VIP Call Girls Dongri WhatsApp +91-9833363713, Full Night Service
Principles of Website Design - Customer Experience and Usability IDM
1. IDM Professional Diploma in
Digital Marketing
Principles of Web Design
Customer experience and usability
Presented by Katrina Gallagher of Digitangle Ltd
Learning objective: Understand the different facets of web
design needed to create an effective customer experience
and business returns.
2. Schedule for this session
11.30
11.45
11.55
12.00
12.05
12.10
12.15
12.20
12.25
12.45
12.55
Introductions
The principles of effective website design for marketing
Briefs for website creation and enhancement
Reviewing agency creative for sites or microsites
Alternative approaches to website design
Usability and accessibility
Information architecture
Principles of effective website design
Persuasion design principles
Discussion: Examples
Questions & your actions based on today.
6. Reviewing agency creative
for sites or microsites
•
•
•
•
Objectivity
Appropriate to the stage of the project
Constructive, specific feedback
Clarity of communication and record keeping
•
Appropriate stakeholders involved
http://clientsfromhell.net/
7. Alternative approaches to
website design
Flash,
HTML5,
SEO/PPC
Landing
pages
JavaScript,
PHP, ASP
eCommerce
User centred
design
Templates and
Opensource
Conversion
rate
optimisation
8. OpenSource
• What is OpenSource software?
http://opensource.com/resources/what-open-source
• Pros
• Don’t spend time/money reinventing the wheel.
• Not tied in to one agency/developer.
• Cons:
• May be inappropriate for the purpose (e.g. very
complicated/integration with offline systems or at the other end of
the spectrum – could be overkill if just a landing page is required)
• Some of the main platforms:
• WordPress content management system - http://wordpress.org
formerly blog software.
• Magento eCommerce - http://magento.com/ now owned by eBay
• Joomla - http://www.joomla.org/ popular, a variant of Mambo.
• Drupal - https://drupal.org/ powerful, began as
a message board.
11. Templates
Start with a design that is close to your
desired outcome. Then customise it with
the help of a designer/developer.
• http://themeforest.net
• http://youtemplates.com
• http://www.templatemonster.com
12. Usability and accessibility
Consider:
• Intuitive design
• Users with varying abilities
• Different devices, browsers and screen sizes
Tools:
• http://validator.w3.org/unicorn/
• http://www.cynthiasays.com/
13. Usability and accessibility:
Tools & Resources
Test in different browsers:
•
http://browsershots.org/
•
http://www.browserstack.com/
•
https://browserlab.adobe.com/en-us/index.html#
•
https://saucelabs.com/
Research on the effectiveness of carousels (homepage banner sliders):
•
http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496
•
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
•
http://www.nngroup.com/articles/auto-forwarding/
What draws people’s attention:
•
http://www.nngroup.com/articles/photos-as-web-content/
•
http://www.webdesignerdepot.com/2013/11/4-essential-ux-rules-taught-by-eye-tracking-research/
•
Eye tracking: https://uxmag.com/articles/quantitative-research-and-eye-tracking
Collect and analyse user feedback on screens or mock-ups:
•
http://verifyapp.com/
•
http://fivesecondtest.com/
Split testing:
•
http://whichtestwon.com/
•
https://qualaroo.com/
•
https://www.optimizely.com/ab-testing
•
https://support.google.com/analytics/answer/1745147
16. Principles of effective
website design
1.
2.
3.
4.
5.
Clarity
Visual appeal and conventions
Visual hierarchy (prominence of
important information)
Maintain attention:
• People (particularly eyes)
• Contrast and colours
• White space
• Novelty.
Calls to action.
19. Persuasion design principles:
Reciprocation
Cultural anthropologists argue that the “web of indebtedness” is the
foundation for such diverse human practices as the division of labour,
exchange of goods & services, evolution of experts, & other
interdependencies that connect humans into more efficient cooperative units.
We are trained from an early age to comply with the rule of reciprocity.
Influence: the psychology of persuasion
http://www.media-studies.ca/articles/influence.htm
20. Persuasion design principles:
Commitment/Consistency
“Once we have publicly committed to something or someone, then we are so
much more likely to go through and deliver on that commitment”
Ask visitors to commit to something small and usually free-of-charge, e.g. guide
or a whitepaper. This increases the likelihood that they will eventually see
themselves as customers, which allows you to follow up with an offer to buy
their products or join their services.
http://conversionxl.com/how-to-use-cialdinis-6-principles-of-persuasion-toboost-conversions/
21. Persuasion design
principles: Social Proof
1.
2.
3.
4.
5.
6.
7.
Reciprocation
Commitment
Social Proof
Authority
Scarcity
Framing
Salience
http://www.youtube.com/watch?v=uuvGh_n3I_M
People look to others for cues
on what is acceptable, what
they should do.
Consider:
• Customer reviews
• Video testimonials
• Enabling sharing
• Social media stats
• “People who looked at this
bought…”
• Highlighting most popular
22. Persuasion design
principles: Authority
“We feel a sense of duty or
obligation to people in
positions of authority.”
Key principles of influence by
Robert Cialdini
Consider:
• Celebrity endorsements
• Logos of well known
customers
• Research, statistics, quotes
• Accreditations, awards
23. Persuasion design
principles: Scarcity
Products appear more
attractive when their
perceived availability
is rather limited.
• “10 people viewed
this holiday in the
past hour.”
• Time limit
(countdown)
• Unit limit
• Buy now, use later
24. Persuasion design
principles: Framing
“ People aren’t very good at estimating the
absolute value of what they are buying.
People make comparisons, either against
the alternatives you show them or some
external benchmark.”
http://uxdesign.smashingmagazine.com/2
010/11/29/persuasion-triggers-in-webdesign/
•
•
•
•
Don’t confuse with too much choice
Consider the order
Highlight the favourite/best value
The Goldilocks effect
More examples:
http://ui-patterns.com/blog/Persuasivepurchase-behaviour-Understanding-thepower-of-the-Goldilocks-Effect
25. Persuasion design principles:
Salience (Relevance)
“The seducible moment can happen only when users have completed at least
part of their original quest. It’s difficult to lure users away until they’ve reached
this (self-defined) point; before that, they will simply ignore distractions.”
http://www.uie.com/articles/seducible_moments/
http://www.uie.com/articles/seductive_design/
Consider:
• Targeting and segmentation
• Remarketing
• Upselling/cross selling
• Removing distractions
36. Questions & Actions
• Some questions for you to recap on
what we’ve learned today.
• What will you apply based on today?
• Do you have any questions?
37. Thank you for listening!
For further information, or follow-up questions after this
event, please contact:
Jessica Bowskill
Course and Events Coordinator
jessicabowskill@theidm.com
020 8614 0207
The Institute of Direct and Digital Marketing
1 Park Road, Teddington, Middlesex TW11 0AR, United Kingdom
+44 (0)20 8977 5705
www.theidm.com