New York Times iPhone App Update Botches Navigation

The recent update to the New York Times iPhone app does its users a real disservice with some disastrous changes to the app’s navigation.

The main flaw in Version 2.2 is the removal the navigation bar and tab bar from the screen once the user scrolls down into the body of the story. In the first image below, the app is seen with all navigation when a story first loads. You just have to scroll down a small amount and the navigation and tab bars disappear, as seen in the second image.

Navigation in Place
Navigation in Place
Navigation Hidden
Navigation Hidden
Full Screen Ad
Full Screen Ad

What? I want my Back button back. Imagine scrolling halfway down into a long story and deciding you want to to the previous screen. There is no way to get back to the headline screen except to the scroll to the top or bottom of the story, which causes the navigation to reappear.

When the tab bar at the bottom disappears it hides the button to email someone a link to the story, the font size controls, and the Save story button.

In the previous version, the navigation and tab bars were always present along with the horizontal ad at the bottom.

The user experience is better in the AP Mobile app, which never removes navigation from the screen.

It may have been that the NY Times designers wanted to offer users a larger area of the screen for reading, but for someone like me who pogo sticks in and out of stories sometimes, this is a major annoyance.

A smaller issue is a full screen ad that comes up when the main screen gets its latest update of headlines, as seen in the third image. While this is intrusive, it’s also somewhat understandable since the battered traditional news media needs to find a new business model that goes beyond just giving their content away for nothing. Because I value the quality of the Times reporting and writing, and it’s free, I don’t mind clicking the Close Ad button and moving on. At least the app’s designers had the good sense to only show one full screen ad per session, which makes the intrusion minimal. Since this is the first news app I’ve seen using full screen ads it will be interesting to see if other apps start doing this.

While I can live with the ads, the change to the navigation scheme is unbelievably bad design. I’m hoping Version 2.3 is coming soon to fix this mess.

Newspaper Website Redesigns

After spending some time looking at the recent redesign of the Chicago Tribune and Los Angeles Times websites I have to give the Tribune a slightly better grade for usability and learnability than the Times, mostly based on some simple design choices and the treatment of links, while the Times easily wins for sharp visual design.

The key area where the Times lacks is in how it handles navigation. In the new design almost all text is black, strongly mimicking the look of a print newspaper. From a visual design perspective this is just flat. The Tribune in contrast makes its headlines blue. The headlines of both sites are links, are not underlined, and give rollover feedback. The blue text on the Tribune site just seems to stand out more and makes it easier to scan the page. The different color also hints at clickability and invites exploration. Blue is one of the Tribune’s brand colors, so this also makes sense from a marketing perspective. There is no reason for the Times to mimic print design to such an extreme.

Los Angeles Times
Los Angeles Times
Chicago Tribune
Chicago Tribune

While most news website users will expect that headlines are links, the all black text treatment of the Times makes it harder to scan for relevant content and triggers. The Tribune, while using the same template, makes it easier to scan down the page and find links. Blue is clickable, black is not.

Both papers use the same template, not surprising since both are owned by the Tribune Company, but the way the Chicago paper executes the design makes it is a little easier to learn how to use the site. The key differences are:

— On the Tribune homepage, the tabs in the global navigation are visible no matter what the user does. On the Times homepage, the user has to roll over the global navigation before a tab background image appears. While the Times global navigation is pretty clear, the Tribune makes it a little more obvious that it is navigation. Once you go beyond the Times homepage, section tabs are revealed.

— On the Tribune homepage a global navigation item for “home” is selected, giving the reader a clear sense of where they are in the site hierarchy. As you navigate away from the homepage, the “home” tab provides a nice target to get back to a starting point. The Times homepage in contrast shows nothing as selected, thereby losing a chance to educate users about the navigation. After you navigate away from the homepage you have to click the logo to get get back. That’s hardly a fatal flaw, as most web users have figured out that a site’s logo links back to the homepage, but the Tribune’s design again just makes the navigation choices a little more obvious.

— Another difference is how the sites handle weather in their header. To the right of the Tribune logo is the temperature and an icon indicating whether it’s cloudy, sunny, raining, etc. The Times uses that real estate for date and time, but no weather. Weather is more volatile in Chicago, so maybe this makes sense. But to replace it with date and time doesn’t seem to offer the user anything. Usage metrics may show that Times users don’t spend much time on the weather page, but how about a highway gridlock meter icon that links to a real-time expressway traffic page or something else useful.

