beautiful drupal-ecommerce

Graeme BlackwoodCreative Lead, Deeson Onlinehttp://deeson.co.uk/online

http://deeson.co.uk/online

http://deeson.co.uk/online

Using Drupal to deliver beautiful ecommerce sites

Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online

http://www.themakingspot.com


http://www.deeson.co.uk/online


Chapter 1

How it all began...






We had to monetise the content and make it easily searchable






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


http://baymard.com/blog/kano-model

http://baymard.com/blog/kano-model





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

http://www.useit.com/alertbox/roi.html

http://www.useit.com/alertbox/roi.html





Business value of usability and delightful interfaces?

Increased sales and loyalty!






Chapter 2

The designer’s urge






http://theoatmeal.com/comics/design_changes








What is the content structure and who are our users?

We asked






Chapter 3

Don’t make me think!






We wrote user stories based on our user personashttp://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/


http://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/

http://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/





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






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






Don’t make me think!Steve Krug, http://www.sensible.com – Good stuff!

Our guiding principle was

http://www.sensible.com/

http://www.sensible.com/

Chapter 4

Labelling and language






Careful labelling helped to reduce ambiguity






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






That is, natural language for our audience, not developers (or robots)!






This could be “Shawl returned 28 patterns and 1 how-tos”But who actually speaks like that?

Chapter 5

Dealing with defaults






Customising browser and Drupal defaults helped harmonise the interfaceTabs, buttons, forms, pagers, messages etc, especially from contributed modules






We used value and colour to assign meaning

Read more Search ActiveAdd to basket

General functions Purchase functions Active statesLower value functions






and tried to give good feedback

Add to basket Add to basket + In your basket Add to basket

Hover/focus AJAX pending AJAX successDefault






We used square crops to standardise the variety of aspect ratiosThere were far too many images to crop manually






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






We used some novel interfaces that didn’t have wellestablished mental modelsThey weren’t as well understood as search, vertical scroll and buttons etc






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

We made it really easy to change currency from the default £:






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






Thank you!Any questions?Luke Simmons will be happy to answer anything technical, and there’s also http://drupal.org/node/1352442


http://drupal.org/node/1352442

http://drupal.org/node/1352442





beautiful drupal-ecommerce

Design