Myki, a lesson in how not to design a user experience

It’s been two months now since the Melbourne public transport system ceased to offer short-term ticketing options. Now commuters have no alternative but to use Myki cards. Anyone who wants to travel on Melbourne’s buses, trams and trains now must purchase a Myki card and pre-load funds onto it before travelling.

It seems every person you talk to has an issue with Myki. It’s a user experience nightmare. The machines are confusing, the screens are hard to read, the card readers often don’t work (although this has got me several free trips to work on the bus, thanks Myki), tourists have to invest in a system they will only use a few times, the list goes on.

Following a communications push to get people using Myki after the other ticketing options had been removed at the start of 2013, I saw this as a timely opportunity to get down to Flinders Street Station to observe how commuters were coping in a Myki-dictated world. Yeah, most people managed to get through the station relatively unscathed but I witnessed a shocking number of people struggling with the system at a number of points.

Let’s start with the Myki machines.

My observation started at about 6.30pm after the evening rush had started to subside. A line of people had formed at the machine I was observing as people struggled to work out how to top-up their card. The line (and frustration) quickly grew. Whilst I was watching, several people threw their hands up in the air after coming face-to-face with the beast machine, friends stepped in to assist friends struggling to understand which option to select, meanwhile, people behind shuffled their feet and shifted closer to the person in front in an attempt to hurry them along. Several people had to reposition their Myki cards a few times before getting it right, whilst one lady almost left her card behind in her haste to get away from the machine. The queue for the Miki machine is not a fun place to be.

Upon stepping up to the machine, you are assulted with arrows. They point everywhere with no indication of what to do first. The screens are difficult to read because of the awkward angle they are positioned at to meet accessibility regulations. The card holder sits at a precarious angle. The process of topping-up using the current user interface is confusing, unintuitive and time-consuming. Quite frankly, the user experience of the Myki machine is a mess.

So here are a few recommendations that I think might help alleviate the problem…

The home screen should display the key user tasks – buy, top-up or check balance – and should use the same icons to represent these tasks as those used on the website and on the tops of machines for consistency. It should be obvious where to start. The area surrounding the screen should be clear of unnecessary distractions (ie arrows pointing at every possible thing on the machine). Once a user selects the task they want to perform, they should be stepped through the process and have choices explained to them at each step (ie. what is Myki Money and what is a Myki Pass? How do I know which one to choose??).

Maybe a home screen like this…

Instead of this…
old welcome screen

Give people options, make sure the meaning of those options is clear, then tell people what to do next. Don’t throw a heap of arrows on the thing to draw attention to every element at the same time!
Myki machine

I know from personal experience that topping-up at your local 7-Eleven or IGA is a much more pleasant experience. Given that many people are still unfamiliar with the system and the options available for topping up, why not put signs above the machines that point out other locations nearby that offer Myki top-ups, and tell people that they can top-up online so that people know for next time there are other options?

Oh, and here’s an idea, maybe allow people to tilt the screen so that taller members of society can actually see what’s on it without having to alter their trip home to drop in to the local chiropracter for a spinal realignment after having to contort their bodies in unnatural positions to be able to see the screen.

None of these recommendations are particularly mind-blowing, just common sense really. What is mind-blowing is how little actual user testing seems to have been carried out on these machines. Myki should be making user testing a major priority. After taking just a few minutes to observe real users interacting with the machines, it’s obvious how flawed the user experience is… and I haven’t even started on the user experience of the entry and exit gates yet! (more to come)


How do you know how many people are using mobile/tablets to access your website?

Google Analytics makes it really simple to find out this information. Once you’ve logged into your Google Analytics account, in the left-hand menu under the ‘Audience’ section, click on ‘Mobile’ and then select ‘Overview’. This will show you a screen that tells you how many visits to your website were from a mobile or tablet and how many weren’t (meaning those visits must be from a laptop or desktop computer).

To show this data in percentages, click on the little pie graph icon at the top-right of the data table. This will change the table to a pie chart with percentages displayed.

