The Web and Beyond
Authors: Alia, Lynda and Michiel
CWI participants: Alia, Lynda and Michiel
# participants: 620
summary: How can experience designers create usable interfaces with the sprouting web2.0 technology, that is made by nerds? Entertaining talk, but low info rate.
SanDisk3 No.2 manufacturer of ip3 players. Ipod has about 95% of the market! Ipod is an inferior product. What does ipod have that SanDisk doesn't?
Netflix : largest video chain network, 5 million subscribers, 85% new subcribers say an existing subscriber remommended them, 93% subscribers say they evangelize netflix to friends and family. They created an experience - getting and watching movies.
The age of experience design!
User experience is the core of the business now.
boo.com -> a perfect design product. but they only focus on the technology not the design. Other example: amazon (once a good website, now too many features now). jared's message: if you deliver a good user experience you can (almost) cut out other things such as business model, etc. myspace: example of a service that delivers experience.
web 2.0 according to jared: designed around experiencesExperiences which are meaningful to people. Taking little things and assembling them. Who is putting the blocks together?
Sharing photos. It wasn't designed to share photos. Designed as chat room to upload pictures for gamers to chat to each other. APIs to photo collection. RSS feed for every picture I load. Can import displys into other applications. Tag for the Web and Beyond Conference is TWAB2006.
chicagocrime.orgCombining public available data with web services. google maps and chicago police dept.
api challenges:Anatomy of long tail: Shops can only keep the popular stuff on their shelves. So Rhapsody sells 500,000 items not available in store. Amazon sales are 57% from books not in bookstore.
long tail challenges:Author of user experience book the elements of experience
Activities: User research; information architecture; interaction Design
1. User researchHow do people think/behave? Lot of energy in mid 90s to maybe watch people use your product, ask them questions. Watch people interact with product. Has its own limitations. the rise of web research: field research.
What is field research? ethnographic research, contextual inquiry research field studies: teams of two, one person interviewing, one person taking notes/record video
bunch of tips. Photographs in client's environment gives the feeling of a documentary of "unfiltered truth". To judge, people respond much better than video highlights from a lab setting. Don't write a report - show people. Field study takes about the same time as in a lab.
2. Information Architectureinformation architecture is the biggest challenge in creating web experience. being able to see the world from the other person's point of view. Not engineered, but let users create their own with tags. Metadata fills the gap when searching only the data itself isn't enough.
Tag problemsweighted list of terms. Amazon gives pseudo tag cloud of a book - a 100 keyword summary.
3. interaction designWeb architecture assumes a doc retrieval model. Why are we ready for dynamic interaction.
gmail and then google maps showed what Ajax can do. No compromises: cross-platform, cross-browser, no plugins.
Paradigm shift for designers as well as developersAjax makes design problems technology problems, and vice versa.
Where does Flash fit in? Developed as animation tool. Ajax can call Flash and vice-versa.
challenges of web 2.0 is not technical but in the design.
Improving user flow with single page interfaces: by Backbase
1. Single Page Interface
RIA: rich internet applications
traditional multipage webdesign worked well for simple linear user flow but ajax work well for complex ones
example: online travel, 2/3 of web revenue in the states is from online travel.
online travel is a buying process, why should that be complex?
usually the buying process is not that linear. a lot of user take more time and go back and forth from one process to another.
flow interupted because: going back and forth, waiting.
example: https://development.backbase.com/ ->d-reizen uses ajax
why is SPI better:
1. it enhances user experience (seamless and focused, creates a sense of flow, booking becomes easy and fun)
future online travel:
review, rating, tagging
map based searching
personal propositions
travel booking on mobile, PDA, etc.
-----
emessenger by Onno Bakker
mission of emessenger is to provide instant messaging for everyone everywhere by offering the best chat experience on the web and via mobile.
problem with instant messenger:
1. no access (blocked)
history of emessenger: 1. mobile version, 2. web version pure html, 3. web version + java script, 4. AJAX version.
they tested the new ajax based emessenger, and the user response it that it is much faster. perceived speed dramatically increased.
------
One speaker was absent. Instead the cool movie of Dick Hardt's presentation on Identity 2.0.
Geke van Dijk, STBYInitial user study research to find out context of application. She studied travel preparations, from searching to booking a trip. Multiple channels are used in this process: internet, phone, mail, shops. Different channels are mixed. Internet is mainly used in search phase. For purchase people tend towards phone or shop. Lessons learned: For web-service user studies multiple channels should be taken into account.
Methode optimalisatie per intelligentie Wouter Sluis, Technische Universiteit EindhovenOn web2.0 Make a distinction between explicit behavior vs. implicit behavior: uploading photos to website vs. sharing photos with friends. Different services exist for user to acquire information. For usability study it should be observed what the user does with this service (implicit behavior) with this not only his explicit behavior.
He uses the multiple intelligence theory from Grander, that makes a distinction in 9 core intelligences. He uses 6 of them. For each type of intelligence a specific tasks a best suited to test/evaluate. Goal is to optimize user study methods to classify within this classification and find suitable tests.Martijn van Weilie
Patterns for Web 2.0 and beyond
check out the design patterns on design: www.welie.com
XAML, Flex, RIA, AJAX, Mashups, web 2.0 web4.0
no more tedious page loads, in page interaction,
read the literature: web 2.0 design patterns (O'Reilly)
auto complete (Yahoo patterns)
continous filter (www.welie.com/patterns/gui)
the web and back (to GUI or Flash style interaction)
Pattern for Web 2.0: we only need interaction design patterns
some challenges:
- combining individual effors into something larger
- reworking existing material togehter
- documenting patterns beyond the objious
- dealing with implementation issues (HTML/Flash/Flex/XAML)
leave the technology aside: concentrate on desktop application + web + mobile
lookout for paper by him in elsivier
----
Bill Spot from Yahoo! : speaker: ajax evangelist & pattern curator
ajax based application: Rico.org
what is design pattern?
- patterns directness (drag and drop, inline editing, in context tools)
- patterns invitational (hover invitation, drop invitation,)
- patterns without boundaries (endless scrolling, in context expand, inline assistant, hover detail, lightweight popup)
- pattern light footprint (rememberred collection, star rating, in page action)
- pattern cinematic (fade transition/self healing transition, slide + animate, spotlight)
- pattern (rich content, sharable object)
look for: JSON pattern API
pattern mashup and exchange?
welie, tidwell, others ------ pattern exhcange --- yahoo, oracle, ebay
http://developer.yahoo.com/ypattern
discussion:
- a design pattern is an attempt to standardize already-accepted best practive ->martijn: it is good for beginners and as a memory aid
- a collection of patterns doesn't make a pattern language (look at christopher alexander patterns)
- Web2.o should have been written in the GUI era they are the same.
- what is the most important web2.0 user interface pattern?
bill: inline editing, auto-completion.
martijn: only have a favourite principle: speed
- pattern collections are user-generated content and should be open source
bill: yes, agree
"the design of sites" to see a higher level of pattern organization.
is design pattern not inhibiting designers to be creative?
bill: informed rule breaking
martijn: no, carpenter analogy
what about the problem of (software) paten?
- martijn: he is hoping with his effort it will prohibit the person to pattened it.
Their company is a playground for developing good tools. This in initial phase, trying to acquire knowledge about how user wants to interact on web2.0.
1st app WatVindenWijOver.nlFinding something needs a story, why, where does it come from etc. But who do we trust us to tell this story?
then more on "that it is their playground" and how interaction designers work (ok!?) Great space to let users express their things.
A bit disappointing. He did not tell much about watvindenwijover but more about their way of working.
Butterfly Lammert Postma, HKU Interact with existing webpages.Only a plan for a master degree project
Sapir-Whorf Hypothesis: a connection between thoughts and language
The Deeper Meaning of Liff: A Dictionarry of Things There arent any words for yet
daughlas adams and john lloyd
---
blog, microformat, ajax, web 2.0
bottom line: the moment there is a word for the concept it is an indication of the success of the technology
---
what are the other things that does not exist yet? (Whorfd)
1. SVG as stylesheet using XBL
2. RDFa (extension of )
3. markup language on programs
- high level languages, declarative languages, etc.
problems:
- diversity of devices
- diversity of users
- accessibility
- ease of use (for programmers as well as users)
The Mythical Man Month: Fred Brookes
the number of buts increases quardratically L 1.5
a company (xport.net) combining XHTML, XFORMS, SVG, and XBL
the advantage of declarative approach:
- accessible application (because of mvc model)
- device independent applications
- reuse
- much less coding
conclusion:
web 2.0 did not just happened. it was designed in 1995 and W3C tried hard to plan this.
1. goo