Principles of Website Design - Customer Experience and Usability IDM
-
Upload
digitangle-ltd -
Category
Marketing
-
view
113 -
download
3
description
Transcript of Principles of Website Design - Customer Experience and Usability IDM
Principles of Web DesignCustomer experience and usabilityPresented 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.
IDM Professional Diploma in Digital Marketing
Schedule for this session11.30 Introductions11.45 The principles of effective website design for marketing11.55 Briefs for website creation and enhancement
12.00 Reviewing agency creative for sites or microsites12.05 Alternative approaches to website design12.10 Usability and accessibility12.15 Information architecture12.20 Principles of effective website design12.25 Persuasion design principles12.45 Discussion: Examples12.55 Questions & your actions based on today.
Introductions
• Your name• Organisation • Experience or how web
design relates to you.
Principles of effective website design for marketing
Function Content Aesthetics Conversions Development
Briefs for website creation and enhancement
• Budget• Timescales• Objectives• Design (examples, ideas)• Functional specification• Assets:
• Content• Copy• Images• Brand guidelines
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/
Alternative approaches to website design
Templates and Opensource
eCommerce
SEO/PPC Landing pages
Conversion rate
optimisation
User centred design
Flash, HTML5,
JavaScript,PHP, ASP
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.
Wordpress
Magento
TemplatesStart 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
Usability and accessibilityConsider:• Intuitive design• Users with varying abilities• Different devices, browsers and screen sizes
Tools:• http://validator.w3.org/unicorn/• http://www.cynthiasays.com/
Usability and accessibility: Tools & ResourcesTest 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
Information architecture
Information architecture
Home
About
Team Locations Contact
Services
Service 1 Service 2
Structure and hierarchy of information.Common tools used to plan include:• Wireframes (see left)• Sitemaps (above)
Principles of effective website design
1. Clarity2. Visual appeal and conventions3. Visual hierarchy (prominence of
important information)4. Maintain attention:
• People (particularly eyes)• Contrast and colours• White space• Novelty.
5. Calls to action.
Principles of effective website design
http://blog.kissmetrics.com/leave-a-website/http://blog.kissmetrics.com/trustworthy-e-commerce-website/?wide=1
Consider:• Standard conventions• Colour and contrast• Readability• Clarity
Persuasion design principles
1. Reciprocation2. Commitment3. Social Proof4. Authority5. Scarcity6. Framing7. Salience
Persuasion design principles: ReciprocationCultural 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 persuasionhttp://www.media-studies.ca/articles/influence.htm
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-to-boost-conversions/
Persuasion design principles: Social Proof
1. Reciprocation2. Commitment3. Social Proof4. Authority5. Scarcity6. Framing7. Salience
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
http://www.youtube.com/watch?v=uuvGh_n3I_M
Persuasion design principles: Authority
“We feel a sense of duty or obligation to people in positions of authority.”Key principles of influence by Robert CialdiniConsider:• Celebrity endorsements• Logos of well known
customers• Research, statistics, quotes• Accreditations, awards
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
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/2010/11/29/persuasion-triggers-in-web-design/
• 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/Persuasive-purchase-behaviour-Understanding-the-power-of-the-Goldilocks-Effect
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
Discussion: The Jockey Club
Discussion: Netdespatch Ltd
Discussion: RBWM
Discussion: Natural Windows
Discussion: BearingPoint
Discussion: Phones 4u
Discussion: The IDM
Discussion: CCL Academy
Discussion: Nelsons
Discussion: Redweb Limited
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?
Thank you for listening!For further information, or follow-up questions after this event, please contact:
Jessica BowskillCourse and Events [email protected] 8614 0207
The Institute of Direct and Digital Marketing1 Park Road, Teddington, Middlesex TW11 0AR, United Kingdom+44 (0)20 8977 5705www.theidm.com
Image creditshttp://www.behance.net/Gallery/Illustrated-type/258535http://kairi-at-imke.blogspot.co.uk/2012/05/book-review-dont-make-me-think.htmlhttp://alidavies.com/why-to-do-list-killing-results/ https://moz.com http://www.time-to-change.org.uk/pledgewallwww.conversion-rate-experts.comhttp://www.shoptab.net/blog/how-to-create-a-product-promotion-in-facebook/http://www.smartinsights.com/conversion-optimisation/landing-page-optimisation/perfect-landing-page/ http://members.dodo.net.au/~peter_b/ia/info2b.htmhttp://blog.kissmetrics.com/trustworthy-e-commerce-website/ http://blog.kissmetrics.com/leave-a-website/ http://diegoguevara.com/blog/2011/05/04/clients-from-hell/http://www.kreativekicks.com/latest-projects/ http://simplyadammann.com/blog/2013/2/5/5rsdlgz9b3fp5n4mm1ntxtnhuffqfu http://www.topappreviews101.com/design-brief-2-ipad-app-765.html http://thewebsitemanagers.com/ http://youtemplates.com/espresso-a-wordpress-theme-for-restaurants.html http://themeforest.net/ http://dribbble.com/shots/1069015-K-Template-GIF http://devsbuild.it/resources/type/article/four-proven-ways-boost-online-sales-using-social-proof