USiT blog

1. Auto-sliding after the user has already taken control
2. Displaying new items in a row one at a time
3. Showing item progress in a confusing way
4. Infinite sliding
5. Tiny click targets

Human Factors International published a post outlining some important usability principles folks should practice when building an app, a website or a product. Here are ZURB's tips and examples around these principles.

The photo above shows my take on a mobile device usability testing jig, inspired by the work of Kirk Henry of Lokion Interactive (via Harry Brignull). I’ve been working on this device to help with testing site and app designs on mobile phones and tablets. Quite often these contraptions are called a sled but I’ve been calling this one “The Claw”, for hopefully obvious reasons. Its purpose is to allow you to get a good view of the screen of a mobile device—handset or tablet—as well as the user’s face, during usability testing (or any other activity that you’d like to see what’s happening while someone uses a mobile device. Using software such as TechSmith Morae 3.0, you can easily record from both cameras. A key feature of this particular design is its flexibility, it’s attached to the device and moves with it, and it can be used for two different sizes of device: smaller phones, handsets, smartphones (eg iPhone, Android, Blackberry), as well as larger tablets (eg iPad, Samsung Galaxy Tab 10.1). This second feature is achieved by having two sets of attachment locations for the cameras: one lower down for handsets and one higher up for tablets.

Design and development

After a much earlier prototype built out of a desk lamp (left side of photo below) a major design decision was made, that the rig needed to move with the mobile device, rather than sticking the mobile to the jig and asking the user to use it fixed in place. While the claw is tethered to a PC via USB cables, it still allows quite a lot of freedom of movement and lets the user hold the device more or less naturally. A second prototype was built using a wire coathanger, to get the dimensions and angles right before committing to a building material that wasn’t as pliable (right side of photo above). Two things became obvious and resulted in two distinctive features of the final design. The downward-facing camera that records the screen of the device needs to be at the right height and angle to get a good view of the screen. If angle A is too much more than 90°, you either can’t see the whole screen, or the view you get is at a steep angle meaning the perspective distortion is high (the end of the device closest to the camera appears much smaller than the end that is furthest away from the camera). Additionally the end of the mobile device furthest away from the camera may be out of focus compared to the closer end. Also, you’re balancing getting a good view of the screen with obstructing the user’s view of the screen. This is especially an issue when the camera is this close to the device. Another factor to take into account is the ‘focal length’ of the camera being used. The Microsoft VX-6000 webcams I use can’t be placed any closer to the device than I’ve placed them, otherwise the picture was blurry and the camera also gets in the way of the user viewing the screen. I also discovered that in order to provide a good view of a larger device like a tablet (without too much of any angle) the downward-facing camera needed to be more directly overhead. Hence the second bend in the claw that brings it back past vertical (ie angle B). The height of the camera was also a factor, as having it too close to the device means that you can’t see the whole screen of a 9-10” device. As before, a balance needs to be struck between getting a good view of the screen and obstructing the user’s view. After some experimenting, the angles and heights were worked out and it was time to build the next prototype...The Claw.

Manufacture

With very little budget, and because it was just a prototype, I decided not to use something like Ponoko but instead to make it myself. The Perspex is 10mm thick, to give it strength and stop it bending when in use. You can get it at any plastics fabricator, I bought this black specimen from Australian Plastic Fabricators for about $20. There are also places that can cut, bend and drill any design you want (including Australian Plastic Fabricators) but it can be expensive if you’re ordering a low number of units, like one. So I again decided to do it myself. Note: 10mm Perspex is hard to bend! :) If you have a heat gun (used for heat-shrinking, stripping paint, welding copper plumbing pipes etc) it should be fairly easy, especially if you have a nozzle that focuses the heat to a narrow strip. I didn’t have one. So I used my toaster. I don’t exactly recommend it, but it does work.

