OLED Newspaper Interface

Category
User Experience
About This Project

During my Sophomore year at Rice University, I took a class entitled “Human-Computer Interaction” and chose a project involving the creation of an interface and prototype of an OLED newspaper. Because this was done three years ago, I’m in the process of re-vamping these designs with the technical knowledge of Adobe CS that I know now. Stay tuned for that!

The mock-up of our final design in “book” mode, “laptop” mode and from the side.
The mock-up of our final design in “book” mode, “laptop” mode and from the side.

Declining readership in traditional newspapers among all demographics suggests a good opening for a new newspaper medium (Journalism). With new technologies such as the OLED, it is now possible to create a flexible touch screen newspaper to keep evolving the accessibility of the news. By examining the OLED technology, the systems that people use to get their news, and the demographic of those who regularly access the news, we were able to begin designing a product that attempts to improve on current news sources.

Before diving into the design process, we began with a literature review focusing on questions dealing with the technological aspect, similar systems, and user demographics.

With the technology, we wanted to explore the OLED;s capabilities. First of all, the red and green OLED films lasted for an average of 230,000 hours while the blue OLED films only last 14,000 hours. This told us that we should not include any large blue elements into our design and that we needed have a way to replace the screen in case the blue OLED films failed. Next, water easily damages OLEDs. Therefore including a weatherproofing would help our hardware plus the OLED films stay fully functional. Besides the downfalls of OLEDs, they have plenty of benefits. They refresh a thousand times faster than LCDs and media can be updated constantly in real time (Freudenrich). Both of these are extremely critical for breaking news. Then the flexibility of OLED films opens up countless design possibilities of rolling, folding and page shapes.

With similar systems, we wanted to look at the format and interface of news on e-readers, physical papers, and online. First, we read many reviews on the Kindle and other e-readers to find potential problems and identify strong points. For the delivery options, the newspapers get pushed via satellite or a radio connection as soon as the news source determines that it is ready. In this way, readers have no worries that a neighbor may steal their paper or that there will be a delivery problem. However while the delivery system is swift, a main complaint about e-readers is that they are slow to update their systems even though they have the technology to do so. People even say the Kindle’s delivery “is no match for real-time delivery on the Web” (Customer).This tells us that we need to have the ability to provide constant updates and real-time delivery. For the organization, each newspaper had an article list and a sections list for different topics in the format “Title By THE AUTHOR│Section Name”. In some e-readers, the newspapers would provide a short summary describing the story. When this summary was not available, readers complained that they had no idea what an article was about. Therefore we need to be sure to include summaries or extra information besides the title of an article. In other e-readers, the article was simply a link to the online article. Readers did not like this because it required a Wifi connection and they could access those articles online on a computer if they wanted to read them. Then while readers could click “next” to read a full story, most e-readers also allowed them to browse manually through an entire electronic newspaper. In the full newspaper mode, the advertisements would be removed if a reader bought a subscription but in individual articles, ads were always present.

While researching similar systems we took the opportunity to look at common complaints. For one, many complained that e-readers lacked a multimedia component because they wanted to be able to see pictures, watch videos and view graphics. Users also found that e-readers did not have unique charm or color (Customer). Therefore everything tended to look monotonous. Since users each have different preferences and media choices, a degree of customizability is required. Next, if you compared the e-reader newspaper to the corresponding physical paper, the content rarely matched up. There were articles missing, photos missing, different content, no editorial articles and almost no Associated Press content. All of these were portions of the paper users “looked forward to, but couldn’t find”. From reading these reviews, people gave us insight into what they wanted improved in such a news product. For the product itself, users found that many e-readers weren’t very durable and had shadows on the pages from the page ridges (Customer). None of them had adjustable lighting, adjustable contrast or a thin design. They also found that navigation was not clear because you could tap, tap-hold, or swipe through different parts. Readers also said the navigating lists were non-intuitive and that “you really had to search to find what you wanted to click” plus the page turns “were extremely slow” (Customer). For the interface, readers mainly wanted something personalized to their interests. They said they “want a way to be able to save and share stories” in a history function of sorts. They also wanted a recommended reading section where the device would save information about articles they looked at or read then give similar articles. Lastly, they wanted a way to have input and some way to incorporate all types of media (including videos, pictures, social media and sharing).

