View
1.846
Download
0
Category
Preview:
Citation preview
Graeme BlackwoodCreative Lead, Deeson Onlinehttp://deeson.co.uk/online
Using Drupal to deliver beautiful ecommerce sites
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Chapter 1
How it all began...
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We had to monetise the content and make it easily searchable
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
The website had to be beautifulBy this I mean going beyond the basic stuff we take for granted to deliver unexpected, delightful user experiences – http://baymard.com/blog/kano-model
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Average return on investment for improving user experienceNielsen, http://www.useit.com/alertbox/roi.html
83%Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Business value of usability and delightful interfaces?
Increased sales and loyalty!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Chapter 2
The designer’s urge
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
http://theoatmeal.com/comics/design_changes
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
http://theoatmeal.com/comics/design_changes
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
What is the content structure and who are our users?
We asked
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Chapter 3
Don’t make me think!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We wrote user stories based on our user personashttp://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Then started testing early by prototyping in DrupalWe used real prototypes instead of wireframes or static HTML for testing areas of the interface that required interaction
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
At this stage, we just turned on modules like Apache Solr and Flag unthemed
to begin user testing them
Ongoing user testing continuously informed the design processDeveloping and testing the prototype while designing the interface meant no designing in the dark
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Don’t make me think!Steve Krug, http://www.sensible.com – Good stuff!
Our guiding principle was
Chapter 4
Labelling and language
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Careful labelling helped to reduce ambiguity
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Not this sort of labelling
Adjectives add clarity
What am I searching?
We tried to use natural languageConcise, but with conjunctions like and, for etc
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
That is, natural language for our audience, not developers (or robots)!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
This could be “Shawl returned 28 patterns and 1 how-tos”But who actually speaks like that?
Chapter 5
Dealing with defaults
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Customising browser and Drupal defaults helped harmonise the interfaceTabs, buttons, forms, pagers, messages etc, especially from contributed modules
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We used value and colour to assign meaning
Read more Search ActiveAdd to basket
General functions Purchase functions Active statesLower value functions
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
and tried to give good feedback
Add to basket Add to basket + In your basket Add to basket
Hover/focus AJAX pending AJAX successDefault
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We used square crops to standardise the variety of aspect ratiosThere were far too many images to crop manually
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Portrait images push the content below the fold
What happens to different images when sized to a fixed width
Landscape images become very small
Resize and square crop standardises both
Chapter 6
Completing the user experience
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We used some novel interfaces that didn’t have wellestablished mental modelsThey weren’t as well understood as search, vertical scroll and buttons etc
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Faceted search is becoming more popular, but people aren’t as used to it
as other search methods
So we made an effort to keep things clear and uncluttered
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
We made it really easy to change currency from the default £:
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Voila!
We built personal wishlists for registered users to add any pattern to
Users can choose whether they want to display their downloaded patterns publicly...
On their profiles...
...and on the project page
Summary• We worked at really understanding our content and audience
• Basic prototypes were refined through regular testing
• Good labelling improved understanding, and using the language of our audience made it feel like home
• Drupal and browser defaults were styled to harmonise the interface
• We focussed on getting the basics right, with extra touches to delight
• Novel interfaces were tested and refined to ensure they were natural
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Thank you!Any questions?Luke Simmons will be happy to answer anything technical, and there’s also http://drupal.org/node/1352442
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
Recommended