1. Print out a scale diagram of your design and place it on a heat resistant surface right next to the toaster (you’ll use it as a guide to bend the perspex)
2. Mark the Perspex where you want to bend it
3. Place the Perspex over the top of the taster, with the mark positioned above one of the slots (don’t stick the Perspex into the toaster!)
4. If you have a multi-slot toaster you might need to cover some of the slots so that your Perspex only gets heated in one spot. I used slices of bread to do this, since they were right there next to the toaster and I got a bonus snack! Don’t completely cover the slots of your toaster might have a meltdown
5. Adjust the toaster setting to a fairly high/long setting, I had to heat the Perspex for about 4 minutes, but experiment a little and see what it takes for your toaster to make it pliable enough. You don’t want to melt it, firstly because it will give off fumes but also because it’ll likely stretch as you bend it, you want it about as pliable as a paper clip
6. Once you think it’s ready to bend, use oven mitts or some heat resistant gloves to pick up the Perspex and place it on the scale diagram and bend to the desired angle and hold it in place
7. Do this quickly as the plastic will cool and stop being flexible within 10 seconds or so

[A toaster oven might also work, but it wouldn’t be very precise in terms of where it heats the plastic, and you’ll probably burn your hands. Just buy/rent a heat gun :) ] After bending is when you drill and cut the holes. If you drill and cut before bending, the lower structural rigidity will probably mean it won't keep its shape. The purpose of the drill holes is to mount the cameras. The cameras I used are both Microsoft LifeCam VX-6000 models, fairly cheap but also fairly good quality, but probably their best attribute of this webcam is it's tilt and swivel bracket that attaches to a round base. If you unscrew the base and removed it, you can mount the tilt and swivel bracket to the perspex, using the original screw. The hole for the screw will need to be countersunk because the screw is not long enough to make it all the way through 10mm of Perspex. The purpose of the large cavities is to save weight. That’s why I used 10mm Perspex, because that thickness would mean there would be enough strength after the weight-saving holes were cut. Also these large holes are a neat way to thread the cameras’ USB cables out the back of the claw. To make the cavities I drilled holes around the perimeter, very close together and then bashed out the centre and filed down the edges. It’s an old trick I picked up somewhere, probably making stuff in the garage when I was a kid, but you could drill one hole and use a jigsaw to cut around the perimeter. The weight-saving cavities remove about 32% of the weight, but leave structural integrity.

Cameras

The cameras I chose are good enough for the job, but to further advance the design, smaller and higher resolution cameras might be used. But is likely to mean a move away from USB webcams, making for a more expensive and complicated exercise. To attach the mobile device to the rig, I use 3M Command Strips (normally used for hanging pictures on walls etc). The advantage of these strips over double-sided tape is that they can be easily removed and they don’t damage the mobile device or leave any sticky stuff on it.

Morae setup

Morae 3 allows you to record from two webcams, and it’s pretty easy to do so. Start with a hardware or mobile recording configuration and set the “Main” source as the bottom webcam (the one pointing down at the device). I mount the webcams upside down to allow the tilt mechanism to work, giving an easy way to adjust the angle of the camera in relation to the rig. So in Morae you need to flip the camera using the camera settings. Set the “PiP” source as the top webcam (the one pointing at the user’s face). Again I mount it upside down so you need to flip the image in the settings. For a reason I can’t currently figure out, Morae won’t use the microphone in either of the webcams as the audio source for recording, so I use a Logitech USB desk microphone placed nearby, it picks up audio well enough. That’s it, the only things you need to do each time you use the claw is adjust the camera tilt and angle, and maybe adjust the focus ring (in case it has been bumped since last use). Then you plug in the USB cables, stick on your mobile device, launch Morae and away you go!

Future development

The claw is currently being is used for several different projects, on both handset and tablet devices. Next steps are to make some refinements to the angles and dimensions and then produce a better quality version using a service such as Ponoko.

[caption id="attachment_924" align="alignright" width="300" caption="The IKEA hack by Daylight Design"] [/caption] (apologies for the Pink Floyd reference). Anyhow, recently I've been reflecting on the benefits of wall space and utilising it for UX activities. I remember one of my early inspirations being reading about the BBC's Glass Wall project. The BBC's physical Glass wall in their offices...

