Applying Social Design Principles, a Brainstorming Session

Last May I participated at Christian Crumlish’s workshop about the design of social interfaces. The workshop was great, exposing several design principals, and I felt I had to somehow apply that at work in an interactive way. Based on some tips from Christian and on past experience I organized the following session.

The Principles

Christian’s book Designing Social Interfaces is a collection of design principles and patterns.

  • Prepare the meeting choosing 1 or 2 of the concepts proposed in the book.

For example, you could use the Pave the Cowpaths and Use Game Mechanics principles. Read carefully about them.

  • Prepare a few slides to explain the principles to your colleagues.

 

 

Participants

Depending on the principles you want to discuss about, you might like to invite colleagues from your own design team, product managers, programmers or marketing people. Do not underestimate your colleagues, different ideas encourage discussion.

  • Invite people from different groups.

 

The Meeting

  • Explain the principles, give examples.
  • Make sure you leave on the screen a slide with the principles (so the participants can read them during the exercise.)

You have to ask participants to imagine how to apply those principles on the current website. For example, you could ask to look for those “cowpaths” from current user behavior that could be “paved” to improve the user experience.



  • Ask participants to write short ideas on post-its.
  • After a few minutes, ask them to tell out loud what they wrote down, to explain a little bit and to paste the post-its on the whiteboard.


You will find that some ideas are similar.

  • Group ideas and ask participants to help you name those groups.



Round Up

This kind of meeting might not give you a definite answer to your design problems, but for sure it could help you start playing with new ideas, based on stablished principles.

Even more, these meetings are a lot of fun and trigger discussion and conversation through different departments.

Give it a try!

 

Pictures from vancouverfilmschool and VFS

Poka-Yoke Design

Poka-Yoke is a concept coming from Japan and means mistake-proof. It could be any mechanism helping users to avoid making mistakes while using an interface or product. The concept it’s focus on prevention, influencing the users’ behavior through the design of the product or interface. Poka-Yoke not only improves the user experience, it also helps improving safety.

I would like to show you some Poka-Yoke examples.

SIM Cards. Thanks to the trimmed corner, a SIM Card can not be put into a cell phone in a wrong way.

Close look to SIM Card SIM Card. Picture by Declan Jewell.

On Search. Poka-Yoke concept is used by Google’s search box and by other search engines to suggest users possible search terms. In the example, I mistyped “Poka-Yoke” so the search box proposes to search for the right term. The problem with this behavior is that these suggestions could influence what users search.

Poka-Yoke behavior on Google SearchGoogle search box.

iPhone. Every time a user starts a new note on the Notes application for iPhone, the upper case option is on and ready for the first letter. This is a way to prevent orthographic mistakes.

iPhone Notes application screenshotiPhone Notes application screenshot.

USB Connector. Thanks to its inner shape, an USB connector can not be connected in the wrong way.

USB Connector, inside viewUSB Connector. Picture by PJstoneson.

…actually, the shape of the connector not only prevents from connecting it upside down but also to connect it in the wrong place.

Different connectors in a MacBookDifferent shapes for each connector. Picture by Goodrob13.

Padlocks. Good padlocks do not release the key if it is not totally locked, making sure that the mechanism is totally closed and avoiding mistakes. In this case safety is a big issue.

Padlock in San FranciscoA padlock. Picture by Greenkozi.

Comparing Digital Camera Interfaces

This is a compilation of digital camera interfaces. Specially, I want to show the differences among button designs. This is not a product review and I don’t want to criticize too much, just to show them to see the differences. In order to properly judge the cameras we should see how the people behave when using them, thing we did we a few models only.

We spent some time in a huge shop touching cameras and observing other people doing the same. That gave us a first insight on the different perceptions about these devices but, of course, a shop is not the “natural” environment where people take pictures, so the context was not totally taken into account.

At last, we did interview people about cameras and we observed them taking pictures and touching the things. The conclusion: there is room for improvement on digital camera designs.

Here there are some comments and pictures of different compact cameras.

Rollei

001-rollei-x-8_sports_back-1It is easy to see the symbols on buttons, the contrast is good but having several functions working on one button could be confusing. From Rollei, we liked the way it navigates through pictures (unfortunately I can not show you that).

002-rollei-x-8_compact_white_back

003-Hi_Res_Rollei_XS-10_inTouch_Back Having less buttons could make the camera look simple, but this graphic interface show us that this is not always true.

004-rollei_cl_80_pink_back-416kb Here we noticed that it is very difficult to see the labels on buttons, the contrast is very bad.

005-rollei-8330x-se-back-gross-1211985606

Kodak

008-8765-kodakz8612back One function for each button could be a good approach. I like the knob to turn the camera on and off, it’s impossible to confuse it with the shooting button.

007-camera-backThe “Share” button might have good functionality, but honestly I don’t know what it does. What we discovered interviewing elderly people is that this group avoids pressing on buttons they don’t know what they are for.

Casio

028-Casio-EXILIM-EX-H10-10X-Zoom-Camera-pink-back This one has some buttons on the top that are almost impossible to see while taking pictures. “BS” seems to be something only Casio uses, we don’t know the meaning.

027-Casio-EXILIM-EX-Z90-back Painted buttons have great contrast! Unfortunately, it is very difficult to see what’s written on the other ones.

026-Casio-Exilim-EX-Z280-zoom-Compact-Digicam-back 025-Casio-Exilim-EX-S12-back1 It seems that Casio likes wheels. Unfortunately, these wheels do not behave like real wheels.

024-casio-exilim-ex-fs10-back

Sony

023-Sony_CyberShot_DSC-W270R_back There are some contrast issues here (on the buttons), but the most impressive things are the wheels. The one on the top is a real wheel the user can turn, the one on the bottom can not be turned.

023-sony-cybershot-DSC-N1-1 These two models (above, below) got a touch screen. This is a risky approach, success depends mostly on how well the graphic interface is designed. For the one below, graving it properly could be quite complicated. 022-sony-cyber-shot-screen-back 021-sony-cyber-shot-w210-back 020-sony_cybershot_w300_backThis model got lots of functionality, buttons and wheels!

Nikon

019-nikon-coolpix-l100-back Flash position is good here, it’s difficult to place the finger on it.

019-nikon-coolpix-l20-back The wheel could be an issue here and the buttons on top of the camera could not be seen when needed.

018-nikon-coolpix-p6000-backSome of the buttons in this camera seem to be part of this brand’s lexicon.

Panasonic

017-Panasonic-Lumix-TS1-back Painted buttons look great but the other ones have very bad contrast, I can imagine this being a big issue using the camera outdoors and even more for the elderly.

016-panasonic_lumix_dmc-lx3_back I wonder if labels like “AF/AE” are understandable to everybody. Should we carry the manual with us?

015-panasonic_dmc-tz5_back 014-panasonic_lumix_dmc-zx1_back

Canon

013-canon_sx200_rot_2 On many Canon cameras the wheel looks and works like a wheel, main function of it is to navigate through saved pictures. I like it a lot. 012-Canon_sd790_backInteresting design, but using buttons that don’t really look like buttons could be dangerous.

011-0905_canon_ixus_110_is_back This model goes in the right direction. The wheel is great. Unfortunately the graphic interface is not that simple.

010-canon-powershot-sd950-is-back We noticed that symbols on this model are difficult to understand for many people, specially the ones on the top wheel.

009-canon_sd750_back

Credits: some comments and thoughts on cameras were developed with help of Nora Gonzalez Dwyer.