Home » Blog » Archive

Archive for the ‘Mobile’ Category


Interview with Brad Frost

Posted by Jacob Creech on March 28th, 2012

Does your site look great on mobile devices? Is it usable on mobile? Increasingly mobile devices are replacing our computers for daily tasks, and because of this web design and development is evolving further.

Since Ethan Marcotte published his article in 2011 about responsive web design, we’ve entered a new phase in web design for mobile. Some might see responsive web design as just another trend, but here at IntuitionHQ we believe it’s more than just a trend, we believe responsive web design might just become one of the most important changes to web design in 2012.

But what does responsive web design really mean?  Time to ask an expert in this field – Brad Frost.  We first spoke with Brad a few months ago after reading his posts about responsive design and usability on his blog.

Brad’s a very busy guy, aside from writing for A List Apart and his blog, doing interviews with IntuitionHQ and thenextweb, he’s also one of the speakers at the upcoming Mobilism conference on May 10th in Amsterdam!

We think his views on responsive web design offer great insight on this new trend.  So let’s talk responsive web design.

The interview

Could you give a brief introduction about you?
I’m a mobile web strategist and front-end designer at R/GA in New York. I’ve been focusing on creating mobile-optimized websites for a few years now and spend a great deal of time learning and talking about what goes into good mobile web experiences. I made a website that tries to make sense of this stuff. I’m also a musician (primarily a bass player) and an artist. I live in Brooklyn with my wonderful wife. She’s just as busy as I am.

What is the biggest usability challenge for the mobile web?
I think the biggest challenge for the mobile web is achieving content parity. For a long time the default mentality was that mobile users don’t want everything desktop users want. As a result, important content would get arbitrarily lopped off and mobile users were penalized for how they happened to be accessing the web. The biggest challenge then becomes to deliver a full experience while being mindful of the many constraints the mobile environment creates.

Can you tell us a bit more about responsive web design?
Ethan Marcotte coined the term “responsive web design” and he broke it down to three components: fluid grids, flexible media and media queries.  However it’s evolved into something much bigger than that. It’s become a language with which to talk about designing beyond a singular screen size and context.

Before the term “responsive web design” was around, my colleague Jack Bishop and I were using the term “adaptive web design” as a way to talk about how an experience adapts to device features and browser capabilities. As it turns out, at the same time Aaron Gustafson was writing a book titled Adaptive Web Design, which dives deep into the concepts of progressive enhancement. And that’s what a lot of this is about, just applying those concepts to more contexts.

What does responsive design mean for the future web?
It’s becoming increasingly challenging to create and maintain separate experiences for different contexts. You turn your head for a second and BOOM—there’s fifteen new mobile devices announced—all with different screen sizes, form factors, browsers and more. Because devices, browsers and capabilities are such moving targets, we need to find solid ground to stand on.  That means focusing on creating flexible foundations that provide a good user experience to a number of different contexts. So instead of maintaining multiple websites that all essentially do the same thing, we’re trying to create smarter websites that have the power to go more places.

Looking down the road it becomes even harder to predict what’s coming down the pipes. Technology is constantly building on itself and we have to deal with the breakneck speed of innovation. Anyone who claims to know what the landscape is going to be like in five years is full of it. The fact that the future is so impossible to predict is why it becomes incredibly important to design experiences that are compatible with more scenarios—present and future.

What are some of the pitfalls responsive design is faced with?
There are plenty of pitfalls and challenges that responsive design faces. First, I think that responsive web design is viewed as a panacea for mobile design by a lot of people. It’s not and it never claimed to be. Creating contextually-aware experiences requires a hell of a lot more than just adjusting layout. Sure, it’s a piece of the puzzle, but there’s other things that need addressed. User goals can change dramatically based on context, so serving up a one-size-fits-all experience to mobile users runs the very real risk of not giving the user what they need.

For example, a blog’s content is to make a readable experience for as many screens as possible, but what about an e-commerce website?  A user could be at home on a laptop trying to buy a product, but what about a mobile user? Sure, they could be at home on the couch trying to buy the product too, but they could just as well be at the mall looking at the physical product and are trying to read reviews and compare prices. For that user, the “add to cart” button isn’t as important as quick and easy access to price, ratings and reviews. I feel that these are the things we need to consider when designing adaptive experiences. Ask yourself “Why might this mobile user be visiting this site right now? What are they trying to do and what can I do to help them?”