gave us the title of this book was the centre of the project. Most of our discussions were visualised on the wall and its location at the entrance to the studio ensured everyone could see what was going on and contribute.

The things I like about walls and UX activities include:

• ability for passers by to gain exposure to UX and design thinking
• a large canvas, it's like being about to really zoom out and include a lot of different things that can be considered together
• ability to have these thing in the background for standup or more extended meetings where they can inspire or focus discussion
• deeper thinking can be encouraged by prolonged subliminal exposure to elements on the wall

If you are looking for inspiration on how to create portable wall space solutions for UX Harry Brignull has put put together a great list of suggestions in his What do you use for portable wall space? article, that includes a nifty IKEA hack as pictured above.

Webnographers

There's some great stuff to be found over on webnographers.org for anyone interested in virtual ethnography. Here's their blurb...

Cyberanthropology is but a fetal field, far from defined. This website was developed in the interest of providing a central hub for those interested in ethnography of the internet. Created by and for webnographers, its success in contingent on your participation.

Ethnography is not constrained solely to anthropologists, and indeed the barriers that divide the various social sciences are at once arbitrary and collapsible. Any individual interested in the complex social, cultural, and psychological facets of humans relating with and through the internet is encouraged to join in this nascent community. Webnographers unite!

This is a very interesting area of research, and an area in which our team is expanding with each and every project.
(forwarded by Pat)

The 10 dos and don’ts of website development (that every CEO should know)

Over on the FatDUX blog, Eric Reiss shares his top 10 list for management:

[...] the web has become more important than ever as a means of communicating with customers/clients/membership. But I have yet to meet a CEO who likes website development. It makes business leaders uncomfortable. The web experts speak in a cryptic language – CMS, KM, XML, CSS. The site seems to take forever to build, costs more than expected, and invariably provides less value than the organization had hoped.

No one likes signing a big check without some idea as to what they’re getting. So if you’re a business leader, here are a few basic, non-technical tips that will significantly increase your chances for online success. And they let you do what you do best – lead.

There are some good points in there, and the central point of reminding business leaders to not get caught up in the detail, but rather to be leaders is excellent. These tips were obviously learned and refined over many, many client engagements!
(forwarded by Pat)

Ridiculous User Interfaces In Film

Over on Gizmodo, John Herrman discusses Ridiculous User Interfaces In Film, and the Man Who Designs Them...

Designing a fake dashboard for an imagined supercomputer or a hovering control panel for a worldwide surveillance system is a different process than creating a genuinely usable UI. Your goal is to imply things: that a machine is powerful; that a villain is formidable; that the software is intuitive, but that the breadth of its powers borders on unknowable. At no point does real-world usability factor in, and nor should it—this is pure fantasy, for an audience raised on Start Buttons, desktop icons and tree menus

He forgets to mention the "Unix system" from Jurassic Park, possibly the most ridiculous of all of these movie UIs :)
(forwarded by Angus)

Dimensions of design/Against ahistoricity

Adam Greenfield talks about looking beyond the obvious sources of insight and inspiration, including those who have come before us...

Let’s face it: brighter and more sensitive people than us have been thinking about issues like public versus private realms, or which elements of a system are hard to reconfigure and which more open to user specification, for many hundreds of years. Medieval Islamic urbanism, for example, had some notions about how to demarcate transitional spaces between public and fully private that might still usefully inform the design of digital applications and services. By contrast, the level of sophistication with which those of us engaged in such design generally handle these issues is risible (and here I’m pointing a finger at just about the entire UX “community” and the technology industry that supports it).

Even if you don’t like Adam’s writing style, this is a thought provoking piece. Especially interesting was the introductory quote from the book Responsive Environments: A Manual for Designers which outlines how design can actually make people do things – as suggested by Jon Kolko and argued against in the recent Sydney UX book club.
(forwarded by Angus)

Walt Disney’s Creative Organization Chart

Delphine Hirasuna writes about the typically unique way in which Disney went about things, in this case the humble org chart...

