Design
Google Reader for iPhone: A Step Backward
Google announced yesterday that they have a new version optimized for the iPhone and MobileSafari. They mention that the new version is better for the iPhone than their standard mobile version in that it utilizes javascript to do more from one view. “Starring, sharing, and keeping unread are done in place, so you never have to leave the list view or refresh the page.”
I think that all sounds well and good. But the truth is that the mobile version was actually better because it wrapped the original article in javascript and stripped out everything but the text and pertinent graphics. This was useful on EDGE and made it easy to keep up with my RSS feeds while away from my computer. I’ve been happily using the mobile version since I bought my iPhone almost a year ago and I wasn’t even asking for a change. The mobile version was such a great iPhone application. You just got the text, perfectly presented in your browser.
My biggest gripe about the new version is that they actually took features away. The mobile version has a Settings link that allows you to “Reformat linked web pages for mobile browsers.” You can turn that on or off as you see fit. I could choose to display 5, 10, or 20 articles at a time on the old version. The new iPhone version doesn’t even give you settings at all.
On both versions, there are 2 links at the bottom of your feed list: “Load More” and “Mark These Items as Read.” On the mobile version these links are stacked on top of one another and take up the same amount of screen space. Clicking either link is easy. But on the iPhone version the “Load More” link is left-aligned and significantly larger than the “Mark These Items as Read” link which is right justified. The first time I tried to click the mark-as-read link I actually clicked the load more link because that link spans the width of the iPhone’s screen. It’s awesome that they do that so I don’t have to be so specific with my touch but the mark items as read link doesn’t span the width of the iPhone and you must be very specific with your touch on that link. And the space it takes up is so much smaller than the load more link that it’s too easy to accidentaly touch the load more link.
Obviously the iPhone version is still in beta and these things can be easily fixed. But I wish more developers would remember that it’s never a good user experience to take features away (unless it’s proven that the feature is little-used and gets in the way of completing tasks). You should start with you already have and then add functionality to improve the user experience. I just hope they add those settings back. I won’t be able to use the iPhone-specific version until they do. Luckily for me, the mobile version was already an awesome iPhone app to begin with.
Talk About Bad Information Design
I went to ESPN to check out who won tonight’s men’s college basketball championship and I was led to this page where I was greeted with the graphic below.
I understand that both school’s primary color is a shade of blue. But it should have been instantly recognizable to the person creating this graphic that the 2 shades of blue were much, much too close together for this chart to be meaningful. My first thought would be to add each school’s secondary color and make each line thicker so the user could quickly see the difference between the blue/yellow line and the blue/white line. But the chart doesn’t only fail in its color presentation. It also crams a lot of data into a small column while keeping detail off of the chart. In order to get more detail the user needs to hover over the graphic which they would only know to do if they hovered over the graphic by chance. In this regard I think of the words of the great Edward Tufte when he says “to add clarity, add detail.”
Design Approach for Desktop and iPhone Applications
It takes several months of actual iPhone development before you eventually realize that the iPhone requires a completely different mindset. Until that happens, you’ll make assumptions based on desktop experience, and that in turn will lead to a lot of bad designs.
This sounds a lot like what I just wrote about the move from print to web design. People know what they know and until they experience something different, they’ll try to shoe-horn what they know into something else, even though it doesn’t work. I think a few developers will nail their applications for the iPhone. But I also think there will be more useless applications for the iPhone when the App Store launches. It’ll probably be a while before it’s full of really useful, iPhone-only applications. Anyone that trys to simply “port” their application to the iPhone will probably fail.
The Unused Forward Button
I was watching a video of the new gestures for the MacBook Air and the MacBook Pros and noticed that they are touting the ability to swipe from right-to-left to go “back” in a browser or go left-to-right to go “forward” in the browser. And that got me thinking, have I ever used the forward button? I started to think back on all the years I’ve used web browsers from Netscape to IE to Firefox to Safari and I can’t remember a time when I ever even thought to use the forward button. And that got me thinking about the behavior of other people and whether or not they use the forward button. If people do find that button useful, how do they use it? And what percentage of web users find the forward button useful? I’m very curious about this because ever since the introduction of tabbed browsing I barely even use the back button.
Do you use the forward button? How do you use it?
Design Approach for Print and Web Design
I started in print. I was a designer for a local newspaper in 1996. I then moved onto a magazine and then an agency. The whole point of graphic design for print was to present information in the most visually appealing way in order to differentiate your information from a competitor’s information. Visual design was king. My approach was to find elements of design that would grab a user’s attention as they flipped through the pages or sifted through their mail and then make the information stand out so the user would stay once I had their attention.
When I made the shift to web design in 1999 I tried to apply this same style of graphic design to web projects. What I quickly found out was that most of us were designing web pages for other graphic designers. We were trying to “out-cool” one another through the use of moving graphics, 1-pixel-wide borders, and the smallest fonts we could use. The designs were stunning and drew praise from other designers but fell short when launched. Why were these sites failing? They were cooler than anything we ever got away with in print.
Late 2000 or maybe early 2001, I was working on a design late into the night. I thought I really had a winner on my hands and wanted my wife to try it out before I presented it to the client. She sat down at the computer, looked at the web site and said “where do I click?” I was a little stricken by that question because it seemed so obvious to me. I prodded her to click where she thought she should click and she pointed the mouse around the page until she found something clickable and went in. Watching her struggle with my design was a very eye-opening experience. It occurred to me that it could look like the coolest thing in the world but if the user couldn’t interact with the design and couldn’t get to the information, then the site design was a failure. This was an epiphany and it shifted my thought on interactive design altogether.
At that point in my career I began to define design as the way a person worked with the thing. I no longer considered design as the front-end graphic design or “skin” of the site. I began working with the information architect on staff and naturally gravitated toward information design. Once I saw design as the structure and the method for navigating the structure, my web designs achieved a much greater acceptance among the users. Because my web design was thought through from the ground up, it wasn’t getting in people’s way and they were able to accomplish their goal on the site. The “skin” didn’t even matter to the people. Users only seemed to notice the graphic design when something stood in their way of doing their task. Bad design was noticed and good design was overlooked as something that worked the way it should work.
What I learned in my transition from print to web is that you can never assume someone will understand your intentions. No matter how obvious a design choice seems to you, it will probably confuse some users. More often than not “boring” design is effective interactive design because it doesn’t distract the user from their goal. If you take web design seriously then your approach should change dramatically from your approach to print design. Design is how it works. How it looks is icing on the cake.