Web App Summit 2009

Editor's Notes

• #4: OverviewA lot was learntMany smart speakers including:Luke Wrobelski; Yahoo! (Forms & product vision)Joshua Porter: Bokardo (Sign up)James Box & Richard Rutter: Clearleft (Design and usability)Bill DeLarouchey: Ziba: (Tone & Copy) Tony Hsies: Zappos (Corporate culture)Jared Spool: UIE (Amazon secrets)
• #5: Who we metWhat we learntWhy its importantWhen and how we can implement these best practisesIt will be in brief and discuss the key topics we coveredFor more detail on each of these there will be a handout, access to the full notes from the conference for everyone.As such any in depth questions can be asked at the end of the presentation and I have plans for next steps, again discussed in a few short slides, so bear with me.
• #6: You would fall asleep if I tried to condense 4 days (2,160 minutes) of presentations from the leading minds on web design and usability into 45 minutesI am going to give you some examples of the key things I learnt, how we can apply some of them and who we can work with.
• #7: The 1 key learning that I took away from the conference was a concept called “parti”
• #8: No parti is not a “party” as much as I would love it to have been
• #9: Parti:- Term architects use to describe the central idea of a buildingCan be applied successfully to web projects. Parti is used as a guidepost in designing every aspect of your product. Whenever you are making a decision, always ask your does it support the parti?Gives team something to always refer back too and unites them in a common purpose for the project/product. Different “Experience promise”
• #10: - Different’s “Experience Promise” which is a very similar principle to parti
• #11: This is Yahoo!s parti for their homepage redesign (Not yet launched) and has meaning to them, and helped with all of their design decisions.
• #12: A brilliant way of brainstorming to fully uncover client/stakeholder requirements when starting a new project.I am sceptical of “group tasks” at conferences, as usually the most boisterous but least capable person just takes over. But this exercise worked exceptionally well in drawing out full product requirements from all stakeholders. But this gave everyone a voice and gets a project started with full requirements being given from all members of the team.
• #13: Task. Design a product page on a recipe website. What features should we have on a product page?Step 1:Individual stakeholders write down the features they think should be implemented on a webpage on stickies, and place them on a wall.
• #14: Step 2:Group the stickies together.Prioritising each group, everyone votes for the area they see as the most important.This leads to a consensus on what areas are the most important and therefore should be tackled first.
• #15: - Working hard…..
• #16: Led to a collaborative method of drawing out ideas and requirements early on in the design process, gave every single member of the team a voice, which produced far more consensus than I have ever seen.
• #18: Mention have to look through me to see whats happeningInteractive prototyping; a smarter way to wireframe for both developers and to allow quick and early usability testingAll created using very simple, lightweight HTML, CSS and JavaScript. Really quick to build.Pattern libraries help as page elements can be reused from previous projects, which helps create speed.Means less reliance on documentation and wireframes. Already met John to discuss using this in dev cycles.
• #19: Everyone was banging on about this. All of your copy must be informal and conversational to engage users and break down barriersThink of a normal conversation you have with someone, its free flowing and you speak TO them as a peer, not AT themHumanise your copy so users feel as though they are engaging with a person, not a website….
• #20: woot.com an online ecommerce siteYou need to sign up to purchase anything, but check out their use of language which helps reduce the commitment on behalf on the user:“Join us” friendly tone inviting users in“Don’t worry, this wont hurt much” reassuring users that its painless and that they know that forms suck too, creating empathy with the user. “We need at least this stuff, but you can get a head….” there is not much to fill out, just a few basics. “So who are you?” conversational“we know how badly you type” – funny“where we send your forgotten password” – funny and reassuring that they don’t spamTone really can impact if people sign up to your service
• #21: Twitter has had a server outage but instead of a boring technical message says:“Twitter is over capacity, too many tweets” its friendly and apologetic“Twiter Fail whale” is friendly and cute, and has become an internet phenomenon amongst regulars to Twiter. Users “don’t mind” as much that the service isn’t working due to the friendly message. Everyones servers go down at some point, buts its how you communicate it that is important. - Conversational tone in web copy, helps break down barriers, humanises your product and encourages users to engage with your product
• #23: - We need to learn and leverage from social media sites on sign up and UGC
• #24: Forms suckUsers just want what is at the end of the form, they don’t necessarily want to fill it out….Always ask yourself, is there anyway that we can do without this form.Golden rules:Minimise the pain, no one likes filling in forms so; Remove unnecessary inputs, make it quick to fill outSpeak in a single consistent human voice, despite your many stakeholders (Labels, copy)
• #25: Reassuring typical questions users have immediately: 1. How often will I have to do this? “One time set up”2. How long does this take I am busy? “Only takes a minute”3. What if I cant do it? “We’re here to help”Reduce commitment on sign up and reassuring user throughout the process
• #26: - Website called netflix, which over the next 4 slides I will break up the page to show how they are answering all customers questions on 1 page, using a simple design framework
• #27: Elevator pitch / value prop / hook with a testimonial. Tells you exactly what their service is in one line….Followed by high level benefits of signing up to the service
• #28: So maybe you’re the type of person who wasn’t convinced by the value prop….Well they give you more info about the service, and tell you exactly how the service works using clean clear iconography and supporting textOk, so maybe your really analytical and still are not convinced….“Mouse over to learn more” not everyone will see this, but the people who need convincing are more likely to find it.
• #29: More info about the service and extra features available without taking you away from the main sign up page
• #30: Lastly, clean clear call to action “Start your free trial” with only 5 fields to fill out to get started.
• #31: Within one page speaks to many different types of peoplePeople who know they want to sign up so get out of their way I want to make sure this is for me (Give high level benefits of service)Sceptics (provide more info immediately)So ultimately they get more people signed up
• #32: Immediate Engagement. Lightweight interaction to get people using and engaging with your product immediately.Already presented my ideas to all of you previously about this.
• #33: Geni, you obviously need to give a lot of info to get your tree going, but only 4 fields to actually get started! 5 million sign ups in 5 months (Now at 50 million)
• #34: Progressive Disclosure: Helps maintain the users focus on the task at hand, by reducing clutter and confusion.Allows user to get comfortable completing a certain task, before pushing other aspects of your service onto them.
• #35: Progressive disclosure, but with choice Selective by freshbooks as you can do much more than these 3 options, but these are the key ones for their businessWhat would you like to do first? Give users choice when they are signed inMakes them feel “in control” of the service and thus, they will engage and use it more.
• #36: 2 things here, first conversational tone with a real human being with picture, which helps you engage with the product more. After adding your first post a “real” person says to you:“Great work its easy right?” again reassuring language that you are mastering the service and getting stuff right, everyone wants feedback and to be reassured they are on the right track. Before pushing another application onto the user they go onto encourage more posts before they show them the “bookmarklet”. This means users get more familiar and comfortable using the service (Video games do this all of the time, as you get better they start to reveal harder things for you to do) before trying out new features which may confuse them if pushed at the wrong time.
• #37: Slideshare a place to share PowerPoint decks.The use of % complete (Same as linkedin) has shown to double and triple the amount of UGC (Another progressive disclosure technique). Users emailing in “How can I complete my profile…..”Key Points:Progressive disclosure (Drip feeding access to elements of your product post sign up) helps users get comfortable with your service and eventually add more content in a structured manner. .
• #38: Inline help from facebook when they know you are looking for something or want you to add more content. It helps familiarise and reassure users that “help is at hand”Light yellow messages work well, think Google ads I guess!
• #40: Pattern libraries both external (Yahoo!) and internal (Built up over time) can help reduce development timeenhance consistency across websites and enhance a users experience by giving them applications and interfaces which are common across all pages EG: all buttons are the same style on a siteYahoo! Have opened a lot of theirs up. Already met John about the use of these within catch.
• #41: - Preventing pogo sticking (Incessant use of back button to get back to your main gallery page)
• #42: New technology allows us to keep users on the tag page and let them see they actual content before deciding whether to go into that page. If implemented correctly, can be very useful and creates a much nicer user experience allowing them to see much more of your content before deciding whether to act.
• #43: Although the use of:Rich GUI is still not fully adopted by the internet population (AJAX, modal light boxes, overlays)Users are becoming far more familiar and expecting things like
• #44: - Youtube videos
• #45: - Overlays
• #46: - Users are expecting these new features, but want to have control over them and we need to ensure whatever is implemented is usable…..
• #48: Cool facts and the secrets behind Amazon and how they have successfully built up their business175,000,000 million orders placed in 2008
• #49: - That made it number 8 in rank of all websites
• #51: 1300 product purchases to generate 1 reviewWould Amazon ever sell milk?This product “tuscan whole milk” has over 1000 reviews…..
• #52: Yes these are funny and its strange that avid internet users have started adding fictional reviews butAre the reviews worth it?
• #53: So what now with all of this newfound knowledge?Working with agencies (different) and making changes ourselves (Through these presentations) to try to implement some of these best practices across HF and the verticals.