With the users and readership, we found we must stay true to past forms of the newspaper. Because people have many experiences with news previously, they already have ideas of how it should work. Therefore their familiarity and loyalty must be taken into account. By building familiarity through ads and content, people will feel like they are reading and seeing what they want to see (Flavián). Next, we found that 53% of tablet activities are getting the news and that 51% of tablet users have a college degree (Ponting). This suggests tablet users may be our best target audience though it is likely they already have a news and internet source. Therefore we need to aim for people who are likely to have tablets, but don’t have one already. Furthermore, we found that people tend to read different news sources at different points in the day. Print is read early in the day or after dinner while websites are checked periodically throughout the day. Tablets are used in the evening while phones are used for steady updates (Newspapers). Therefore, we need to take functions of each of these into account when designing a single news source. Lastly, there has been a large loss of revenue for newspapers and as revenue for print newspapers decreases, revenue for online newspapers increases. We can begin to see the shift from classic newspapers to a more customizable, accessible online resource.

We decided at this point to observe individuals reading newspapers. While we were only able to observe a small number people we gathered a few key pieces of information. The first thing most people do is pull apart the sections of the newspaper so that multiple family members can read the newspaper at once. Readers quickly skim the first paragraph of a number of articles until they find one they are interested in and then actually read that article. Once a reader is finished with their section of the newspaper they will pass it around to other family members or leave it in a communal spot like the kitchen table so that other members of the family can read the newspaper later. A final observation was that many families subscribed to multiple newspapers. We observed that it was not unusual for a family to subscribe to multiple newspapers. Many families subscribed to both local papers like the Houston Chronicle or the Hot Springs Sentinel-Record and to national papers like the Wall Street Journal or the New York Times.

In order to gather a little more information, we decided to put out a survey. We focused on the areas that we thought were important that we didn’t find answers to in our literature review or areas where different literature contradicted each other. We collected participants by putting the survey on facebook in our statuses and our Rice University groups; 90% of our 108 respondents were under 22 and current college students. This means we didn’t exactly hit our target audience with this survey, but it did provide us crucial information.

Participants asked which they preferred out of touch screens and physical buttons
Participants asked which they preferred out of touch screens and physical buttons

We knew we would need to make a design decision eventually on whether to use a touchscreen to navigate our interface or physical buttons. Our literature review did not lead us to find that one option was particularly better than the other, so we asked our survey takers what they preferred. Users slightly preferred a touchscreen to physical buttons, but it is interesting to note that the results were very close (pictured above). We also asked users to explain why they preferred one option to the other. The users who prefer physical buttons primarily did so because they thought they were easier to use, they thought it was more difficult to type on a touchscreen, and they liked having the tactile response a physical button provides (Figure 1.7). While there isn’t much we could do to repeat the tactile response of button on a touch screen, we knew we would have to work to make typing and general usage better if we chose to go with a touchscreen input. The people who preferred touchscreen generally did so because they thought they were easier to use or were familiar with a touchscreen interface (pictured below).

The main reasons survey takers prefered physical buttons were its ease of use, the difficulty of typing on a touchscreen, and the tactile feedback a physical button provides.
The main reasons survey takers prefered physical buttons were its ease of use, the difficulty of typing on a touchscreen, and the tactile feedback a physical button provides.

Most users prefered a touchscreen for it’s ease of use and their familiarity with touchscreens.
Most users prefered a touchscreen for it’s ease of use and their familiarity with touchscreens.