The Disney org chart, on the other hand, is based on process, from the story idea through direction to the final release of the film. All of the staff positions are in the service of supporting this work flow. Perhaps the question now is what should the org chart of the future look like, given the global workforce, telecommuting personnel, virtual employees, outsourced jobs and contract workers who sometimes outnumber salaried staff? In an idea-based, rather than a manufacturing-based, economy, how should a business organize itself?

(forwarded by Angus)

Content Strategist as Digital Curator

On A List Apart, Erin Scime examines the role of curator in digital media...

When a site launches, your audience arrives to learn more about what you know most about. It’s critical to create a content experience with purpose, that is consistent and contextual. This helps to assert your brand’s authority, establishes relationships with your audience, and secures a return visit based on your content’s value. The content strategist-as-curator is the one who makes this happen. How?

(forwarded by Angus)

Landline phone numbers in electronic forms

Jess Enders shares the results of her research on how to best format phone numbers...

The research findings: one long string is the clear winner. Like the mobile phone numbers, one long string of digits—including area code—was the most common method of data entry: out of 640 landline phone numbers provided by interested research participants, 39% were entered as one long string of 10 digits (i.e. no spaces and no chunking).

(forwarded by Angus)

4 Out of 5 Viewers Leave If a Stream Buffers Once

Janko Roettgers reveals some interesting video-related user behaviour...

More than 81 percent of all online video viewers click away if they encounter a clip rebuffering, according to a new study by Tubemogul. The Emeryville-based video distribution and analytics startup took a close look at 192 million video streams over the course of 14 days to figure out how much rebuffers matter. The result: 6.81 percent of all streams rebuffer at some point, and around 2.5 percent rebuffer twice.

(forwarded by Angus)

How UCD and Agile can live together

David Farkas sets out a framework in which UCD and Agile can work together:

Diagrams are pretty, Gantt charts set expectations, but reality is far from perfect. At the end of the day, a project manager must own the project and there must be some sense of reporting. Depending on the project manager’s background and personal goals there will tend to be a focus towards the needs of UCD or Agile… Finally, friction exists from misaligned expectations from UCD practitioners forcing their methods too late in the game or agile practitioners trying to wean out hard requirements before purpose is fully understood.

(forwarded by Sophie)

Huffington Post wants to add paid tweets to its articles. Will advertisers bite?

(or, an alternate headline offered by one commenter, "HuffPo Sells Remaining Fraction of Soul for Ongoing Revenue Stream"?)

In Advertising Age, Nat Ives reports...

The Huffington Post has started offering marketers the ability to inject their own paid comments among reader comments and place paid Tweets among the live Twitter feeds the site assembles around news subjects and events.

Marketers haven't bought in yet, but they seem likely to be intrigued. The biggest question is whether marketers and the Huffington Post can execute the program without marring visitors' experience reading and interacting with the site.

(forwarded by Sophie)

Should journos have their Twitter profiles taken from them if they change job?

And, on the subject of journalists tweeting, Mumbrella asks whether journalists should have their Twitter profiles taken from them if they change jobs:

There’s an argument both ways. You could view it in the same way as when a reporter changes newspaper, they’ll take their contacts book with them. I’ve now got business cards and contacts books stretching back 20 years. I’m not sure what use the private phone number for Farnborough ambulance station in the UK would be for me now, but I’ve still got it somewhere.

(forwarded by Sophie)

Technology First, Needs Last

Don Norman stirs things up with...

I've come to a disconcerting conclusion: design research is great when it comes to improving existing product categories but essentially useless when it comes to new, innovative breakthroughs.

(forwarded by Angus)

A Rebuttal to Technology First Needs Last

Todd Warfel replies to Don Norman's post...

Technology didn’t drive these innovations, it was merely the road. The driver was an opportunity for invention and design research was right behind the wheel.

When both sides of a debate are highly respected experts, it makes for an interesting read!
(forwarded by Angus)

Short-Term Memory and Web Usability

Jacob Nielsen reports ...

The human brain is not optimized for the abstract thinking and data memorization that websites often demand. Many usability guidelines are dictated by cognitive limitations