When it comes to typography and general visual design, the Times wins hands down. It has settled on a nice serif font — Georgia — that is consistently applied and easier to read than the Tribune’s Arial, especially for the articles. If the designers were looking to mimic the typographic sense of style of the New York Times or A List Apart, they hit their mark. It just looks classy. If they add some color to the headlines, they’ll have a real winner.

The Times also handles the homepage areas that feature content from other sections of the site in a more stylish and cleaner way than the Tribune, which has bulky colored headers for features like Sports and Entertainment. Aside from the lack of color in some of the fonts, the Times overall has more appealing visual design. And the faux ink splatter at the footer of the page is a fun design element.

The other papers in the Tribune portfolio (Baltimore, Orlando, Ft. Lauderdale, Hartford, Allentown, and Newport News) also are using the same new template, but the Chicago and LA papers have the best executions. The others lack personality and could easily be mistaken for any other news website.

If the Tribune Co. had mixed the visual style of the Times with the usability advantages of the Tribune, they’d have had a truly stunning design.

The Real Power of Twitter – The Follow Button

I’ve come to the conclusion that the real power of Twitter is not the ability to broadcast your thoughts to the masses — it’s that little gray Follow button on every profile.

I’ve been tweeting, following, and generally twittering along for about eight months and what I get the most value from is the people I follow. Think about it, there’s not many ways to get great tips, tricks, and links to UX sites and discussions handed to you with the ease of a hallway conversation. I don’t work with Jason Santa Maria or Dan Cederholm (or any of the other great people I follow), but if they have a great resource to share it pops up on my iPhone during the morning or evening scroll through my TwitterFon updates. It’s much easier than managing multiple feed subscriptions and is available on all my computers and my iPhone without having to manage feeds for multiple devices. And if they are tweeting about things that don’t matter to me, I just scroll passed to the tweets that interest me.

For some people — marketers especially — the power of Twitter is in the ability to connect and communicate with people. And they are right, for what they are trying to accomplish. For me, and for what I hope to gain, the power is all in the little gray Follow button.

So follow me, or Zeldman, or anyone else you respect. You’ll learn something. I have.

Bing – Inconsistently Anticipating User Needs

I noticed an interesting thing while playing with Microsoft’s Bing web search — certain terms return a results page with only one result. Well, that’s different.

A Bing search for Google returned a results page with one result (Google.com) labeled “Best match”. Beneath that was link to “Search for other results containing google”. While this is inconsistent with the other search engines people are familiar with, I think it’s a good example of anticipating users’ needs. Most people searching for something other than Google’s homepage would likely use more than just one term, for example “google jobs” or “google stock price”.

What I don’t like is how Bing inconsistently applies this rule.

Searches for several major global brands were handled differently than Google. Searches for Apple, Nike, Motorola, Sony, Coca Cola, Budweiser, Playboy, and Paris Hilton all returned standard search results pages, with either a “Best match” followed the full list of results or a set of image search results (Motorola and Paris Hilton) followed by standard search results. Perhaps the standard results page is used when the search algorithm doesn’t rank the top result high enough on some other internal relevancy scale. But that wasn’t clear to me and made the interaction with Bing a bit confusing.

Switching from consumer brands to baseball I searched for New York Yankees. The search returned the current box score of the Yankees-Devil Rays game followed by a standard results page. Sports team searches do deserve a different treatment since fans are often looking for the latest scores. When I searched for Chicago White Sox, I got the box score for the Sox-Twins game followed by a standard results page. The same was true when I searched for their crosstown rivals the Cubs.

When I searched for the Arizona Diamondbacks, whose game that night had not yet started, I got a page with no box scores and standard search results. What was odd was that in all three baseball searches the official team site was the top result, but it was not labeled “Best match”. I again wonder if some internal relevancy threshold that was not met by the highest ranked result.

Moving to newspapers a search for New York Times returns the single link results page with a twist — a link to news stories labeled “Top headlines” and a search within the Times text box. I got the same results page design I searched for Chicago Tribune. This would be helpful for someone searching for a particular online media site.

Moving to media and content portals outside of newspapers, I tried MSN, Yahoo, AOL, and CNN. MSN, Yahoo, and AOL got the special one link plus search box page. CNN, however, only returned the Best match and top headlines with no search within box.

Looking at social media sites, Facebook and MySpace got the special one link treatment, but only MySpace got a search within box. Twitter got a standard results page plus search within text box. Meebo got a standard results page.

Technology brands Dell, HP, Compaq, Sun, Oracle, Linux, Firefox, and Microsoft, all returned one of the previously seen variations of a standard results page (with or without search within or Best match). Ironically the Microsoft search did not have the top result (Microsoft’s homepage) labeled as a Best match or a search within box.