There are so many options available for people to find their news, so we asked people what were their primary sources: television, physical newspaper, ereader/tablet newspaper subscription, news websites accessed with a cell phone, and news websites access with a laptop or desktop computer. In our results we found that 87.5% of the participants who regularly kept up with the news used a laptop or desktop computer (pictured below). We also found that no one used an e-reader or tablet as their primary news source. This surprised us since tablets are so portable and e-readers are made specifically for reading. That data paired with our literature review put into perspective that we should avoid an interface similar to those used in e-readers even though our OLED newspaper’s purpose seems so similar.

When asked about the technologies people used to access the news, most said computer, some said a cell phone and no one said an e-reader.
When asked about the technologies people used to access the news, most said computer, some said a cell phone and no one said an e-reader.

To get an idea of how many different news outlets we would need to support, we asked users which websites they used to get news. Most people who took the survey used one to five websites regularly and a few outliers used as many as ten. Users listed a total of 68 websites that they used to get their news (pictured below). The websites covered a wide variety of topics, biases, and scope. This gave us a good idea of the versatility our system would require.

Participants answered the open question “Where do you typically get your news from?” and this graph shows the multitude of sources they answered.
Participants answered the open question “Where do you typically get your news from?” and this graph shows the multitude of sources they answered.

We also wanted to find out how a user would choose the order of the articles they read. We allowed participants to choose each of the following they used to pick which articles they read: by topic, by most recent, by most popular, by peer review, and by the given order (pictured below). We found that nearly 50% choose articles based on topic, so we realized that the ability to filter topics would need to be a big part of our design. The next most popular response was to read articles in whatever order they were presented in. This wasn’t particularly useful to us, since each medium presents their articles in different ways. The next two most popular responses were to read by most recent and by most popular. We decided that these options would also need to be featured prominently on the front page; although, less so than the option to filter by topic. Only two survey takers said that they looked at peer review when choosing articles. However, we did have anecdotal evidence that the way people find peer reviews is not through the news sources themselves, but through articles being shared on sites like reddit, facebook, twitter, and google +, so we included an option to share articles on those sites, but didn’t feature it on the home page.

Participants in the survey preferred to choose articles based on topic rather than on any other criteria.
Participants in the survey preferred to choose articles based on topic rather than on any other criteria.

Using the above data, we began to develop a potential design. Our first design choice was whether to give our design a touchscreen or physical buttons. We already found out that users prefer one or the other through our survey. Most said there was “no need for both” and that they would “prefer one or the other”. Also, we found in our survey that touchscreens were slightly more preferred than physical buttons. Many participants complained that physical buttons were necessary because they “have big fingers” or “are too clumsy for a touchscreen”. However in recent years, technology has been shifted to a touchscreen basis. Select individuals in the survey even said touchscreens were “what I am used to” or “what I use daily”. We also saw a shift in the amount of people that preferred touch screens as time increases, meaning we believe that touchscreens are the future and should therefore be the center of our design. The only downside to this is our holding design. Our electronic newspaper features a bi-fold design and because of this, your hands are on both sides like a book. The design of the product will have to be such that touch screen presses are not accidentally committed on the outside edges of our device.

For the OLED screen, we needed to determine how flexible we wanted it to be. Because OLEDs have the capability to be flexible and transparent like plastic, we technically could’ve made a rolled design or a folded design. However, we decided on the OLED films outlined by a semi-structured border for several reasons. While folding is more traditional and has a lower chance of damage, it would have a problem with our touchscreen interface. If the screen wasn’t fully rolled out or accidentally folded, sat on, bent, etc. then problems would develop. Rolling would make the product less durable because of the rolling tracks and constant pulling on the screen. Therefore we decided on the traditional two-hand way of holding a newspaper that folds like a book or binder.

For the size of the device, we decided to make it similar to a notebook where each side would be the size of a standard page. Therefore it would be easy for news companies to format their articles and it would be easy for people to read. Plus, it was a standard size so it could fit in laptop sleeve pockets and other storage spaces.