Another big challenge is performance. I mentioned before how we shouldn’t arbitrarily lop off content for mobile users. Well, responsive design fixes that problem (unless you’re using display: none; to hide content for small screens, which you shouldn’t be doing), but it can create big performance issues. Forcing mobile users to download a ton of scripts, media and content just doesn’t make a good experience. That’s why we advocate mobile-first responsive web design, which entails tackling the constraints of the mobile environment first then build up a core experience from there. Conditionally introduce heavier media and scripts when the scenario can accommodate them, instead of trying to cram a desktop site into a mobile-sized screen.

There’s a lot more challenges to responsive design as well: it’s costs more money to produce up front, it requires rethinking the design process, it’s hard to create truly great mobile experiences without compromising the larger screen experiences and vice-versa, etc.  There’s a lot of challenges, but that’s not a good reason to shy away from adaptive design. We just need to tackle these issues head on and collaborate to figure this stuff out. Because the other options simply don’t scale.

How do you approach the actual design when developing a responsive website?
Get designs into the browser as soon as possible. That’s not to say that you can’t use Photoshop or static wireframes, it’s just that those things don’t paint a realistic picture of how things will adapt.  We’ve traditionally followed a waterfall process, but you simply can’t do that for adaptive experiences.

Typically we map out the experience in wireframes and articulate where the experience will split based on the capabilities of the device/browser (for example, here’s how the carousel looks on non-touch devices, but here’s how the interaction changes when touch gestures are supported).

From there we’ll create a working prototype while the visual design team is in Photoshop creating the general look and feel. By the time the visual team has the look and feel in a good spot, the prototype team has the basic site architecture built. The prototype team starts implementing the look and feel while the visual team moves forward with the rest of the design. From there it becomes a series of iterations and back-and-forth between all the designers. The visual team is one step ahead of the prototype team, who’s focused on implementing the previous round of visual designs. It’s not this cut-and-dry though, because the prototype greatly influences the visual design and lots of things often need revisited. It’s all about back-and-forth.

Three things make a responsive process work: collaboration, collaboration, collaboration. It requires everyone being on board with the approach, tackling problems and being willing to revisit designs in order to make them work. This is much different than the traditional waterfall process, where developers working at the end of the line are left with a lot of the burden of figuring out how to make static designs work.

Does responsive design influence content?
Absolutely. All of a sudden, our content needs to be relevant to a whole lot more contexts. We need to be a lot more considerate about how we handle content hierarchy, media and interactions across a ton of screens and scenarios.

Are images still legible on mobile screens? Is there text in the images and is it still readable? Is the image a landscape image whose subject matter becomes tiny on a small screen? Data visualization is currently a hot trend right now, and whenever I fire up these massive JPEGS on my phone I can barely make out any of the text and charts.

Sara Wachter-Boettcher beautifully articulated the challenges of content hierarchy in her post Responsive-ready content. She demonstrates how it’s natural to want to throw sidebar content underneath the main page info, but that it doesn’t necessarily make sense in all circumstances. How layout breaks can very much influence how the user receives the information, so we need to be thoughtful with regards to content hierarchy.

I think the best way to deal with all of this is again to start mobile-first and make sure that all the content on the page is relevant. The less moving parts we have to deal with, the better. Mobile is a great excuse to clean house and gut the bullshit. We have a tendency to fill space with something, anything, if we have the chance. Thankfully we don’t have that luxury on these mobile screens so we’re forced to make some hard decisions. Once that exercise is done, then think of how to take advantage of extra space as it becomes available.

As one of the undersigned on Future friendly, can you tell us a bit more about the idea behind the site?
The idea behind the site is that the future is unpredictable, so we need to be more considerate of this change as we create web experiences. We shouldn’t bemoan the fact that there’s more connected devices we need to care about, but rather we should embrace this diversity and use it as an opportunity to reach more people.

The fact that no one knows what’s around the corner is why the site is intentionally ambiguous. When we all of came together, we realized that there’s no silver bullet to these problems.  We gave some ways people can think differently in order to become more future friendly, but again, these aren’t prescriptive solutions. It was made more to capture a notion than to say “do this or else!” Ultimately, it’s just there to get people to be considerate and to get more brains working on these hard issues.