To drill down a bit further to see exactly which mobile and tablet devices are most commonly used, click on ‘Devices’ in the left-hand menu. Again, switch to the pie chart view if you want to view this information in percentages.

What next?
If after checking your own stats you decide that mobile/tablet usage is too significant to ignore, you’ll want to do something about it.

Read more about the various options for optimising your site for mobile and tablet devices in this article.


Is your website ready to receive most of its traffic via smartphones and tablets?

 Did you know?

  • More than 50% of Australians now own smart phones
  • Close to 25% own tablets (this number is set to increase rapidly over the next year)
  • 31% of consumers use their smartphones to purchase a product or service (Source: Google and Ipsos, AU, 2012)
  • Google say Australia has the 2nd highest per capita uptake of smartphones in the world behind Singapore
  • 4G networks are making it faster and more convenient for anyone to access internet content than ever before
  • by 2014 mobile internet usage should have overtaken desktop internet usage (Source: Microsoft Tags)

In addition, after analysing some of our own clients traffic, we have found that the percentage of visits from mobile/tablet devices range from 20-40%. Thats a lot of business.

What does this mean for your organisation’s online assets?
As more and more of your online audience is accessing your website content using smartphones and tablets, its never been more important to make sure your online properties are optimised for viewing on mobile devices. It’s as simple as that.

The recent rate of increase of usage of mobile devices and apetite for consuming content online has been steep. Today, unless you’ve already undertaken to optimise your websites for viewing on smartphones or tablets, its much more likely that a poor user experience is turning people away from your products and services than turning them on.

Addressing the problem
As usual with all things digital, there are a few options available to you to.

Native apps
A native app is one that you download to your device from an app store. Once downloaded you can access the app and its content at any time. A web app is accessed through a web browser on a device. Native apps are expensive to develop and you need to have your app and its content approved by the app store before it can be downloaded by your audience. Apps are ideal for ideal for publishing things that can’t be achieved via a standard web browser. They can’t be quickly updated like a website with a content management system can.

Mobile websites
A mobile website is a 2nd version of your main website that has been designed specifically for the smaller screens that mobile devices feature. Due to the user experience being tailored to these devices mobile sites are often very simple very effective. A downside is that you may end up needing to manage the content of two sites which is just more work. In addition there are some issues concerning ‘duplicating content’ on more than one website and how Google rankings can be negatively affected.

Responsive websites
Responsive websites use page templates created using HTML and CSS3 – just like most standard web pages. The difference is that responsive web pages feature CSS3 media queries that detect the screen resolution of the device being used to view them. The web page layouts then adjust to suit the screen size. For most content driven websites, this is where it’s at in our opinion.

Do we need to rebuild our website from scratch?
Don’t panic. There is a good chance your existing website templates can be made to work more responsively without having to rebuild entirely. This is excellent news if your existing website’s functionality is doing an adequate job. On the other hand if you are thinking of redeveloping your website from scratch anyway, now is the time to consider which of the options above are going to be right for you.

What next?
If you’re concerned your online properties are not performing as well as they should, perhaps its time to do something about it before your competitors get the upper hand. If you’d like to talk to one of our friendly team at Surface Digital feel free to get in contact.

Google Analytics
In the meantime if you’ve got Google Analytics set up on your website, here is a quick overview of how to find out how much of your website traffic is accessing your content via mobile devices.

Further reading
Read The Mobile Playbook by Google to learn how to get started with a strategy for winning with mobile. Its a free resource and you don’t need to download anything. You click the link above and start reading.

 



What is a web browser?

You use one almost every day. You’re probably using one right now. But what is a web browser and how does it affect what I do online? Here are some questions and answers that we often have to explain and educate our clients about their web browsers.

A web browser is a piece of software installed on your computer that allows you to view websites. Without a web browser you wouldn’t be able to view web sites. The browser uses your internet connection to download web pages and content from a remote computer, then interpret and display that information on your computer.

