Archive for the ‘User Experience’ Category

Bath openMIC #4 – Mobile Web, HTML5 and CSS3

Robin Greene - February 12th, 2010

openMIC

Yesterday, I attended the Open Mobile Innovation Camp at the innovation centre in Bath. The event was hosted by Chris Book and had talks from Giles Turnball (Freelance Journalist), Bruce Lawson and Patrick Lauke (both from Opera). The focus of the day revolved around the current trends in mobile app development and the tensions between Native, Web and Widget apps.

The day kicked off with tech writer Giles Turnball talking about how technology has turned the press industry upside down. He recounted tales from the 90s of infra-red modems, Palm Pilots and GoType keyboards, and being one of the first journalists to actively embrace remote reporting and email. Although initially laughed at, remote journalism is now standard and Giles encouraged us not to neglect advancing technologies, but to learn about them and look to integrate them into our businesses and working lives.

Next up was Richard Spence who ‘controversially’ spoke about non-iPhone development. He reminded us that only 8% of the mobile market is iPhone whereas 71% is browser based. Richard didn’t slag of the iPhone, on the contrary, he “thanked Apple from the bottom of his heart” and agreed with Stephen Fry’s eloquent observation:

Does anybody seriously believe that Android, Nokia, Samsung, Palm, BlackBerry and a dozen others would since have produced the product line they have without the 100,000 volt taser shot up the jacksie that the iPhone delivered to the entire market?

Richard went on to give a brief history of mobile development platforms and where they are at now. J2ME, Blackberry and Symbian were all covered and commended for their recent improvements in the light of the ‘iPhone effect‘.

The final talk of the morning was from Bruce Lawson from Opera. Bruce was in jovial mood and was quick to evangelise the latest Opera Beta which claims to be the current fastest Javascript engine. Bruce championed the W3C Mobile Web Best Practices and also highlighted some of the UX and accessibility challenges that await. Bruce emphasized the importance of optimization and minimising HTTP requests. He went on to talk about future advancements in HTML5 and CSS3 and the features that the latest Opera already supports. One particular point of interest for me was the use of Media Queries to change CSS layouts dependent on screen size, without JS sniffing. Bruce finally talked about the potential of Widgets, that Opera are involved with in editing the W3C standard.

After a lunch at the local chinese and heated debate on technology, we broke into smaller groups for our barCamp sessions. The philosophy of barCamp is to create open group dialogues about an agreed topic and to work / explore collaboratively. I attended a discussion on HTML / CSS3 with the guys from Opera, and for my second session W3C Standards for Mobile Web. Both sessions were really insightful and was particularly interesting to hear peoples’ comments from the mobile industry on mobile web.

I also picked up a couple of useful tools:

Native Mobile Development Platforms for Web Developers

Appcelerator Titanium

PhoneGap

W3C Mobile Validator

http://validator.w3.org/mobile/

Perhaps most surprising, coming to the event as a pure Web Developer (with past dabblings in mobile), I certainly didn’t feel like an outsider or feel like the technology was flying over my head. In fact, I came away with an increasing awareness that, whether I like it or not, Web Development is not simply going to be solely about the Desktop. As hopes of an archaic browser death is on the horizon, another friend is also lurking. In our discussions on Mobile Web Standards, we were reminded that the largest mobile usage is not in China, the US, or Europe, but in developing countries. If the days of IE6 support is numbered, then the days of mobile WAP support may be coming back from the dead!

What do you think?

Robin Greene - December 9th, 2009

A common design question that’s asked is ‘What do you think?’. A question we often ask when presenting design ideas or when the product is publicly launched. The anticipated outcome of that question is often expected to be a lateral answer, best illustrated in the diagram below:

What do you think? Like or Dislike?

But we all know that subjective design opinions are not as black and white as this. Along the spectrum are a number of complex influences that affect the outcome of the answer. One way to explore the outcome of this answer, and so to influence the approach to your design, is to ask a different question: ‘How do you think?’.