Any favorite sites or resources you’d like to share with us?
There’s no shortage of great resources out there, and I’ve been doing what I can to collect them on my Mobile Web Best Practices resources site. I also think Twitter is such an invaluable tool for all this. There’s tons of wonderful people willing to share their experience, thoughts and resources. The collective conversation and collaboration that happens on a daily basis is essential to making sense of these really big challenges. It’s really exciting to listen and participate.

What do you think?

Our thanks go to Brad for his time and insights.  We will be keeping an eye out for his upcoming speaking event at Mobilism.

We believe responsive design is a new and exciting trend we all need to be aware of.  With the growth of different mobile devices, we can no longer design for just one or two different mobile devices.

What do you think about responsive design?  Do you have any interesting insights to share? Feel free to let us know what you think about responsive design in the comments below, on Twitter @IntuitionHQ or at Facebook.com/IntuitionHQ.

 

Mobile Usability Test: iReddit

Posted by Jacob Creech on July 8th, 2011

 
Reddit is one of the most popular, successful social news sites online. It’s full of interesting stories from every topic under the sun, and can be pretty much anything you want it to be. It’s a great site to waste a lot of time on, and there are always plenty of interesting stories (as well as pictures and memes) to find.

Like most popular sites and services (and us), they also have their own iOS app, iReddit, for browsing stories, pictures and other valuable content while you are on the go, or just browsing from the comfort of your iDevice.

Continuing on from our recent website usability reviews of Gizmodo and TED, this time around we are going to be testing iReddit.

Read on to see how we formulate our test questions, what our iPad usability testing looks like, and our final thoughts on the iReddit app.

The iReddit App

 
As with the Reddit website, you can’t accuse this app of being over-designed. When you open the app, you see a list of popular sub-reddits (categories within the site), that is customised from your account details supposing you’ve logged into the app.

Reddit Mobile App - iReddit

Reddit Mobile App - iReddit

One of the most common types of content on the Reddit site are images, and these also integrate nicely into the app for viewing, voting and so on.

You can also view your comments and replies, look through all the sub-reddits on the site, and most everything else that you are likely to do from your mobile device.

Based on this information, and an idea of what some of the most common tasks people are likely to perform with the app are, lets go ahead and formulate our questions.

The Questions

 
Where would you go to enter your login details?
I suspect most users who download this app would already be Reddit users, and hence entering their login details and getting access to the sub-reddits they follow most is probably the first thing they’d do upon entering the app

Where would you go to view the Reddit front page?
The front page has the largest amount of traffic, and for many users this page is the first stop to see the latest and greatest posts on the Reddit site.

How would you view your comments and comments others have responded to?
Commenting is very popular on Reddit, and some posts can have thousands of comments on them. Therefore, on would imagine commenting is an important function of the app as well.

How would you view the sub-reddit, ‘Design’?
The Design sub-reddit is one of my personal favorites. In this case however, we are just testing how easy it is for users to find different areas of interest on the site.

How would you view the most recently submitted posts?
Finding new posts on the site is pretty key, because otherwise new content would never make it to the front page.

How would you cast an upvote for this post?
Voting is what gets good stories to the top. Upvotes and downvotes are what sort out the good content and the bad. A core part of the site, and a core part of the app as well.

How would you view comments on this post?
As I stated earlier, viewing and commenting on posts is one of the many reasons people frequent the site. This is testing how easy it is for them to view comments on a particular post.

How would you share this post?
As a social site, sharing is a big component of Reddit. If you find a great story (or more likely, a funny picture) you’d probably like to share it with your friends. Lets see if users can work out how.

The Testing Process

 

Loading up the Usability iPad app

Loading up the Usability iPad app

For this test, I took my iPad out with me to a friends party, and just asked everyone to pass it around as the evening progressed. I also asked people to write down if they were iOS users, Reddit users, or both. At the end of the night, 30 people had taken the test, 18 of whom were iOS users, 8 of whom were Reddit users, and 3 of whom were both iOS and Reddit users. All 3 had used the iReddit app before.

Usability testing on the iPad

Usability testing on the iPad

Bearing all that in mind, lets go on and look at the results. If you are interested, you can also take the test yourself – either on your iDevice or in your web browser.

The Results

 

Where would you enter your login details?

Where would you enter your login details

Where would you enter your login details?

For the first question there is a pretty great result; 97% of users found the right location with an average click time of just 5.71 seconds. For a simple interface like this, anything over 80% success rate, and an average click time of less than 10 seconds is very strong, so this is a great result.

Where would you go to view the Reddit front page?

