Hacks/Hackers NY: Displaying Data On Mobile Devices

Rosaleen Ortiz
Rosaleen Ortiz

I attended Hacks/Hackers NY: Displaying Data on Mobile Devices at the Hilton Hotel. The panelists present were: Luke Miller, senior UX architect and mobile lead for The Wall Street Journal, and Zach Seward, Senior Editor of Quartz (qz.com).

Luke Miller of WSJ presented first, focusing on Data UX on mobile. He explained that The Wall Street Journal focused on three things in regards to mobile: data journalism, market data — “Lots of market data,” and interactivity — “I’m the user experience person.” Miller broke down where mobile data is used. “We use parts of an article, whether static, like graphics, and we use key quotes. We also use curated lists [watch lists and editorial selections] and stand alone products.”

“Users care about watching stocks important to them,” Miller said about UX. “It depends if there is a demand there, of course.” Miller also explained features in WSJ platforms that improve UX. “MarketWatch, the market data app uses a pop-over modal, which shows when an article might be linked. A retirement planner was developed into the SmartMoney Retirement Planner.” He added—about the Factiva iPad app—”…it’s about research, about being able to configure data [and we’ve incorporated that to further enhance the user’s experience].”

Miller talked about constraints within developing UX. Multiple publishing platforms (web or native) limit UX because developers have to ask themselves if “this is going to be a native app or not?” International constraints present themselves in the form of publishing certain data points. Miller gave an example: “We couldn’t publish some data points in Germany and that caused a lot of contention between us.” Multiple brands also present limitations because it means different users. “There are certain user types within brands,” Miller said. “Our problem is ‘How do we get these users [that might be using Android or BlackBerry phones] to use this app?” Finally Miller said, “Just let the story be told. Let the journalist tell the story.”

The mobile process follows four steps that are extremely important to the development of the user experience. “We all come together [during the roundtable] and show our initial products and we go back and modify them,” Miller said. The UX exercises that WSJ follows are: realizing best practices, affordance and platform specifics; environment, competition and previous iterations of the product; discovery, importance vs. use, necessity vs. use, A/B, and is/is not; and sketch, flow and prototypes.

“I first start sketching,” Miller said. “I read articles to try to wrap my head around it. Then, after the sketching I move on to higher fidelity wire frames and it’s developed into the final product.” He prioritized components for a good UX: 1) user needs, curious reader to retail investor to Terminal user; 2) brand objective, news analysis, configurability, discoverability; 3) unexpected user benefits, informational, shareable, contextual alerts, configurability, and simplicity. Miller did concede, however, “making that user experience great is difficult when you’re just one piece of the puzzle.”
He also described benefits of Touch UX (One Touch and 1:1 Gesture Control), where users gain more use through fewer interactions with their mobiles. Miller also briefly described Polished Complexity, which “designers come up with.” Components like Invisible UI, anticipatory sensors or HD and “peace of mind” error or status messaging helps improve user experience.

qz

Zack Seward of Quartz, a new mobile business news magazine launched by The Atlantic, presented qz.com (Quartz) and its focus on mobile and tackling the issue of presenting news to mobile users. Quartz uses a JavaScript web app, which “supports modern browsers,” and opting to alienate old browsers like Internet Explorer 7. “We wanted to think about what mobile meant,” Seward said. “Email is one way to be a mobile-first publication, but there are a lot of poorly formatted emails for mobile.” Seward said, “[Quartz] also created a mobile-first email, but looked to Politico emails for inspiration. We saw what a morning email should look like and modeled it after them. The email needs to be a worthwhile read.” Quartz’s email has very little links at the beginning of the email and presents very brief, but crucial paragraphs summarizing stories. As the user scrolls further down, links become more frequent as it means the user is interested and more prone to engaging with the email.

Seward also took steps to create a friendly user experience. “We made the web address [qz.com] and our emails [hi@qz.com, z@qz.com] extremely short to reduce that friction between user and the experience,” he said. Developers at Quartz also added the aspect of continuous scroll and separation of stories using carefully places advertisements that do not interrupt the flow of the story. “We realized that the ‘up-down motion’ is a dominant behavior for users with touch screen phones. We wanted to be friendly towards them, which is why we decided to go with the continuous scroll,” he said.

Regarding articles, Seward said, “Don’t clear your throat. Get to the point. There should be no BS. This is extremely important in mobile.”

Seward tackled data visualization by making sure the graphic is readable on mobile and if not, the essential information on the graphic is available. He also said, “in mobile, stepping users through large infographics is the best way to go,” because large graphic content would be a nuisance as users would have to zoom in and zoom out to read data. Sometimes graphs and certain graphic content should be disregarded for mobile, Seward said. “Choose what to show and what not to show.” He referred to NPR as an example of choosing content for mobile graphics. He also mentioned that tables are a “coding nightmare and to fit it in UI for mobile is tough to figure out.”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s