In designing user experience, user behaviour must be taken into account. But what determines a user’s behaviour? Now I’m no psychologist or sociologist, but do understand the importance of understanding user behaviour to influence design decisions.

When approaching a design decision, often the common influences are made by budget, client preferences (eg. colour), technical restraints, web trends etc. A common oversight is why the work is happening in the first place – why is the end user not using the product and making the client more money? How can we encourage the user engage more? etc.

There are lots of helpful tools to explore these questions – Personas, User Testing, Mental Models, Wireframing, User Interviews, Google Analytics and site monitoring tools etc.

However, at the heart of all these tools are not ‘What do you think’ but ‘How do you think?’

I was reminded of this again when Andy showed me a map of Russia from the Cold War era, I’d never seen Russia as a country from this perspective before. I’m very familiar with the classic landscape view of the world, even Google use it:

Google view of Russia

From this perspective it’s easy to see how, during the Cold War, Russia appears to be an imposing mass, disproportionate from it’s surrounding neighbours. However, in the perspective below, it’s easier to see the surrounding threat from all sides:

Russia perspective

Indeed, from this perspective it’s easy to see how Russia is encamped by every major continent with the exception of Australasia. From this perspective it is easier to explore decisions and expectations made, and maybe change our thinking or approach.

The challenge to us as designers, is not to get consumed with the end result to the point that we miss the very questions that start the process.We need to be looking for examples to learn how our users are thinking, what decisions they make and why?

I’ll finish with some insight from Albert Einstein:

“Innovation is not the product of logical thought, although the result is tied to logical structure.”

Oops, Sorry, Whoops, Oh Pants

Robin Greene - October 20th, 2009

We all make mistakes – that’s life! But how should we own up to it? Whose fault is it?

Carsonified have a great blog article about this very issue – 10 Tips on Writing Hero-worthy Error Messages by Christine Brodigan.

Great design is FUN design

Robin Greene - October 9th, 2009

This video is a great example of fun, interactive and social design. Interesting experiment too!

YouTube Preview Image

Usability in game design (Portal)

Nick Dymond - September 7th, 2009

I’ll admit to being a little behind the curve on this one, but last weekend I finally got around to playing Portal, the 3D action-puzzler from Valve Studios. Much has already been written about the game, but what I’d like to briefly discuss is the work that went into usability during the game design process. In this respect, as with many others, Portal is a master-class.

Valve have a culture of play-testing from week one of production, something that has obviously had a large impact on the success of their games (http://www.gamasutra.com/php-bin/news_index.php?story=19523). The developers’ primary challenge was to introduce the new gameplay element of ‘portals’ – doorways that can be opened up by the player using a ‘portal gun’, a device that allows the player to fire two portals. The antagonist can then walk through one portal and out of the other. Simple, right? Wrong. The system opens up a whole world of perceptual confusion in novice players, who find it difficult to comprehend the rules of the new physics they are manipulating. One common mistake is to believe that you are switching between dimensions, rather than remaining essentially in the same locale. To counter these issues, Valve introduce game elements gradually, allowing the player a level of independence and experimentation, whilst guiding them subtly towards a greater understanding of the game. Obviously this hand-holding approach is common in game design, but I can’t think of any other instances where it is so transparent and effortless. It never once patronises the player.

The visual design, although completely immersive, is relatively spartan, reflecting the research facility scenario and more importantly creating a strong, consistent aesthetic to the puzzles encountered. One good example of their ethos is that all interactive elements in the game world are circular or rounded, whereas non-interactive elements have squared edges. There are many more complex aspects to the design work, but unfortunately I have work I ought to be doing…

If you’re interested, there is a developers’ commentary (http://www.youtube.com/watch?v=JB97SyCr8Wk&feature=related) in the game that is as revealing as it is enlightening. I would certainly suggest playing through it first before taking a look at the commentary. See how many mistakes you’d have made were it not for the exhaustiveness of Valve’s design methodology.

P.S. Oh, I almost forgot (thanks for the reminder Jess): there’s a 2D flash version that gives you some idea of how the game works http://portal.wecreatestuff.com/