Where would you go to view the Reddit front page?

Where would you go to view the Reddit front page?

An even stronger result than the first question. 100% success rate, and an average click time of 4.22 seconds. This could be influenced by the fact the question text is the same as the label, but it’s a good indication that users know where to go.

How would you view your comments and comments others have responded to?

How would you view your comments and comments others have responded to?

How would you view your comments and comments others have responded to?

A weaker results than the previous two questions. An average click time of 9.04 seconds and a success rate of 80%. They could improve the response time by reconsidering the label they use here – perhaps something like ‘Recent comments’ would work better. This would be a good question to run an A/B test on so they could try some different label variations to see what works best.

How would you view the sub-reddit, ‘Design’?

How would you view the sub-reddit, 'Design'?

How would you view the sub-reddit, 'Design'?

A fantastic result here; the users are obviously getting more familiar with this interface. An average click time of just 3.37 seconds, and a 100% success rate. Really a great result.

How would you view the most recently submitted posts?

How would you view the most recently submitted posts?

How would you view the most recently submitted posts

Yet another great result – an average click time of 3.66 seconds, and a 100% success rate. It just goes to show the simple UIs can be extremely effective.

How would you cast an upvote for this post?

How would you cast an upvote for this post?

How would you cast an upvote for this post?

4.39 seconds average response time, and a 97% (29/30) success rate. I’m not really sure what the other user was thinking here, possibly they were confused by what an upvote is, but clearly most users had a pretty good understanding. Still a great result.

How would you view comments on this post?

How would you view comments on this post?

How would you view comments on this post?

3.58 second average response and 100% success. Fantastic. Evidently this comment icon is pretty universally understood. Granted our test participants were pretty tech savvy, but this is a great response.

How would you share this post?

How would you share this post?

How would you share this post?

A small amount of confusion here with a couple of people clicking the Facebook share rather than the built in sharing solution. Still, with a success rate of 93% and an average response time of 3.48 seconds, this is a fantastic result.

Conclusion

 
As you can see from the results – which you can also view in their entirety – the iReddit app has done very well. Although some people complain about the simplicity of the user interface, the app is obviously very functional.

The only recommendation I would make for this app is reconsidering the labels they use for viewing comments; this was the only question that caused the users we tested any kind of problem. Obviously increased familiarity with the app would also help cut down the response time, but considering this is the only question that caused an issue, it would probably be worthwhile to improve the experience just that little bit more.

Overall they have obviously done a great job on keeping this app very usable, and for all those Reddit fans out there, and those that just enjoy finding interesting content (and who aren’t too easily offended) the app is a very worthwhile download.

Final Score: 9.5/10

The results of our testing were almost perfect, and aside from the commenting label question, we had an absolutely fantastic response time across all of our users. A very usable app.

What do you think of the iReddit app? Do you think it’s very usable? Be sure to let us know in the comments below. You can also run your own tests on IntuitionHQ.com or using our Usability iPad app and see how your results stack up.

Don’t forget to subscribe to our RSS feed, and follow us on Twitter and Facebook to share your thoughts on what we should test in the future, and to keep up with all the latest usability news.

 

Usability iPad App – 5 Promo Codes to Giveaway

Posted by Jacob Creech on June 16th, 2011

 
To quote Professor Farnsworth: Good news, everybody!

We’ve been working hard behind the scenes here at IntuitionHQ, and one of the things we’ve been working on is an iPad app – which is now available in the app store for $2.99US ($4.19NZ). Needless to say, we are pretty excited.

Imagine taking your tests out on your iPad – to your clients, stakeholders, or even strangers in the street. It takes guerrilla usability testing to a whole new level. We’ve got a whole bunch of exciting features in store for future updates as well.

We’d like to tell you a little more about the app, and of course, give away some promo codes so you can try it out yourself. To be in to win all you need to do is leave a comment on this post, or retweet it for others to see. If you comment and retweet you double your chance of winning. Simple, huh?

Update: We’ve announced the winners of the five promo codes. Congratulations to those who won, and to those who didn’t check out our post for more chances to win.

Now, as for the app:

The Usability iPad App

Usability iPad app - Sign in

Usability iPad app: Sign in

The Usability iPad app works together with IntuitionHQ. You simply log in to your account, and all your published tests will be displayed. It works for A/B tests and preferences tests as well as single tests, and everything is seamless to the users.

Usability iPad app: Published Projects