For the logistics of using such a device, we needed to consider battery life, charging, power and more. First of all, to push updates we first considered a Wifi connection, but found that only 61% of houses have Wifi. Therefore we needed to broaden the device’s capabilities to having a mini-USB port (so it can connect to a computer), having a Wifi option, and having 3G capabilities. No matter where the user is, he should be able to receive updates and news information. We would include a battery with the longest possible life-span. The battery will be shown at the top right corner and the device will alert the user when the battery is lower than 20%. Then the device can charge with a cord from the mini-USB port to a computer or a wall attachment. When the device is charging, the green power light will go to blue and when charging is complete, the backlight will turn off. Next to turn the device on, users can push the power button on top on the device’s spine. This way the button is out of the way so users won’t accidentally hit it. This button will also include a green backlight when the device is powered to give users a visual confirmation that their device is working. Then we needed to give the device volume capabilities in order for users to be able to watch videos. The speaker would be located in the middle of the spine so it could be unhindered by the pages or by contact with the person. It would be a simple dotted speaker to allow sound out and would include a headphone jack on the opposite end of the spine from the power button.

For the opening design, we wanted to stay true to the existing mental model while keeping in mind the changing technology. Because people traditionally read the news and books with two hands, we wanted to give readers that ability. However we also wanted to include a shared function which needed to include a full keyboard. The full keyboard is what revolutionized the tablet market because it gave people the ability to use bigger buttons and type more accurately.

For the interface usability, we decided to use Arial font because it was the “most-liked” font and was best read on screens (Thomason). We also wanted to include larger buttons and customizable text size. Because we know newspaper readership increases with age, we did not want to exclude an elderly population.

One function we really wanted to include was a breaking news function to differentiate our project from existing products and news sources. It has been noted as something many people want and would be an improvement on the traditional newspaper. Therefore, we included a ticker to present stocks and breaking news that changed as the day went on.

The home page of our OLED newspaper for the “John” profile
The home page of our OLED newspaper for the “John” profile

Lastly, we had to determine how to create the layout and interface. We wanted to follow the layout of newspapers while making it easy for people to flip through different topic sections. We chose to put topics on one screen to simulate the way users flip to specific sections of a newspaper. We also choose to give a brief summary of each article because one major issue with ereaders was that users couldn’t see what an article was about before clicking it, while traditional newspapers allow the reader to skim an article to decide whether or not they want to read the whole thing.

After creating a mock-up of this device, we decided to test our design. A usability testing suite was created. Participants were asked to perform two simple tasks and the time taken to perform each task was measured using Javascript. Participants were first asked to navigate to an article in a randomly chosen topic. Intuitiveness of the design is assumed to correlate with how long people took to select an article within the target topic. Participants were garnered through the same methods as our survey, so we assume they were of roughly equal demographics, though we had far less participants; thirty-nine people took our usability test.

Participants were introduced welcomed to the test and then asked to navigate to an article from a given, randomized topic. According to the figure below, the mean time of the first topic hit was about 3.5 seconds (3500 milliseconds). This suggests a relatively intuitive interface since the topic chosen was randomized. It is useful to note that the mean aforementioned is excluding a couple outliers from the data set. These outliers surpassed 12 seconds, but the mean including them was a little over 4 seconds; still pretty good. One of the outliers was over 20 seconds, and this may have been due to slow load time or another external cause (phone call, walking away from keyboard, etc.) and this highlights the potential for error in remote data collection. The convenience of it can not be matched though.

The time it took each participant to locate a topic during our task analysis. This includes the two users whose times were unusually large compared to the rest of the participants. The red line is the average time taken.
The time it took each participant to locate a topic during our task analysis. This includes the two users whose times were unusually large compared to the rest of the participants. The red line is the average time taken.

