O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Enhancing User Experience

Mais Conteúdo rRelacionado

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Enhancing User Experience

  1. 1. Web Design & Optimization Series<br />Enhancing the user experience for your site<br />
  2. 2.
  3. 3. Introduction<br />Sandra Bradley<br /><ul><li>UW e-Business Consortium / Practice Director, Web and Multichannel Marketing (www.uwebc.org)
  4. 4. Web strategy and marketing consultant
  5. 5. sandra.bradley@aeimedia.com | slbradley@wisc.edu</li></ul>Experience<br /><ul><li>Start-ups to large corporations
  6. 6. Integrated initiatives to purely web
  7. 7. 14+ years of professional experience and UW continuing education</li></li></ul><li>Today’s Goals<br />Understand the importance of user experience<br />Develop a process for incorporating concepts into a plan for design / redesign<br />Have a process for evaluating web design and tactics<br />Avoid the most common mistakes<br />Understand which tools can work best depending upon your situation<br />
  8. 8. Wisconsin.gov - 2001<br />
  9. 9. Wisconsin.gov-2009<br />
  10. 10. Web Strategy and User Experience Concepts<br />
  11. 11. Why, What, Where, Who, How<br />Why be online (the big question)<br />What do you want it to do (strategy)<br />Where are you (in regard to competition)<br />Who is it for (audience)<br />How will you present yourself (tactics)<br />
  12. 12. Why Be Online<br />Interactive; Two-way communications<br />Community-building; collaborative; immediate; responsive<br />Richer messages<br />Reach new audiences<br />Enhance customer service<br />Personalization<br />Gather data<br />http://www.facebook.com/amfam?v=app_4949752878<br />www.sumerset.com<br />
  13. 13. What do you want it to do?<br />ResearchProvide information for decision-making<br />Generate LeadsProvide leads to sales<br />Community-buildingBuild brand loyalty over time<br />Generate Revenue<br />Decrease Costs<br />http://www.chachahair.com<br />http://www.dianejonsalon.com<br />
  14. 14. What is the customer experience?<br />Online Touchpoints:<br />Your site – features and functions<br />Other sites (online ads, expert source, guest blogger, contributor, etc.)<br />Search presence<br />Social presence (blogging, Facebook, Twitter, product reviews, etc.)<br />Email<br />Widgets<br />Mapping<br />http://www.amfam.com<br />
  15. 15. Where are you in relationship to competitors<br />www.trautmanfarm.com<br />www.catesfamilyfarm.com<br />
  16. 16. Informal competitive research<br />Review 5-7 of your competitor’s web sites<br />Review a good selection of best-in-class or contextual sites<br />What differentiates your site from theirs?<br />What information and services are provided?<br />What features do you like?   Don’t like?<br />What features do not pertain to your business?<br />What technologies are used?<br />Swiss Colony Example<br />
  17. 17. Free Tools<br />Blog Search<br />Twitter Alerts<br />News Alerts<br />Blog Trends<br />Keyword Spy<br />
  18. 18. The Who<br />
  19. 19. www.orangetreeimports.com<br />www.hansondodgepottery.com<br />
  20. 20. How to find out what people really want<br />
  21. 21. Sample usability survey<br />
  22. 22. Interviews<br />
  23. 23. Usability observation<br />
  24. 24.
  25. 25. Mapping user goals to tactics<br />I need an easier way to get things done<br />I want to learn more<br />I want to buy something I have in mind<br />I want to connect with a community<br />www.webx.com<br />
  26. 26. What’s the customer’s experience …? <br />What a customer needs to get their job done.<br />Place<br />Order<br />Order<br />Status<br />billing<br />payment<br />Proof of<br />Delivery<br />Personli-<br />zation<br />Acct<br />Profile<br />Mgmt<br />Purchase<br />report<br />returns<br />quote<br />Sales<br />Rep<br />Feedback<br />price<br />availability<br />Prod<br />Info<br />Search<br />& select<br />Distributor<br />Call Center<br />eChannels<br />
  27. 27. “Bob” getting his job done hopping channels …<br />Online Touchpoints <br />Verifies location – prints map and directions<br />Places order for pickup<br />Keyword search for product on site to shop and check pricing<br />Finds product, checks availability<br />Check order status <br />Finds PO # in order history for his boss<br />Download OIPM<br />Bob Klein<br />Facilities Maintenance Manager<br />Goal: “Fix a broken Valve – <br />Get the <br />job done.”<br />Receive Confirmation<br />service<br />awareness<br />purchase<br />consideration<br />loyalty<br />TRIGGER<br />Irrigation system fails due to malfunctioning valve<br />Receives email about new site feature<br />Receives mailer about discount<br />Process Will call order<br />Receive and review direct Marketing info<br />Receive product and Pay<br />Offline Touchpoints<br />
  28. 28. 25<br />Discussion/QA<br />What are some key tasks your customers will want to accomplish with you?<br />How could you meet them online to provide answers?<br />Outcome: Better understanding of users and how to map tactics to user goals<br />
  29. 29. Web Design Best Practices<br />Most Common Web Design Mistakes - http://www.youtube.com/watch?v=vPO7lDZbcfA&feature=related<br />
  30. 30. OVP and Goals<br />2-minute elevator speech<br />Why would I choose you over a competitor?<br />What is in it for me?<br />www.aberdean.com<br />www.pdspc.com<br />
  31. 31. Assess assets and brand elements<br />Determine amount/kind of content and links <br />Determine tone/graphic feel/visual elements<br />Consider ways of distributing information/kind of technologies you might use<br />HTML/static pages<br />Interactive elements (Video, search, Flash)<br />Database integration/Dynamic content<br />Downloadable formats (PDFs, DOC, etc.)<br />Visual content<br />http://www.woccu.org/memberserv/intlcusystem<br />
  32. 32. Features and Functions<br />Choose how to distribute content by leveraging the medium and how people want to use it:<br />HTML/static pages<br />PDF<br />Interactive elements (Flash, JavaScript, Video, etc.)<br />Database integration/Dynamic content<br />Application specific files (e.g. Word, Excel, etc.)<br />Visual content<br />Graphic/Animations<br />Audio/Video<br />Archived files: Zip<br />http://www.cnn.com/2010/US/03/09/rhode.island.school.battle/index.html<br />
  33. 33. Navigation<br />Mutually exclusive<br />Hierarchical<br />Group items in families<br />Use the language of the audience<br />Meaningful<br />www.fcedc.com<br />www.thedacare.com<br />
  34. 34.
  35. 35. Designing sites cont.<br />www.thrivehere.org/<br />
  36. 36. Design<br />Appropriate for the situation<br />Design elements are consistent (placement and type)<br />Elements draw focus to desired actions<br />Visuals are high quality<br />Fonts are readable (size and type)<br />Fonts are consistent<br />www.greaterdubuque.org<br />www.mauston.com<br />
  37. 37. Before<br />
  38. 38. After<br />
  39. 39. Before<br />
  40. 40. After<br />
  41. 41. Copywriting<br />Conversational<br />Short and concise<br />Scannable<br />Actionable<br />Each word works todeliver value<br />www.aberdean.com<br />www.uwhealth.org<br />
  42. 42.
  43. 43. Reviewing sites<br />Strategy - purpose - audience<br />Site organization<br />Page layout throughout<br />Main page effectiveness<br />Content and interactivity<br />Graphics and colors <br />www.allstate.com<br />
  44. 44. UW / Effective Websites<br />41<br />Top mistakes<br />Doesn’t deliver on customer expectations<br />Lack of an OVP<br />Unclear goals<br />Poorly designed interface (lack of credibility, disorganized)<br />Difficult to navigate<br />Poorly written content<br />Difficult to update<br />Not SEO-friendly<br />
  45. 45. 42<br />Discussion/QA<br />What are some examples that you have seen that are particularly compelling?<br />What are some examples that are particularly bad?<br />Outcome: Better understanding of the tactics that create a user experience<br />
  46. 46. Tools and Managing Content<br />
  47. 47. When will you manage content and design<br />Have an editorial calendar for who and what gets updated<br />Website<br />Blogs<br />Facebook updates<br />Tweets<br />Have a general sense for when and how to review / revise online presence<br />
  48. 48. UW / Effective Websites<br />45<br />Maintain<br />Continue to monitor and track user expectations<br />Watch competitors and your place in the market<br />Verify links and site integrity<br />Analyze web server stats<br />Analyze search engine reports<br />Stay in tune with technology<br />
  49. 49. Tools<br /><ul><li>Hosted options (Homestead, Sitephoria, WordPress)
  50. 50. DIY with software – e.g. Adobe Dreamweaver
  51. 51. Hire a consultant</li></li></ul><li>Hosted Options<br />Inexpensive<br />Quick to start up<br />Few technical skills needed<br />Can be made easily accessible to other authors<br />Separates content and presentation<br />Limited support (other than technical)<br />Can be limiting from a design / functionality perspective<br />
  52. 52. Software (e.g. Adobe Dreamweaver)<br />More expensive; requires upgrading over time<br />More skills required<br />Need to manage both content and presentation<br />More flexibility in design options<br />
  53. 53. Hire a Consultant<br />Get direction and expert advice<br />Highly technical skills can be made available<br />Can bottleneck<br />May be biased toward one perspective or another<br />
  54. 54. UW / Effective Websites<br />50<br />Questions and Discussion<br />