Published Projects

Once your in your projects screen, you just tap on the project you’d like to test. The images are all cached on your device (they all download once you log in), and the testing process is lightening fast.

Usability iPad app: TED website test

Usability iPad app: TED website test

If you have longer screenshots, you can scroll around like you usually would – the app only records your ‘clicks’ when you tap on the screenshot.

Usability iPad app: TED website test

TED website test

You can test all sorts of things with the app – as well as your iPhone and iPad apps, you can easily test websites, ask questions and more. Our recent user experience and psychology of colour is a great example of this:

Usability iPad app: User Experience of Colour test

User Experience of Colour test

Usability iPad app: User Experience of Colour test

User Experience of Colour test

When one user finishes the test, you can either choose to go back to your projects, or to go on to your next participant. Simple.

Usability iPad app: Completed test

Completed test

Leave your comments and retweet to win

We’ve love you hear your feedback on the Usability iPad app. What would you use it for? How does it look to you? Any features you’d like us to add? Let us know below, and be in to win a promo code for the app. Good luck!

Happy testing all,

The team at IntuitionHQ.

Do you have a blog? Interested in writing a review of our Usability iPad app? Leave a comment below, send us a message on Twitter @IntuitionHQ or on Facebook.com/IntuitionHQ and you could be in for a free copy of the app.

 

The Dangers of Design By User and Other Interesting Tweets

Posted by Jacob Creech on March 11th, 2011

A range of interesting Tweets this week, including the Dangers of Design By User which has stirred up a lot of debate. The avalanche of mobile related tweets continues, and there are some really interesting tweets for both designers and developers. Mobile usability is definitely one big part of this, and something we have a particular interest in.

There is also a range of other interesting topics ranging from marketing for startups to the search for the perfect CAPTCHA. Read on to find out more, starting with a quick look at the state of Wikipedia:

Awesome video/visualisation: The State of Wikipedia http://ow.ly/49Bzd #wiki #online #design

Neat video produced for the anniversary of Wikipedia – worth a look for all the Wiki fans out there.

The Dangers of Design by User: http://ow.ly/49HT3 #usability #UX #design #webdesign

Interesting post on a topic near and dear to many a designers heart. Pity the site is so… purple, but still a good read.

Use (or looking to use) personas as part of your process? Check out this persona template: http://ow.ly/49Ccb #usability #UX #UCD #personas

Really nifty little template to speed up the process of making personas, and save you some thinking too.

Silly CAPTCHA - unreadable
Um, what?

Really interesting post – In Search Of The Perfect CAPTCHA: http://ow.ly/48UIW #usability #UX #spam #CAPTCHA

Really insightful look at CAPTCHAs on Smashing Mag. The comments are worth a read too – some really interesting ideas there.

The perils of persuasion and user experience: http://ow.ly/48Ucl #UCD #UX #usability #usertesting

An interesting look into the world of user experience design.

Top 6 Mistakes to Avoid in Mobile Usability ==> http://bit.ly/dFP6ZO via @inphoenity #usability #UX #mobile

Great advice for anyone interested in mobile, and making mobile apps/sites that don’t suck.

Good weekend reading – Marketing for startups in 8 simple steps: http://ow.ly/47yRf #marketing #startup

Good advice for anyone really, from The VC himself…

Best Practices for Mobile App Sites: http://ow.ly/47z4Y #mobile #apps #bestpractice #usability #UX

Building a site for your mobile app? Here are some best practices to consider.

Neat concept » Post-Touchscreen Interface – The Looking Glass: http://ow.ly/48UdK #usability #UX #touchscreen #design #mobile

And a look into the future to finish off with – a concept for the future of the touchscreen.

That’s all for this week, be sure to let us know in the comments if there are any great sites/tweets we’ve missed.

Have a great weekend, happy testing everyone.

 

Usability tweets of the week

Posted by Jacob Creech on December 10th, 2010

This week we’ve come across a number of interesting tweets on usability and user experience. There are some particularly interesting tweets on the mobile space, the evolution of the UI in this area, and what it means for design and the web. Read on below to find out more, but first our quote of the week:

“If the user can’t use it, it doesn’t work.” – Susan Dray #usability #UX via @areteworks

What can we say about this? It’s an absolute truth in usability, but many people often try and blame the users rather than realising their own failures. If you can realise this, you are well on the way to becoming a great designer, and designing products that truly satisfy a need. more »