You are using: unknown

but you don't have to use unknown - there are lots of browsers out there, including:
BrowserBrowserBrowserBrowserBrowser

“So many decisions. What browser would you recommend?”
For the most part, all modern browsers do a darn fine job. So, it’s not really important what browser you decide to use; pick your favourite and roll with it. All that’s important is that you stay up-to-date. Some browsers, like Firefox and Chrome, make this easy by keeping themselves up-to-date (which is why internet people love ‘em!) whilst other browsers, like Internet Explorer and Safari, make things a little trickier because they need to have updates installed.

“Why should I stay up-to-date?”
Mostly so we can make websites do cool things that they couldn’t do before. But there’s so many good reasons that are in your interest:

Modern browsers keep you more safe by warning you of sites that contain malware and other things that may harm your computer. Modern browsers do everything faster; by loading and rendering pages quicker and running scripts faster. Modern browsers make new technologies available that enable web developers to make faster, smarter, prettier and more efficient web apps in less time.

“Help! My site doesn’t work in some browsers!“
Whoa! First of all – unless a site is cutting edge whizbang amazing, every web page should, at least, work in every major browser. There are very few acceptable reasons for a site to not work. So, if your site is broken (or you know one that is) then you should probably tell somebody. On the other-hand; if your site just looks different then that may be okay – as long as it still looks pretty good and functions as intended. We do our best to make sure our sites look great in all modern browsers and doesn’t break in older ones.

“Can’t you just make the page look and behave exactly the same in every browser?”
Yes, probably. But you’ll probably find that it’s not economically viable to make it exactly the same in every browser. You’ve got to be prepared to pour a lot of time into something that (probably) only 2 people will ever notice: the site owner and the geek that spent hours in the dark making it work. Each and every aspect of design and interaction will need to be tested on each and every browser, plus every version of every browser. It’s not a big deal if your site doesn’t look exactly the same – people are only every likely to see it in the browser they use and will never know the difference.

  1. Did you know that each browser has its own “engine” for rendering pages? Strange, but true. Browsers render pages by reading the code behind them and deciding how that should look and behave. For the most part browsers do this pretty much the same way but, sometimes, browsers have slightly different interpretations of the code behind in deciding how a site should be rendered. Multiply this slightly different interpretation by the many thousands of lines of code driving your website and there’s bound to be a swiss cheese effect somewhere.
  2. You can’t teach an old browser new tricks (not all of then, amyway).
    So, each browser renders pages differently? Well, hold on to your hats, because this problem is only exacerbated by the fact that each version of each browser might also render pages differently. This is partly because old browsers don’t know what to do with new code, so they’re probably just going to ignore it. It’s also because some browsers have broken bits in them that are fixed later on.

With so many browser versions out there and so many changes being made to the ways in which certain instructions are interpreted it remains difficult to ensure that your website will work exactly the same on every browser. The problem would be much less significant if everyone used a modern browser. Then websites could do a whole lot more by leveraging new technology, instead of being held back to support old technology. If your browser is more than one major version behind then there’s a good chance you’re contributing to the problem.

So, what’s the solution?
We’d love it if everyone could just keep their browser up-to-date. That’s not always possible (but almost always is). If your computer at work doesn’t let you install another browser then you should ask them to do it for you. If you’ve got your own computer then there’s no excuse – get under the hood and get a little greasy! You can check if your browser is up-to-date at www.ismybrowseruptodate.com

It’s fair enough to ask for a website to work. Imagine if we said that you had to install a particular version of a browser just to view a website – ridiculous (the only people that can get away with that malarky are the Tax Office!). But if you want your website to have the best user experience and interaction possible then we need to drop support for browsers that are getting long in the tooth. We can, and will, make sure your site works on every browser we possibly can but to make things a little easier we’d love it if, where possible, you could do your bit and make sure you stay up-to-date!

Further reading:

“Why do geeks hate Internet Explorer so much?”
Succinctly as we can; Internet Explorer (IE) dominated as the most popular browser for a very long time. Internet Explorer version 6 (IE6) was a great product in 2001 but (possibly due to having total domination of the market share) Microsoft didn’t really bother to do much with it for years, which was a problem because parts of it are broken. A substantial proportion of people browsing the web still use IE6. Microsoft wants it gone and Google don’t support it; and neither do we. However, new versions of IE are much nicer and Microsoft wants to spread the love. We don’t hate IE but it’s got a long way to go before it’ll be our favourite browser!

Most people we know in the business of making websites love to use Google’s Chrome browser; us included! It’s built on Webkit (the same open-source platform that Safari is built on, which is heavily developed by Chrome and Apple) and purrs like a kitten. It keeps itself up-to-date and is quickly overtaking Internet Explorer as the preferred web browser World-wide.


Why tablet usage has to factor in your digital strategy

Do you own a tablet (e.g. iPad, Samsung Galaxy Tab)? If you don’t, you most probably will in the next year or two. Market research and statistics are showing tablets to have the fastest uptake in the history of technology. No other electronic device has penetrated society so quickly. It took 4 years for Flickr, a photo-sharing website, to hit 10 million users, but only 1 year for Flipboard, a tablet-only application, to hit the same number. It is clear that tablets are not a “fad” that will simply pass without a trace, they are here to stay for the long run, and make a huge impact on how we interact with the digital space in the coming years.

What does this mean for businesses and organisations?
The implication is that your users are accessing information about your business and interacting with you in a new way. And if there is a new way, then those who embrace and adapt faster to the new opportunities presented will be able to outsmart their competitors and do better. Factoring in tablet usage within your overall digital strategy will drive deeper engagement with your users, leading to increased sales and customer loyalty.

Aren’t tablets the same as PDF brochures?
No. It is very tempting for businesses who produce digital content in PDF brochures to treat the tablet as another PDF reading device. Sure the tablet can display the same content, but you are missing out on the additional opportunities that the tablet offers. If done properly, tablet content can utilise interactive tricks such as swiping and zooming, and play animations and videos in context, resulting in a much more immersive and engaging experience than a PDF.

Aren’t tablets the same as laptops?
No. Again, it is very tempting for businesses to treat the tablet as just another computer. Sure the tablet’s relatively big screen size compared to a mobile means it displays most websites properly so users don’t have to scroll horizontally. But interacting with your stubby fingers present a different scenario from clicking with a mouse pointer. Moreover, the tablet is often used by people in their personal spaces, such as the bedroom, or in front of the television, rather than a workstation. In a more personal environment, your customers are in a different frame of mind and will require a different experience. That’s why we stress the importance of planning and designing digital content specific for the tablet.

What’s next for those businesses and organisations who understand that they need to start addressing tablet users in their communication strategy?
If you are creating a digital product, such as an app, or having a new website built, start by researching into whether your product/website is more likely to be accessed by users on computers or tablets. If you already have a website, perhaps talk to your digital provider about how to improve the website user experience for tablet users, such as creating a responsive layout or a tablet-specific experience. Ultimately, it is quality that pays dividends. If an app is free and beautiful, it is “amazing”. If it is free but a substandard experience, it will likely tarnish your brand.


Become a design leader in your organisation

Something I’ve done a lot of thinking about over the last couple of years as our agency has grown is how to help others along the path to leadership.

Like other digital agencies, in order to evolve with the times and speak the user experience ‘vernacular’  Surface Digital has found itself needing to repackage what it’s always done into a set of recognisable UX disciplines. We’ve seen new roles emerge requiring the development of new skills in some instances, and minor tweaks to old roles in others but one of the most interesting things that I have observed is that all of a sudden, it seems, there is a requirement for everyone involved in digital design to become ‘design facilitators’.