The time it took each participant to locate a topic during our task analysis. This does not includes the two users whose times were unusually large compared to the rest of the participants. The red line is the average time taken not counting the outliers, while the yellow line take the outliers into account.
The time it took each participant to locate a topic during our task analysis. This does not includes the two users whose times were unusually large compared to the rest of the participants. The red line is the average time taken not counting the outliers, while the yellow line take the outliers into account.

The amount of time it took to navigate from a topic to a specific article.
The amount of time it took to navigate from a topic to a specific article.

The end of the usability test included a brief survey about satisfaction. Since the design of the interface was rough we only inquired about users general impression of the interface. Out of 39 respondents, 26 said “yes” to “Do you think this interface, when more developed, could be something you use often?” We also asked participants what they felt the interface was lacking. Most of the responses were about items that we had already accounted for in our final design, such as a lack of search bar, options, and feedback. The rest of the suggestions we encountered were not about our design, but the specific implementation of our test. We didn’t have time to write the code for a fully functioning interface, so users complained that there was no search bar and that the breaking news, settings, and subscriptions buttons did not actually lead anywhere. The dual screen design does not translate well to a computer where people are used to scrolling down to read an article rather than moving onto the next screen similar to how they would navigate a physical book. The rest of the comments had to do with the specific computers and browsers participants were using like the interface not fitting in the screen properly because their computer screen was smaller than the dimensions of our final product.

We had planned to make small changes in our design based on the outcome of the task analysis, but our data did not give us much to work with. If we had more time to run a better test I would have liked to make the interface fully functional so that participants could click on all the buttons. If we had had access to touchscreen tablets it would have been nice to test see how the responses times changed when participants used a touchscreen. Using a mouse is very different from using a touchscreen it’s hard to determine how intuitive our interface actually is from this data.

In conclusion, our product attempts to combine traditional and modern aspects to convince younger readers to try it while swaying elderly readers to switch over. While nothing like this is out on the market or possible to create yet, we will be interested to see what sort of design and interface features a real OLED newspaper will have in the future.

References

Berna, H. U., & Attila Islier, A. (2010). A novel attribute-based dynamic content area layout for internet newspapers.Internet Research, 20(2), 135-153. doi:http://dx.doi.org/10.1108/10662241011032218

Customer Reviews of the Kindle. Web Nov 14 2012.

Demographic Research on Newspaper Readership. (2001). Generations, 25(3), 24.

Edmonds, Rick. “Newspapers by the Number”. 2012. Stateofthemedia.org. Web 28 Nov. 2012.

Flavián, C., M. Guinalíu, and R. Gurrea. “The Influence of Familiarity and Usability on Loyalty to Online Journalistic Services: The Role of User Experience.” Journal of Retailing and Consumer Services 13.5 (2006): 363-75. Science Direct. Web. 24 Oct. 2012.

Freudenrich, Ph.D., Craig. “How OLEDs Work” 24 March 2005. HowStuffWorks.com. Web 24 October 2012.

Hod, Marlowe. “E-Newspapers: Digital Deliverance?” IEEE Spectrum; Feb2007, Vol. 44 Issue 2, p10-12, 3p, 2 Color Photographs. Web Oct 24 2012.

John V. Richardson Jr, Khalid Mahmood, (2012),”eBook readers: user satisfaction and usability issues”, Library Hi Tech, Vol. 30 Iss: 1 pp. 170 – 185. 20 Nov 2012.

Newspapers: Thriving in a Digital World. Marketing Magazine, 11964650, 2012/2013 Media Digest, p49-57, 7p, 12 Charts. MasterFILE Premier Web. 24 Oct. 2012.

Ponting, Shane. “Who is Reading News and Newspapers on Their Tablets? A Look into Tablet News User Demographics and Behavior.” 2 March 2012. Velositor.com. Web 28 Nov. 2012.

Thomason, Larisa. “Usability Tips: Easy to Read Fonts”. September 2003. Netmechanic.com. Web 12 November 2012.

Who Is Reading: A Question of Demographics. 13 March 2006. Journalism.org. Web 25 Nov 2012.