Searches for online retailers yielded more consistent results. Sears, Crate and Barrel, Gap, and Amazon all returned a standard results page, as did Staples, CDW, Barnes and Noble, and Walmart (most with search within boxes). One difference was most the searches for the bricks and mortar retailers all had a map of the stores nearest my location with addresses and phone numbers.

There were many other cases where Bing offered content of value to the searcher beyond the standard results page we are familiar with. It makes sense that searches for sports teams in active play return results with boxed scores, that newspaper searches include a search box and links to top headlines, and searches for retailers include a map to store locations, especially if the behavioral data shows that’s the content most people are looking for when doing those searches. This kind of content is nothing new as Google has long handled its searches this way.

Providing valuable content and removing clutter is useful, but the on-again off-again Best match label and the inconsistent use of the one-link results page may leave some users wondering what they are doing wrong. Bing needs to improve on that.

Take a look at an interesting site that shows side-by-side comparisons of Google and Bing. It’s a nice way to compare how the two sites handle the same search.

Bing also has a page that explains a little of what’s behind Best match.

HCI 440: Usability Engineering

Just finished the final session of my usability engineering course at DePaul, a course that provided a lot of insight into the UCD process and the compromises you make on a working project.

Overview: The main focus of the course was to design a mobile phone application over an 11-week period. To simulate some of the pressures and challenges of a real world situation, we had to work in teams and deliver each successive phase of the project (research, requirements, designs, prototypes) weekly. The final deliverables were a presentation of our business case and the market problem we solved along with completed Photoshop mockups of the three primary use cases.

Research: After deciding on the application we wanted to design (an iPhone app for fashion accessories), we conducted market research using a combination of online surveying and interviewing. We surveyed nearly 50 people who matched our intended target demographic and interviewed 10 people during a one-week period. As so often happens, we learned we made incorrect assumptions about what the target user wanted and missed some features they considered important to the application.

Requirements: After completing our research we developed a set of user goals and the necessary supporting functionality based on what we learned about the target consumers. Due to time constraints we had to skip development of traditional use cases and diagrams, and instead utilized a matrix that traced functionality back to user goals. We then developed the requirements to deliver those functions.

Prototype One: This was one of the most interesting and fun parts of the course. Several of our peer teams were developing prototype applications in Flash or HTML for testing on laptops. We chose a different route. Using the iPhone prototyping tool from Teehan+Lax we mocked up our prototype in Photoshop. We then printed the PSDs and glued them to foamcore cutouts to make interacting with the prototype a more tactile experience. While we lost some of the interactivity some our peer groups had, we gained an advantage by having test participants (drawn from the class) actually hold and touch our app. We gained useful insights by watching them respond to color, contrast, and visual cues while actually holding the prototype and viewing it from a realistic distance (though I admit we could not accurately mimic screen brightness and other settings that affect users in the real world). While one of us moderated the tests another played the role of the phone and handed out new screens in response to participants’ actions. In two hours we were able to test five people going through three main use scenarios while capturing our observations on recording forms. We followed each test by asking the participant to respond to five statements about their experience, which we asked them to rate using the Likert scale.

Evaluation: We analyzed the usability issues encountered in several ways. We looked at the frequency of the issue, the impact to the user’s ability to complete a task, and the criticality of the feature of the app where the issue occurred to overall business goals (in our case conversion).

Frequency was recorded as a simple count of the number of times an issue occurred. Impact to task completion was measured as high, medium, and low, with numeric values of 3, 2, and 1 respectively. Criticality also was measured as high, medium, and low, with numeric values of 3, 2, and 1 respectively. Criticality level was set by using the requirements matrix to see how the feature traced backed to user goals.

For example, the failure of two users to see a Buy Now button would be rated as Frequency=2, Impact to Task Completion=High, Criticality=High. This would be calculated as 2 x 3 x 3 = 18. This allowed us to prioritize the issues based on what fixes would have the biggest improvements to the app. In a business project, of course, time and cost would have been other dimensions to consider and some high ranking fixes might have been descoped due to time constraints.

Prototype Two: Based on the Evaluation phase we focused on enhancements to the search interface. Adjustments were made to search results interaction widgets and results list displays. Sorting by price/brand was originally deemed as out of scope but was added based on user feedback. People wanted ways to narrow results quickly, and price and brand seemed most natural to most participants. The refined prototype was part of final deliverable package.