There have been many good things already written about the value of design thinking and the role of design facilitation in achieving better user experiences. One of my favourites being Jason Furnell’s description of the ‘design glass ceiling’ and the ‘hated design princess’, in which he points out that visual designers who are great at making things look good but who perhaps aren’t much good at anything else, tend to find that the level of complexity of the problems that they get assigned eventually become limited. They in a sense become overlooked and isolated from the rest of the project team when the big problem solving conversations go down.

So how does a designer (or anyone involved in the design of digital services) working in an organisation – where all the big interaction design decisions are being made by everyone else – work their way back into the conversation and influence both their and their organisation’s destiny?

My advice is to avoid jumping straight into design facilitation. If you’ve never really facilitated collaborative design workshops before, take it from me, they are a lot harder to do well than you might think.

Effective design facilitation, is as much about leadership as it is about creativity. Effective design facilitators, like effective leaders, know ‘when’ to get the team together. They also understand that everyone’s time is precious, and that if a bunch of busy people are going to make time to get together and collaborate, it better be worth their while.

Too often collaboration can become a way of delegating problem solving to ‘the group’. Good facilitators, like good leaders, know how to roll up the sleeves and work through the problem in isolation before going to the team. And for good reason. If nobody brings any thinking to a collaborative effort, there’s a good chance that a fair amount of time and energy will be wasted on the most obvious, and often the weakest, ideas first. If your trying to kick start and be more involved in a more collaborative design process in your business, this is a sure fire way to turn people off.

On the other hand, if the facilitator comes to the session and briefs the group by sharing what they have already figured out, and showing sketches and prototypes of some of their early ideas, the facilitator demonstrates that they are leading the problem solving effort. With the obvious and lame ideas out of the way, the facilitator is able to lead the group to think more creatively and its more likely that opportunities to make the experience really awesome for its users might emerge.

Ya really gotta crawl before ya can walk. So if your a designer that want to take the next step and become a design facilitator, or even go one better and become a ‘high impact design thinker’ as Jason Furnell suggests, my advice is to first focus on developing your own user experience practice. Drawing on your existing creative skills to increase the visibility of the design process where you work. Practice solving UI design problems by sketching, create low fi prototypes and design sketch boards and discuss the ideas behind them openly and visibly with others. ‘Show’ your organisation what an effective design process looks like. You’ll be honing your UX chops and gaining confidence talking about your ideas at the same time, so that when you do get an opportunity to facilitate a collaborative design workshop, you’ll come across more like a design leader than a workshop facilitator.

 

 

 


Agile UX 2012: Top Learnings

Digital producer and fellow user experience practitioner Leah Cunningham and I attended Agile UX 2012 in Sydney together in March. It was my first Agile conference and a truly eye-opening experience.

We caught an early flight out of Melbourne and were soon in a cab navigating through the heavy Sydney traffic. We found the conference venue next to beautiful Darling Harbour and took our seats among hundreds of other Agile UX enthusiasts.

UX (user experience) is a field within the design discipline that believes in the creation of desirable designs based on in-depth consideration of users’ experience – the way a customer feels and perceives about the practical aspects of the design, such as ease of use and efficiency. On the other hand, Agile originated from software development as a methodology that promotes adaptive planning, self-organisation, an iterative approach, and rapid and flexible response to change. Agile UX is a growing area where the two worlds meet so practitioners find the best ways to collaborate more effectively and produce outcomes on time and on budget.

Surface Digital evolved rapidly in the last few years from a communications design studio into a full service agency with advanced development capabilities. Although UX is as familiar to us as a favorite well worn t-shirt, Agile is a new beast that we only came to embrace at the start of the year. Our job in Sydney was to learn as much as we could and share our findings with the team. Here are my top 5 learnings (not in any order):

Sketch sketch sketch
From collaborative design workshops, to design walls, to one-on-one pairing (designer and developer), sketches become our main tool of communication. They are highly visual, immediate and easy to understand. They are quick to create and destroy. Most importantly, they save time and effort writing long lists of functional requirements by communicating ideas quicker and more accurately.