(forwarded by Angus)

My big list of 24 Web Site Usability Testing Tools

Craig Tomlin shares his list...

In the past few years, there has been massive growth in new and exciting cheap or free web site usability testing tools, so here’s my list of 24 tools you may need to use from time to time.

(forwarded by Angus)

Make the logo bigger! (the song)

In the finest tradition of Spinal Tap comes this mock-metal song Make the logo bigger, sure to raise smile on the face of anyone who's had to deal with clients who want their logo...just that little bit bigger. (Warning: make sure you turn down your volume before playing the song)

(forwarded by Angus)

iPhone app for The Independent (UK)

Over on Econsultancy, Graham Charlton reviews the latest newspaper website mobile app...

The Independent iPhone app is a departure from some other newspaper apps, as it is designed to allows readers to download all the articles while they have a decent 3G or wi-fi connection, and saves them for reading while offline.

An interesting approach.
(forwarded by Sophie)

Surrender! Foucault and Twitter

Ian Delaney laments the direction in which social media may be taking us...

Some of my early hopes for social media, that it represented, like Kevin Kelly reckons, some kind of renaissance for socialism in the western world, are starting to run dry.

Do we blindly accept "social media networks as empowering, democratic and all about spreading fresh ideas"? Delaney says "The reverse may be the case: any given information about ourselves donates some portion of control to another party". It's the "dark side of social networking" he says. An interesting philosophical read to break up the mountain of practical posts, articles and reports we read day in and day out.(forwarded by Chris)

A summary of user research methods

Lastly, on his personal blog, our own Patrick Kennedy summarises a whole bunch of useful user research methods...

In this article I give a quick overview of the methods I commonly use, broken down in to main categories:

• Direct user contact—where the researcher does very much interact with users, or members of the audience as I prefer to call them
• Indirect user contact—where the researcher does not actually interact with members of the audience

A few months ago I was invited to present at the UPA (Usability Professionals Association) Sydney's 2nd anniversary party alongside the excellent Cameron Adams who talked about the design of Google Wave. Having presented a few case studies ,over the course of the year, I decided to take a different approach to this talk and explore a more blue sky topic. In this case - the progression away from the Direct Manipulation paradigm towards Indirect Manager via Intelligent User Interfaces and the Semantic Web. I've only now got around to posting it here, better late than never!

Normal 0 false false false MicrosoftInternetExplorer4 New book: Digital Experience Design: Ideas, Industries, Interaction

Way over a year ago I was lucky enough to be invited to participate in a project initiated by my friend and former colleague Dr Linda Leung from the Institute for Interactive Multimedia, University of Technology, Sydney. Linda is the a Senior Lecturer, course coordinator and one of the founders of the Masters of Interactive Multimedia offered by the Institute and I used to teach with her in the subject Digital Information and Interaction Design. The subject

encourages students to critically engage with interdisciplinary approaches to information and interaction design

and to apply their own interpretation of these theories

to real-world design project in which students work with a client, with advice and input from industry professionals.

Typically the real world project was developed for iTV and that in itself required students to translate the principles of web design and information architecture to the development of interactive television (iTV) interfaces.

I was one of those industry professionals involved with teaching the subject (during the time I was also working at Information Architect for the Institute). One of the challenges Linda identified when teaching aspiring experience designers is (in her own words)…

the awkward rise of a discourse and discipline finding its feet and which still needs to grow with the support from its older cousins. Indeed, the necessity of turning to other design disciplines is acknowledged by Shedroff (2001:2 in Leung, 2008): simultaneously having no history (since it is a discipline only recently defined), and the longest history (since it is the culmination of many ancient disciplines), Experience Design has become newly recognised and named.'

So that is where I came in. I was one of ten industry professionals working in digital media who came from backgrounds diverse as education, feminism, fashion design, architecture, cultural theory, film-making who had moved into experience design. Linda recognised that these backgrounds had significant impact on the approach we as experience designers had towards the work we now did and provide a framework for understanding our discipline in a multidisciplinary way and so she set out to write a co-written book with the nine of us.

