What I Learned at UX Cambridge 2013
•Descargar como PPTX, PDF•
7 recomendaciones•1,193 vistas
Presentation given to UA library staff and campus about UX Cambridge 2013. Held at the Main Library, September 24th, 2013.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a What I Learned at UX Cambridge 2013
Similar a What I Learned at UX Cambridge 2013 (20)
Más de Rebecca Blakiston
Más de Rebecca Blakiston (20)
Último
Último (20)
What I Learned at UX Cambridge 2013
- 3. Designing the Search Experience Half-day workshop presented by Tyler Tate @tylertate Slideshare.net/tylertate
- 4. We’ve got to keep in mind our users’ levels of domain and technical expertise.
- 5. One of our problems is we try to design search for everyone.
- 6. We can help people increase their expertise as they are using our stuff by providing good contextual help.
- 7. We need to make the basic search features really easy to use.
- 8. “Google-style searcher vs. Amazon-style searcher” Lihua Zhu, User Experience Designer at University of Cambridge Library
- 9. We’ve got to keep in mind the motive of the search. The type of query. Casual? Lookup? Learn? Investigate?
- 10. We’ve got to keep in mind the genres of things being searched. Informational? Geographic? Personal? Transactional?
- 11. 1. Have need. 2. Formulate query. 3. Do search. 4. Refine search. Is it really that simple?
- 12. Searching evolves over time. Consider the whole user journey.
- 13. Marcia Bates “berry picking” model of search
- 14. 1. Initiation 2. Selection 3. Exploration give up now? 4. Formulation 5. Collection 6. Search closure Carol Kuhlthau on the information search process
- 15. We should help users formulate their search queries. How?
- 16. Don’t be too clever. Make it look like a search box. Rectangular, with a button.
- 17. On mobile, place search in top navigation bar or in secondary toolbar, via a pull-to-reveal gesture.
- 18. Autocomplete: completes a known entity Autosuggest: ideas the user hasn’t thought of yet (a form of contextual help) Instant results: results shown as you type
- 19. Parametric search: asking the user to input different criteria before seeing results This is risky.
- 20. Make them feel good, like they are getting somewhere.
- 21. Segmented control allows the user to select their preferred display of results. Ebay example
- 22. In designing results pages, consider what the user needs to see. Amazon example: title, cast, format, rating, cost
- 23. Give the user easy-to-access previews of the items in the results list.
- 24. A continuous scroll reduces cognitive load, but can be frustrating, especially if you want to go back to something.
- 25. Pagination should be at the bottom of the page, not the top.
- 26. Minimize amount of input collected upfront. Get users to the results as quickly as possible. Make an education guess on what initial facets/options are appropriate for most users.
- 27. Can collapse or expand facets, or hybrid of the two. Expand the most common facets and collapse the rest.
- 28. When you click on a facet, you expect a traditional page refresh. Or an “instant update” where page is frozen while results are updated.
- 29. Make it clear to the user where they are with horizontal breadcrumbs, vertical breadbox, or “your selection.” Give the ability for the user to remove certain filters.
- 30. Give users the option to keep the same facets (“search within”), as well as the option to start over (“clear all”).
- 31. Introduction to Content Modelling Half-day workshop presented by Mike Atherton @mikeatherton
- 32. @micheleidesmith
- 33. There are relationships between content. These can be expressed through a database. The interface can be anything.
- 34. Hierarchical structure in IA isn’t how things are structured in the real world. There are relationships between things.
- 35. Structured content allows us to: • manage content at scale • encourage browsing • improve findability • expose long-tail content • reuse content assets • build bridges across subjects • support social sharing • improve SEO • design for all devices • be robot-friendly
- 36. Forget sitemaps. Forget content inventories. Start thinking about relationships.
- 37. Databases relate to tutorials, relate to classes, relate to disciplines. Classes relate to disciplines. Disciplines relate to librarians. Subject guides relate to disciplines. Databases relate to format types. Tutorials relate to classes, relate to databases, relate to audiences, relate to format types. Events relate to exhibitions, relate to librarians, relate to disciplines, relate to classes. Exhibitions relate to collections, relate to news stories. Services relate to audiences, to teams. Teams relate to librarians.
- 39. “We use metadata to make assertions about real-world things and relationships so robots can help us connect them.”
- 40. Good model-based design has complexity behind the scenes and simplicity up front.
- 41. Know the limits. Don’t get carried away.
- 42. Make an actual map. Connect content and describe the relationships. Subject Guide ExhibitDatabases
- 44. Content is freaking hard, but it’s the whole point.
- 45. “Do what you do best, and link to the rest.” - Jeff Jarvis
- 47. Possible principles for the main website? Have one page for each thing (but don’t publish every page). Every page is a homepage. No page is a dead end. Do what we do best, and link to the rest.
- 48. Taming Taxonomy Workshop presented by Alberta Soranzo @albertatrebla slideshare.net/atrebla
- 50. Taxonomies are collections of facets, which are created by organizing concepts into categories.
- 51. Use card sorting to test labels and structure. Guide you towards a user- centered taxonomy.
- 52. Results of card sorting… - input into information design - define overall content hierarchy & structure - design navigation, menu & taxonomies - outline users’ mental models
- 53. Design Tips for Forms Workshop presented by Caroline Jarrett @cjforms slideshare.net/cjforms
- 55. Complex forms: Look complicated Use complex terminology or concepts The answers require thought, research, or someone else The task is challenging
- 56. “Replay study” Users have another go at a complex form in their own environment, with their real data, while you watch and take notes.
- 57. Each question has a cost. Use the question protocol to make sure every form field is really necessary.
- 60. Creating a Web for Everyone Presented by Whitney Quesenbery @whitneyq slideshare/whitneyq
- 62. @micheleidesmith
- 63. People first.
- 64. Think about accessibility first rather than last. Think outside the mouse.
- 65. We need to have accessibility standards. Solid structure. Need to make sure code is up to speed.
- 66. Make interaction easy. Everything works. Something is just intrinsically accessible. Electrical engineer created this “Frankenkindle” for his sister who has cerebral palsy
- 67. Create wayfinding that guides users. Need good signposting within the code. <nav> <main> <aside> <footer>
- 68. Clean presentation & clean labeling helps everyone. Support meaning with presentation.
- 69. Use good contrast. Use plain language. Use accessible media that supports all senses.
- 70. Give those with disabilities a place at the table. Conduct usability testing with participants who have disabilities.
Notas del editor
- User expertiseWe gravitate towards devices that fit our level of expertise (camera example) – we want all the functions vs. we want something simple/not complicatedDomain expertise – content knowledgeTechnical novice/expert – using computers/devices, knowing how to get around online, knowing how to perform searches (Boolean logic, using quotes, facets, etc.)History faculty emeritus has high domain expertise, low technical expertiseNew students have low domain expertise, Double-novice - Technical & domain novices type more queries into the search box, but view fewer pages – timid about venturing further. More likely to venture back. Spend a lot more time on completing a given task. Backward oriented behavior.Double-expert – examine more pages than novices, continue to dive deeper, follow links to other articles/pages, forward oriented behavior. Make faster decisions. Determine relevancy much more quickly.Domain experts but technical novice – more likely to use advanced terminology, judge relevancy quickly, but not confident to dive deep – backwards oriented behaviorDomain novices but technical experts – more likely to used advanced formatting (quotes, Boolean logic), but have difficulty determining relevancy
- Our users:Need to design for wide spectrum of technical expertiseForced to design for lowest common denominator – need to make sure usable by them
- One interesting problem is helping people increase their expertise as they are using your application – good contextual help (this would be good for Special Collections). First time you visit, get tutorials/tips, for instance .Help users formulate their search query. Give them clues. How could we do this?
- Make the basic features of the application really easy to use, minimize clutter of advanced features – subtle ways, take up minimal real estate.
- Cambridge did usability test on Summon - Google searcher just searches simple search, Amazon user uses facets
- Motive/information needs:Casual query – not a piece of information the user knows they are after, don’t have something in particular to know, you don’t have anything better to do – want some inspiration/distraction perhaps (what restaurants are nearby?)Lookup query – specific piece of information, specific fact you want to know (What is population? Who is director?)Learn – not very specific, but want to improve your domain expertise in a particular area, takes more research, reading, investing timeInvestigate – could transcend days/weeks/months, writing thesis/book, where you are deeply investigating a topic – organizing your researchIdentifying information needs:Lookup: Do you have this book/article/film, where is it, how do I get it?Explore: Investigate:
- Genres of things being searched:Informational: textGeographicPersonal infoTransactional
- Classic model of information retrieval: have need, formulate query, do search, refine search until arrived at desired result set.
- More realistic model: isn’t static, changes over time. Marsha Bates, the dynamic, “berry picking” model. http://en.wikipedia.org/wiki/Marcia_J._Bates
- Searchers berry pick. (Marsha Bates)This was back in the 80s.
- http://en.wikipedia.org/wiki/Carol_Kuhlthau stages of information seeking: initiation, selection, exploration, and then if you don’t freak out and give up: formulation, collection, search closure.http://en.wikipedia.org/wiki/Information_Search_ProcessAt what phase in the info seeking process do users want to use your search?
- Help users formulate their search query. Give them clues. How could we do this? Are there particular flows or change of events that users go through? From one type of query to another. Think about how common user journey flows through the search application.
- Creating search interface Entering the queryDon’t be too clever when designing the search box. Make it look like a search box. Has a rectangular box, has a button.Top-right placement traditionallyIf primary action, putting it front & center makes sense (Amazon, library)
- On mobile, can place in top navigation bar, in secondary toolbar, via a pull-to-reveal gesture (when secondary action),
- As-you-type suggestionsAutocomplete (like airport locations) – completing known entityAutosuggest – ideas the user might not have thought of yet (this could be a way to help users with their search, if done right) - Could autosuggest be a form of contextual help, leading the user to a better search?Instant results – results shown as you type (Apple example)
- Parametric search – asked to input many different criteria before seeing results (forced to use advanced search). Risky.
- Psychologically, information foraging – positive attitude when getting closer to their goals, even when one step at a time, happy to follow that path. But it they aren’t getting any results, risk of giving up. Have seen technical novice users think that autosuggest is autocomplete, how do you handle that?
- Displaying resultsDifferent types of displays, users could select (segmented control), (Such as full/brief details).
- What info do they need to see: author, when published, title, etc.Hesitant to provide tabular view
- Easy-to-access previews of the item – a way to avoid information overload in the result list while providing more context to users before they make commitment to clicking on the document.
- Never ending scroll – users don’t have to think as much, reduces cognitive load. Can be frustrating when the user might remember there is a certain thing on page 3 they want to get back to. Continuous scroll not successful if you want to come back to something. For simple lookup queries, probably more appropriate. But more exploratory/investigative, when you would spend more time on result set, less appropriateCan give user control of how many results they want to see on a page.
- Pagination should be at bottom of page, not at top. Minimize clutter.Google Analytics example.
- Faceted navigationMake the control obviousGeneral feeling is to minimize amount of input collected upfront – get users to result set as quickly as possible. Make educated guess about what would be most appropriate. Sorting feature.
- Facets can be collapsed/closed by default or expanded, more commonly expanded. Can have hybrid of the two. Could expand most common facets and expand others. Can we control in Summon what is collapsed/expanded?
- Facets can be links or checkboxes. Links, you apply one filter at a time. Links: “and” so main dish and side dish. Checkboxes: want “or” – black or white or grey skirt.Keeping boxes unchecked by default is most common, ecommerce follows that pattern. Specialized controls: sliders for ranges of information/numbers; color pickerExpect traditional page refresh when you click on a facet, or can have an “instant update” – page is frozen while results are updated. (LinkedIn is an example of this)Two-stage multifacet selection – to apply multiple filters - click on “update” button.
- Showing the user where they are at: Inline breadcrumbs to illustrate what facets are being used (Amazon example)Vertical “breadbox” (Endeca), presenting vertically “Your selection” or something, and allow users to remove certain filters.Horizontal breadcrumbs marked with a removal icon (financial times - ft.com/search)Hybrid – more advanced designInline controls on mobile – good examples at Ebay and REI. Also see Yelp and – uses segmented controls very thoroughly. And Air B&B.“Filter.” “Refine.”To keep the same facets, should have something “Search within” but also a “clear all” button to start over.
- To keep the same facets, should have something “Search within” but also a “clear all” button to start over.
- Introduction to Content Modelling (Mike Atherton)Was lead information architect with the BBC. Now head of user experience at Huddle in London.
- Worked as IA at BBC. BBC – 50 years of archived content - programs, had to be relatively cheap, easy to manage and easy to use. Individual episodes. (Quite similar to thinking about CCP and Special Collections). Create learning through the content and through relationships between content. In natural history, have a set of defined concepts: species, habitat, location, etc. This is a content model. The relationships expressed through the database, the interface can be anything. The value is not in the video clips, but I the links. Once model is established, the website is a “lightweight wrapper” around it.
- Structured content: info/content that has been broken down and classified using metadata. Broken down, classified, metadata. Hierarchical structure in IA isn’t necessarily how things should be structured in the real world, there are relationships between things.
- Knowledge networks can be created. This is important because:Manage content at scaleMeaningful navigation – encouraging browsing by meaningImprove findabilityExposing long-tail contentReuse content assetsBridge across subjectsSupport social sharing
- Benefits projects of any size. Forget sitemaps. Forget your content inventory. Understand and respect the subject.
- Library application:Databases relate to tutorials, relate to classes, relate to disciplinesClasses relate to disciplinesDisciplines relate to librariansDatabases relate to format types (articles, book reviews, films, images)Events relate to exhibitions, relate to librarians, relate to disciplines, relate to classesExhibitions relate to collectionsExhibitions relate to news stories We should do “UA Libraries: the Content Model” Exhibitions _______inspired by _____ collections (Exhibitions is a box, connect to Collections with a line, write on the line what the relationship is)Databases ___contain___formatsLibrarians ____creators of ____ subject guidesEvents ____
- Researching Your Subject Talk to the experts – get an overall picture of their world – find where the borders are and demystify any jargon. Talk to real users – discover their priorities, which things they care about, how terminology differs. Watch out for “organizational tunnel-vision” from the experts. Find a balance between authoritative and accessible. Good model-based design has complexity behind the scenes and simplicity up front.
- Knowing the limits Lots of things naturally connect, so it can be easy to get carried away. Need to decide boundaries of any one subject, find ways to connect it to what could be multiple different models. Boundary objects: things that exist in different context, but intrinsically the same thing.
- Making the map Apply simple labels to both ends of the connectors which describe the relationships – this can be helpful. So recipe has the ingredient; ingredient is in this recipe. (This helps down the road). Work through the model with examples, and refine as needed, adding new things. Sit down with different people and validate. Careful if trying to model narrative – easy enough to talk about the qualities of the material itself (standard metadata), but much more complicated and unwieldy if you’re talking about the world of the story.
- Content is King. Content is F****ing Hard. Content is the whole damn point. Each instance of a thing should be represented by one page, one URL. “One page per thing focuses editorial effort in a single location, improving workflow efficiency and page quality.” You content model can drive your content audit. Identify which thing or things each piece of content is about, find gaps, find opportunities to reduce content. New british government principle: “Do less. Govt should only do what government should do.” Gov.uk.
- Do what you do best, and link to the rest. – Jeff Jarvis (he wrote, “What Would Google Do?”)Should this be our principle? Yeah, probably! Specialization demands quality. Stop reinventing the wheel, unless you provide the best wheel or an improved wheel. Distributed content management. Wildlife example on BBC. Bring in articles from Wikipedia, have a note, “if you find factually inaccurate… edit the article at Wikipedia”
- “Chunking” is the process of reducing content down to Minimum Reusable Units (MRUs). Atomizing content. But only as much as makes sense. What you’re trying to achieve: finding many outlets for content, working across channels, minimizing duplication, structuring in ways that map to mental models. Where is the sweet spot between reusable units and the effort needed to obtain them? NPR “Cope” – create once, publish everywhere.
- We should define some principles for site redesign, including “have one page for each thing” (each thing that we want to link from elsewhere), and “do what you do best (and what you have to do) and link to the rest.” It’s not always necessary to publish every page, only ones that warrant it. Don’t need a page for each instance of an episode, but a page for each episode. You can base your navigation around the content model.Explore subjectsClassesLibrariansTutorialsContent is browseable by different methods. Jumping off points. “Every page is a home page.” Every landing page should articulate: desired content, linked supporting context, product proposition (?) Look at BBC site for astronomy – “Continue Your Journey” – encourages continued exploration. Examples of modeling: BBC Nature Wildlife bbc.co.uk/nature/wildlife, TV Food Maps, Lanyard, Arizonaguide.com, Gov.uk, bbc.co.uk/food Slideshare.net/reduxd
- IA is informed by taxonomy, helps build navigation. OptimalSort. Donna Spencer has an online spreadsheet for tracking card sorting results. We don’t want a machine or algorithm to do the thinking. It’s a cop out. Context - One predicted by a tool or the one we live in. Card sorting: data to support decisions, cheap method of testing labels and structure, user-centered taxonomy
- Design tips for forms: Ideas for improving the UX of complex transactions@cjforms If users expect a form to be complex, it is. (The US Passport application – this form is complex, even though we haven’t seen it yet). See Caroline’x UXPA conference for more details. “Assumption persona” For complex transactions, best to try and catch users at the time that’s right for them.
- Karen Schriver, information designer, follow her at @firstwren. Dynamics in Document Design.
- Try a “replay study,” users have another go at a complex form in their own environment, with their real data, while you watch and take notes. Track a sample of forms through your process – look for errors.
- “The Question Protocol” article, use a question protocol to establish who uses the data. http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.phpCommon examples of unnecessary fields: fax number, postal address, marketing campaign data (how did you hear about us?) Four steps of answering a question: read the question, find the answer, judge the answer, provide the answer. Jessica Enders, forms & survey expert. @formulate Slideshare.net/cjforms
- Kathryn Summers, low literacy expert. Co-author, “Design to Read”. www.designtoread.com
- Awful lookingsite, but: VocabProfile for a quick check of the words you’re using. www.lextutor.ca/vp/eng (should use this in the writing for web course!). Good first pass, will give you ideas of what words might not be considered plain language. Look at language of the form and the right steps in the process. Simple forms may progress
- Creating a Web for EveryoneWhitney Quesenbery Slideshare/whitneyq Assistive technology used to be large, ugly, and really expensive. Stories about having a disability - Glenda Watson Hyatt, doitmyselfblog.com. Should read her books Principles for accessible design:
- People first – wrap disability into a persona (we should do this – someone who is losing sight and reads large print; someone who has fibermyalgia and uses assistive technology to avoid typing too much; someone who is a graphic designer but happens to be deaf). We need to think about people who have a wide range.
- Clear purpose – well defined goals. Think about accessibility first rather than last. Think outside the mouse. Can you enlarge the text? Does it work with a track ball, not a mouse?
- Solid structure – built to standards. We need to have accessibility standards. Need to make sure code is up to speed. Appeal to the code geek to be on your side.
- Easy interaction – everything works. Something that is just intrinsically accessible. “Frankenkindle” http://www.geek.com/gadgets/electrical-engineer-creates-frankenkindle-for-sister-with-cerebral-palsy-1415513/Accessible larger buttons.
- Helpful wayfinding: guides users. When Google Maps first created, idea was to be purely visual, no text directions. Added for accessibility, but geez that’s useful for everyone. Identify the areas of a page visually and in code. HTML5 element and ARIA role. So role = navigation (<nav>), role = main (<main>), role = complementary (<aside>), role = contentinfo (<footer>). Even complex pages work with good signposting.
- Clean presentation – support meaning with presentation. There was a project to create better labeling on pill bottles – Target adopted it and took it on. You can choose your color, cautions are front & center, the name of the medication is big. Good example of clean labeling. http://deborahadlerdesign.com/casestudy/?id=target
- Use good contrast. This used to be complicated to figure out, but soon to be in 508, a formula that talks about foreground & background color. Begin training your eye and learn what is good enough for color contrast. Plain language: creates a conversation. People read with different levels of literacy, US National Assessment of Adult Literacy (nces.ed.gov/naal/kf_demographics.asp) – should add to writing for web class. 43% of Americans read at basic or below basic literacy level. Charts. Need to have: good title, clear summary, visual information, data in a table. Having data in a table in addition to a graph will make it more accessible. Accessible media supports all senses. Captions. ALT text. What is the right ALT text? It depends who you are talking to and what you are trying to say – why did you put it there and what does it mean? If there is already a caption describing it elsewhere. Sometimes write the ALT text before finding the image, so you know why – what you are trying to say. Book, Design Meets Disability.
- Universal usability: create flow and delight. A place at the table. Need to make sure we do usability testing with people with disabilities – could contact DRC. Amy Mullins, who is double-amputee, has a wonderful TED talk. Look up “accessible infographics”
- Software Acumen International confs: FP Days John Thackara, Doors of Perception “Rock Health” Metabolic rift. Removed from natural systems. http://usersnap.com/http://www.userzoom.co.uk/http://goodkickoffmeetings.com