Fail fast, fail early.
Enjoy learning from mistakes. Working in rapid iterations forces us to make inevitable mistakes earlier in the process and thus respond to them faster as well. This can only be a good thing for the product in the long run as bugs are found and resolved often.

It’s not about what I deliver, but what the team delivers.
By leaving our egos at the door, user experience designers will be able to share knowledge and take the team along a creative process. Developers are involved right at the start rather than the end of the production line. This increase in collaboration can only mean a more thought out, more resolved and better quality outcome.

Focus on the values of Agile instead of the system.
It is easy to get caught up in all the Agile jargons – user story writing, fibonacci numbers, sprints, velocity, etc. Thus it is important we do not lose sight of the end goals of going Agile - to become more adaptive, predictable, collaborative and efficient.

Agile is not the “be all and end all”.
Agility doesn’t guarantee success and certainly doesn’t solve all problems. A non-Agile team can also be highly collaborative and productive. The key is to find the right balance of Agile methods that suits your team.


Become a selfless designer: take the “me” out of my design

As a user experience designer it is easy to fall into the trap of thinking you know better than everyone else – developers in the team, your project manager, marketing team, the client. It is you who went through design school, obsessing endlessly about what good typography means, how colours combine, and what makes good composition. It is also you who has the natural ability to think creatively, suggest ideas, and envision whether a concept is going to work or fail. You are frustrated that your client doesn’t “get it”. Your project manager questions your design decisions and the developers refuse to build them the way you want. They force you to change the design and you lament that the final solution has been ruined by a bunch of idiots.

Sounds familiar? If this is you, then you are the very definition of a “design silo”. The hated prima donna. The good news is that you don’t have to sacrifice any design integrity to turn the situation around. Designers can get everyone in the team and the client to own the design as much as we do. We start by removing our egos and collaborating more often.

Educate and communicate
In order for your team and client to believe in your designs, you have to make them think like you. That means educating them about the importance of design and encouraging them to think creatively. Give them pens and paper and ask them to sketch a better solution. Discuss constructively why it works or doesn’t. If their solution is indeed better, instead of getting defensive, or worse dismissive, offer to improve their idea and take it to the next level.

Focus on the values of good design
Rather than insisting that you are right because you are the designer, focus on communicating the values that your design is bringing to the solution. How is your design improving the user experience? How is it answering the client’s brief? What are the benefits and strengths of your design over the alternative?

Put yourself in their shoes
By putting yourself in your client’s, developer’s or manager’s position, you may understand their doubts and concerns better. Is the client upset because one of her needs was not answered by the design? Is the developer not following your directions because he doesn’t have enough time or because he doesn’t know how? Talk to them, find out their underlying concerns and offer a solution forward.

Go back to the user
You are having a disagreement with someone on your team or the client over how a feature should work. Rather than arguing over whose idea is “better”, focus the discussion on who will be using the solution and how the user will use this feature. For example, is the user tech savvy enough to get the most out of information hidden behind tabs and button rollovers? A simpler, more conventional version of this feature will benefit a 50 year old user a lot more than a 21 year old user.

Conduct a design workshop
A design workshop is a great way to kick off a project’s design phase. Get your whole team around a table and take them on a creative journey in generating ideas and features for the website or application. Start with bringing everyone up to speed on the business requirements and user research that have been done to date, such as user personas, focus group results, etc. Hand out pens and paper and get everyone to start sketching! The designer remains the principal facilitator who will guide the entire process until a commonly agreed solution (still just sketches) is reached. This way all stakeholders have had a say in the solution and are invested in the design. Your only job left is to turn the sketches into a beautiful visual presentation.

By becoming egoless and embracing frequent collaborations with our team and client, we will create far better solutions than if we are to put the headphones on, shut out all interactions and design everything ourselves. The biggest gain is that we will enable everyone to respect our designs and take equal ownership of the final solution. We will also work in a less antagonistic and more enjoyable environment!