My own background is in fine art and although I don’t often make the connection consciously, my early training in fine art (I now recognise) has helped me along the way in understanding users particularly in relation to how they interact with the visual and aesthetic properties of digital media. It’s also helped me understand and work with visual designers. My contribution to the book can be found in chapter ten entitled Art and Articulation: The Finer Points of engaging the User in Abstract Concepts and Lateral Thinking. To give you a taste…

Fine art challenges its audience to engage with abstract concepts that may not be easily articulated and require introspective reflection. The art gallery offers a rich metaphor for conceptualising digital experiences: just as the gallery is the space where the spectator engages with works of art, digital worlds represent the interface between users and content. Furthermore, the art world creates experiences that enable uses to tackle challenging content, and elevates content to the level of the sacred. This can be applied in digital design to contexts where ideas take primacy. However, conceptualising an online environment as a gallery and its content as “art’ can mean contravening web usability principles which assume task-orientated, utilitarian and time-constrained online interactions.

This chapter examines the ways in which art is presented, and the design of experiences of art. The instruments which ‘frame’ an artwork and scaffold the experience for the spectator are discussed in relation to how such techniques can be translated for digital contexts.

I’m excited to announce that tonight Digital Experience Design: Ideas, Industries, Interaction (Edited by Linda Leung) is being launched by Dr Elaine Lally, Senior Research Fellow and Assistant Director Centre for Cultural Research, University of Western Sydney and  is available from Intellect Books and Amazon.

It’s been an amazingly insightful experience for me to work with Linda and gain some knowledge into what it takes to turn an idea into a book. I have utmost respect for her determination and academic resilience to the writing, editing and review process and thank her immensely for the opportunity it has given me. It’s exciting also that the book will be utilised as the set text for two subjects: Digital Information and Interaction design and Digital Sound and the Moving Image in the Graduate programs for Interactive Multimedia at UTS. I’m dying to read all the chapters as collection and ponder the mulit-disciplinary realm of our practice myself. If you are reading this an happen to go on to the read the book I’d love to know what you think, maybe post a comment here on our blog. In the meantime I’ll leave you with Linda’s summary from the back of the jacket.

Digital Experience Design chronicles the diverse histories and perspectives of people working in the dot.com world, with contributors from a wide range of different backgrounds offering autobiographical accounts of their careers in the digital experience design and interactive media industry. This is a book of ideas about digital experience design expressed through the voices of practitioners and seen through the lenses of the disciplines in which they originally trained. From the perspective of older disciplines such as education, fine art, and cinema, this volume investigates how dot.com practitioners balance the 'science' of usability with the 'art' of experience design and  the more abstract, emotional and atmospheric elements of users’ digital interactions. Digital Experience Design seeks to borrow from alternative fields that have richer traditions and longer histories in experience design to assist current online designers and practitioners. Covering  a range of forms of digital experience design, be it computer games, DVDs, touchscreen kiosks or mobile phones , this edited volume is a valuable resource for industry practitioners and students and teachers of interactive media.

Interesting post by Bruce Tognazzini about whether Apple's software product design ethos is too simplistic. Now (confession time) not being an Apple aficionado I can't really pass comment, however his general points seem quite valid. One of the founding principles of Interaction Design is to create solutions that are eminently understandable by the novice, but grow as the user become more competent then expert. So, we aim to make the initial state as simple and as closely aligned to the user’s mental model as possible. Simplicity does not mean lack of functionality (which I think could be the issue with Apple), it means a fast initial learning curve and consideration of the number of concepts a user needs to understand. However, the product should have a built in path to higher proficiency, facilitating enhanced functionality, high speed interaction and minimal application feedback as the user requires it. Tognazzini seems to be implying that Apple software products are well suited to ‘Leading the novice' but fall short on 'empowering the expert’ . Certainly, in the past, Apple have not really carried out much in the way of design research. Could this be at the heart of some of these issues? Do any of you Apple users out there think Tog’s argument is justified?