Notas do Editor

  • Changed the title a bitBut the goal is to think about usersAnd their experienceBecause that is where so much of webAnd marketingHas goneAnd … we are focusing on the “destination”Per seWhich is the one thingWe can control these days
  • Lay the foundationTalk about what works and what doesn’t(questions throughout, by all means)Wrap with tools for managing content
  • And We are talking today about the “destination” – how it ties to other programs in the seriesAnyone can codeAnyone can designBut truly it is the understanding of the conceptsThat I hope you will leave here today withIt is hugely valuableIn terms of working on your ownOr talking with a consultantAnd to have a process for understanding what is important and whySo … why are we here …
  • Change is rapid … wisconsin.gov in 2001 (note first two lines)Wayback Machinehttp://www.archive.org/web/web.php
  • What’s changed – better serves people – organization - function – designSearchInteractive calendarDatabase behind the rapidly changing content (H1N1)Affordable ApartmentsChild CareCircuit Court CasesEvents and AttractionsSex OffendersUnclaimed PropertyWe will talk about expectations and best tools as well as linking, design, and content strategies that are “best practices”Of course, this is subjective and worth discussingParticularly when it comes to designTop or leftBlue or redAll are up for debateUsually to the HIPPOs viewBut, really, should be from the customer’s viewAnd we will talk about that next …
  • Let’s talk a bit of process …
  • We will talk about each of these in more detailThey are the core questionsThat it is surprisingly difficult, at times, to address:(perhaps due to lack of understanding, lack of resources, changes in the technology, changes inCompetition and so on)Note that tactics are lastI often hear “we need to be on Facebook and Twitter”But I would sayGo back to these questions firstBefore jumping to tacticsCommon mistake #11 as noted
  • Think about competition that is:DirectIndirect (the Internet expands the competition and changes up the value proposition) – competitors outside your geography, for exampleContextual (experiences people have on Google, CNN, and so on)Time-based – competition for prospects and customer’s time – info. ClutterGotta have a gridThis is just one example Of thinking through competitionThis is the result of a pet products siteEvaluatingContentCommerceGeneral approachSpecialized (ferret site success)One way to think about the competition and more data gathered then we are showing …Does allow for understanding the competitive positioning question
  • This can be a typical way to startAnd varying dependent upon your situationThe Swiss exampleShows some of the most common criteriaFrom a site perspective(not so much a value proposition perspective)Which can give good insightInto usability – or a part of itBecause it is often, the easiest to use siteThat wins.
  • Another view into your competitionThese are free toolsAllow you to stay in tuneWith what your competitors are doingOr what people are saying about themExplain how results are delivered in search results, email or via a dashboard
  • No not the band!The who in our thinkingThat we have been discussing as so very important …
  • The point hereIs that the user experienceIs the brand experienceAnd the impact on the bottom lineInteresting in that it is the design and functionalityThat fuel expectationsTwo comp examples:
  • So, we need to find out what they want … A few ways to do this - we will just give a topline of these:Online SurveysZoomerang, SurveyMonkeyInterviewsPhone, in-personUsabilityObservationWeb Analytics
  • Online surveysLow cost tools such as Zoomerang and SurveyMonkeyThese are good way to identify troublespots on a siteTo test a new potential function or additionTo generate new ideas and gather inputSuggestion:Select 5-7 people to email the survey link toHave a few of them come back and review updates or changesTo see if you have met your goals
  • Listen:“Just pick up the phone”This is a great way to get qualitative feedbackFriends and family interviews are more than valid
  • Watch:Usability can be as complicated as eye-tracking or other high-tech techniquesOr as simpleAs watching.Give people tasks“can you find”Have them talk out loud and take notesWatch them just browseTo see how they interact with the siteUsability of 4-5 subjectsWith about the same number of tasks will giveYou great insightsSwiss example of “in the hallway”
  • AnalyticsEvery server has logs and there is Typically software that allows humansTo make sense of the dataThis tells us what happened – not necessarily whyAnd complements Some of the qualitative inputGoogle analytics is freeEasy as adding Javascript to the pageAnd can give you informationSuch as VisitsBounce ratesAverage time on siteAnd so on
  • What do we get out of all of thisWe get the “I” driven by usersWhich fuels our understandingOf which tactics workAnd which ones are not important
  • E-consultancy 4 minute videoWe will discuss these, among others, as we go through Key Points: User-driven –Usability / accessibility Online Value Proposition (OVP) – what makes you different salesforce.com Clear goals for each page – calls to action SEO – balancing user and search tasks Flexible to different devices – technical testing
  • We will get into tactics now as well as design per seFirst, do think of the home page as this elevator speech:2 comp examples:Which one is doing this better?
  • We’ve thought through the big reasons and now it is time to get into some practical process.First things first: look at what you have to work with and what needs to be developed.Look at the resources you need.Look at what people want to doCommon mistake – getting a design and then adding content and more content then more contentThe result – disorganization and a pain for youStep 1:List off the things you have to work withThing beyond pages to what you heard from the user inputs:Do people like to grab and print things out? PDFsDo they want to be able to easily browse maps? VisualsDo they want to search archives? Search functionality and so onThe result will be a production list of:Software neededHuman resourcesContent to be developedAnd / orTranslated to another format
  • Next – start organizing what you have by tasks to be accomplishedDescribe how the site might be structured – organization is key to a good user experienceAnd a great site“I can’t find what I want” is the most common complaint from usersLet’s look at an example of good navigation … http://www.fcedc.com/Mutually exclusiveHiearchicalGroup items in familiesUse the language of the audience
  • And only then do we determine tone/graphic feel/visual elementsHow it looks is the last pieceDetermine guidelines for:Overall metaphorColor useGraphic size/type/placementTypographyPage layoutsMethods for handling content forms and interactionsAs you can see by this visual style guide:Each section has a treatmentThat will carry throughEach page on the siteLet’s look at an example of cohesive design: http://www.thrivehere.org/
  • These are some top best practices on the design sideLet’s look at a few examples:http://www.greaterdubuque.orgTo improve:http://www.mauston.com/----------------------------------------------
  • And best practices on the content side.People read 30% more slowly onlineAre typically scanning forSomething to doRather than something to readSpace is at a premiumDon’t waste it onPlatitudesFocus on what people will want to doAnd how to get them thereWeb copywriting and content development for online is quite different to copywriting for print.This is because the online reader:Skims rather than reads every word.Jumps from page to page. Can enter content at different points.Doesn&apos;t like deep scrolling.Finds reading on screen more difficult.And copywriting which may have been previously created for offline readers can rarely be successfully used online unless it is expertly edited.
  • As we’ve discussed … these are some of the top mistakes we have seen
  • Look at a few examples to reiterate points
  • All this is well and goodBut how do we actually get this doneIt used to be putting pen to paperNow it is certainly more than that.
  • Common mistake – getting a site done and then collapsing for two yearsBefore being jolted by some glaring oversightOr changeThis is a simple but powerful organizationalTip
  • In addition – identify what you will stay continue to trackAnd howNow we know why these are important …
  • Get the spade into the ground already!2-minute video that talks about some optionsNow let’s talk about some of the plusses and minuses …
  • And we all know that there is a team valueBut at the same timeCan be victim to bottlenecking, transitions and so onWhat are others doing … ?
  • What I am hoping you got out of todayIs the understanding of what is important – users, competition, value propositionUnderstand the steps in the process to think about where and how you can optimize your siteHow to evaluate design and functionalityBest practices and subjectivityUnderstanding of the tools available and which may be best for you

×