Presentation: Our final presentation was organized around several key areas—user expectations for mobile applications based on the current products available, market need for the product we developed, business opportunities in satisfying those needs, and the iPhone application we designed to realize those opportunities. This exercise allowed us demonstrate that what we designed would be accepted by the market and could be profitable. In addition to our app we developed an affiliate program model that would partner with online fashion retailers to provide revenue to us for referred purchases.

This was a great learning experience because while the primary focus was designing an application following the UCD process it also challenged us to be concerned with satisfying business goals. A useful skill when your design work has to actually float the business.

Note: Screen designs and greater details were not shared because we are considering working with the university’s business school incubator to pursue a commercial application.

Communicating Design

PowerPoint and Keynote are not the first tools a designer thinks of when building a new interactive experience, but let’s face it, at some point you have to sell your design. I meet a lot of designers who think giving presentations is for the sales and marketing teams. But they are kidding themselves if they don’t realize they often are a big part of the sales and marketing effort.

Interaction design is communication – you are communicating functionality and communicating results when users interact with your design. A strong set of communication skills – written, spoken, and multimedia – are necessary to any designer who wants to get their product out of the lab and into the market.

This disconnect became very apparent to me this week in prepping for the final team presentation for my current graduate HCI course. We had finished the product but no one really stepped up to build the presentation. What? We designed a cool mobile app and now no one knows how to sell it? By the time you have reached the end of the product design cycle, you should be intimate with the target users and how your application fills their needs. All that is left is to clearly articulate that.

Working with consultancies large and small I’ve seen the really good IAs jump from Visio to PowerPoint then back into Flash and finally to email to communicate their design. This is especially true early in the process, when final decisions on form and function have not yet been made. Communications is one more set of skills to have under your belt, and mastering it will serve you and your clients well.

Getting Excited About HTML 5

There are some pretty exciting things coming in HTML 5 that will allow us to advance web interfaces even further than we have with the current generation of Ajax and other technologies. With backing from the market dominaters like Google and the legions of open source developers who will surely take hold of these, we could be getting closer to the mythical end of the desktop. How close will be determined by the creativity of designers and developers as much as anything else. And, of course, IE’s dominance and lack of support for standards will continue to hold us back, so the true pace of advancement is anyone’s guess.

Tim O’Reilly has a good post and discussion on some of what was covered at the Google I/O Developer Conference this week so there’s no need to rehash it here. Note: The graphs are a bit goofy and leave one wondering what is the standard unit of measure of user experience.

Take a look also at the Working Draft on the W3 website.

More Fun With Paper Prototypes

Testing an iPhone app prototype in class this week was a breeze thanks to some fast paper prototyping. We developed our prototype using the PSD iPhone UI tool available from Teehan+Lax. To give the prototype a bit more of a real feel, we glued color prints to foam core backing to provide a tactile quality not available in pure paper prototypes. While some of our classmates created slick Flash files that could provide fuller interactivity via a web browser, we felt we learned more by giving the test participants something they could hold in their hand. It was fascinating to watch them swipe up and down while telling us how they would scroll through a list of search results in our mobile shopping app. We also learned a lot about what they found confusing when they scanned the mobile “device” and had difficultly with certain parts of the interface. We would have lost that if they were looking at a laptop-based prototype since it sat farther from them than the mobile would in hand. The participants also seemed more engaged by the tactile aspects of touching and holding. After two hours and five tests, we had a lot of insights for the next revision, and all without writing a single line of code.

Pragmatic Marketing Framework

I just finished a great three-day seminar on the Pragmatic Marketing Product Management Framework. The framework focuses on starting any product design by looking at market problems and the people in the market, instead of the technology that is being developed. Although the framework is geared toward the building of technology products, the idea of focusing on users, markets, and their problems at the start of a development effort can be applied to many industries. How many ecommerce, travel, or financial services websites have features that are there because the engineers could build them instead of a consumer saying they needed them? The framework includes many methodologies found in user centered design, including contextual inquiry, interviews, personas, usage scenarios, and focusing on user tasks and goals. The framework also provides solid boundaries between product management and development activities. Learn more at http://pragmaticmarketing.com.

iPhone Prototyping Tool

Ever find yourself looking for tools to help you prototype apps for the iPhone? After an hour or so wasted looking for Visio iPhone stencils, I came across a PSD-based solution that did the trick for me. It is amazingly ease to use and resulted in some gorgeous high fidelity prototypes that very accurately conveyed the app’s design in a way that made it a breeze to sell my team’s idea. Give it a whirl, you’ll love it. You will need to have Helvetica Neue available. Download it free from the Teehan+Lax blog.