3 posts tagged “interface design”

Belle (Ying-Tzu) Huang

Com 597: Theories and Practice of Interactivity

Autumn 2007

Oct. 24 2007

 

Final Project Proposal

Book Review

 

Mobile Usability

How NOKIA Changed the Face of the Mobile Phone

By Christian Lindholm, Turkka Keinonen, Harri Kiljander

 

I. Motivation

When I think about what is the best topic for researching an interface design with nice interaction between human beings and machines. I thought about my Nokia.

I had my first cell phone when I was seventeen years old. Since then, I’ve used four different cell phones which were produced from Nokia. On the other words, I am a huge fan of Nokia.

 

As Nokia’s slogan, “Connecting People,” I believe that mobile phones were invented because human beings have desires to connecting with people, any time, any where. 

 

The slogan Nokia uses in Taiwan is “Technology comes from humanity all the time,” which also shows that humanity is what interface designers focus on.

 

Like the cover of this book, there are only three buttons which control all the functions on entire Nokia 3310.  The “C” button represents “make a phone call.” Also, the combination of main blue button and up-and-down button can nearly complete all the commands on menu or cell phone setting. We don’t need tons of buttons any more. Simplicity radically changed people’s user behaviors.   

 

Written by present and former Nokia employees, this book mainly discusses about the process and working methods that have enabled Nokia to revolutionize the usability, which was fully explained first time. That’s why this book interests me.

 

 

II. Significance

 

Sociologists talk about how mobile phones change the tempo of our lives, culture, social structure, communication model, concepts to time and space, interpersonal relationship, identity, digital divide, and dependence on it. Even famous writer Stephen King wrote a horrific novel “Cell” to imagine the technological warfare and terrorism that cell phone might cause. 

 

Since mobile phones made foregoing changes, interface designers were eager to find a better way to make less education when people first time use their products.

 

Seeking for a better user interface (UI) design might be a solution to it. Interface design is all about understanding users’ life style. It's not about technology; it's about human life experience.

 

UI, user interface (or Human Machine Interface) is the aggregation of how users interact with a particular machine, digital device, computer program or system. User interface contains: (1) Input, which allows users to manipulate a system; (2) Output, which allows the system to produce the effects of the users' manipulation.

 

Foe advanced, a graphical user interface (GUI) might perform better understanding on mobile design. GUI is a type of user interface which allows people to interact with a computer and computer-controlled devices. The application implements graphical icons, visual indicators or special graphical elements called "widgets", along with text, labels or text navigation to represent the information and actions available to a user.

 

The goal of graphical user interface design is to enhance the usability of the underlying logical design of a stored program. The visible graphical interface features include graphical elements (widgets) that may be used to interact with the program. Common widgets we apply everyday could be: windows, buttons, menus, and scroll bars. Larger widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message or drawing. Smaller ones usually act as a user-input tool.

 

Giant Ant Co. addressed an article “The Context of Mobile Interaction” and a “Mobile Context Model” for mobile interaction design[1]. It describes how interface plays an important role in users’ daily life. With so many tasks and environment interferences,

Nokia, as the leading brand in mobile phone sales[2], should provide more completed interface design in the mobile market to engage users. I will also apply this model to exam if Nokia’s cell phones could achieve those tasks in daily life.

 

 

 

III. Topics in the Book

 

Mobile Usability: How Nokia Changed the Face of the Mobile Phone was written by the team that brought us the Nokia user interface that a lot of users have come to know and love. I will make a succinct summary in this section to point out several design concepts Nokia applies.

 

The first part of this book reveals the framework of Nokia user interfaces. User interface styles, according to Nokia's internal definition, are combinations of the user interaction conventions, audiovisual-tactile appearance, and interface hardware.

The second part authors discussed about how living styles and culture make the mobile interface design different. Katja Konkka, drew a panorama picture of people's living style in Mobai, India. Then authors used several case studies, prototypes, and work flows to map their design concepts.

 

The key to Nokia's UI development strategy was market segmentation to target user interfaces to specific demographics and types of users, and today we have the Nokia Series 40 for mass market consumers, the Series 60 smartphone for sophisticated consumers desiring PDA functionality, and Series 80 for enterprise users.

 

In the book, the authors describe the psychographics of groups they designed for. UI attributes for "Balancers" include intuitiveness, personalization and simplicity. Phones designed for "Controllers" have attributes of efficiency and productivity. "Experiencers" get phones that express individuality, appearance and fashionability, and "Impressers" need exclusivity, individuality and attention to details.

 

The common goal of usability professionals working on Nokia mobile phones is to develop devices from the end-user needs’ perspective, and not only based on technical possibilities. Their task is to ensure that the target user group of each model can operate the device fluently and with joy.

 

Nokia investigates all phases in the device lifecycle: taking the device into use, learning to use it, and daily use. The variety of different cultures and contexts of use make usability work especially interesting and challenging. Compared to PC application development or Web site authoring, mobile phone manufacturing requires a much wider range of usability investigation. Some examples in this book discuss about the principles of usability and Research & Development process that Nokia experts investigate.

 

Virpi Roto, senior usability specialist in Nokia Research Center, addressed the sample research topics in mobile device usability they use in Nokia[3]:

 

Input	Output	Software	Other
- Ergonomics of  keys & the whole device - Key discovery - Text input - Touch screen input - Speech input - Motion gestures	- Display quality - Audio quality - Haptic feedback	- User interface consistency - Information visualization - Usability within single applications - Application	- Mechanics (e.g. battery change) - Cover material - Graceful power saving - Accessories

 

 

IV. Extended Reading

 

Designing Interfaces by Jenifer Tidwell

 

Like the author said, “Designing a good interface isn't easy.” Users expect software that is well-behaved, good-looking, and easy to use. UI designers over the years have refined the art of interface design, evolving many best practices and reusable ideas.

 

This is a good book which addresses almost a hundred principles and patterns in designing interfaces, including the solutions to common design problems, tailored to the situation at hand. Each pattern contains practical advice that you can put to use immediately, plus a variety of examples illustrated in full color.

 

Each chapter describes key design concepts that are often misunderstood, such as affordances, visual hierarchy, navigational distance, and the use of color. I would like to capture some design ideas as background knowledge to check Nokia’s design and development process.

 

Mobile Interaction Design By Matt Jones, Gary Marsden

 

Mobile Interaction Design shifts the design perspective away from the technology and concentrates on usability; in other words the book concentrates on developing interfaces and devices with a great deal of sensitivity to human needs, desires and capabilities li>Presents key interaction design ideas and successes in an accessible, relevant wa Exercises, case studies and study questions make this book ideal for students Provides ideals and techniques which will enable designers to create the next generation of effective mobile applications Critiques current mobile interaction design (bloopers) to help designers avoid pitfalls Design challenges and worked examples are given to reinforce ideas Discusses the new applications and gadgets requiring knowledgeable and inspired thinking about usability and design Authors have extensive experience in mobile interaction design, research, industry and teaching

 

How complex can mobile interface design be: iPhone, Enemy or Partner?

 

When Apple Co. made their iPhone enter the market on June 2007, the battle on mobile interface design went to a peak. Facing to the threat, Nokia also developed their “GoPlay event” for fulfill the interaction and graphical 3D interface. The new version of cell phone interface will enter the market next year. From users’ aspect, we indeed hope that digital devices come from different could make the best performance and satisfy consumers’ needs. In this part, I will discuss about the advantages and disadvantages in iPhone interface.

 

How simple can mobile interface design be: One Laptop per Child[4]

 

The project was originated by Nicholas Negroponte to provide children around the world, especially nearly two–billion children in the developing world, with new opportunities to explore and express themselves. The desktop metaphor is so entrenched in personal computer users' collective consciousness that it is easy to forget what a bold and radical innovation the Graphical User Interface (GUI) was and how it helped free the computer from the “professionals” who were appalled at the idea of computing for everyone. Through a simple and clear interface design, scientists are hoping to reduce the digital divide in the developing world.

 

 

V. Reference Materials

 

Emotional Design, Donald A. Norman

Designing Interfaces, Jenifer Tidwell

Mobile Interaction Design, Matt Jones and Gary Marsden

 

TdAic Taiwan Digital Arts, http://www.digiarts.org.tw/en/indextw.aspx

Engadget Discussion Forumhttp://www.engadget.com/

Graphical User Interface Gallery http://www.guidebookgallery.org/

Information Architects Japan http://www.informationarchitects.jp/

Giant Ant Co. http://www.giantant.com/

One Laptop per Child http://www.laptop.org/en/index.shtml

MOSH http://mosh.nokia.com/

 

 

Belle (Ying-Tzu) Huang

Com 597: Theories and Practice of Interactivity

Autumn 2007

Oct. 24 2007

 

Journal 3

Interaction Interface Design in NYtimes.com and LAtimes.com

 

I pick two mainstream news websites to make a comparison in this journal. One is NYtimes.com which is based on New York City; the other one is LAtimes.com which is based on Los Angeles City. Both of them have huge circulation, New York Times, with the largest reported circulation went up to 1,623,697, was ranked as the third largest newspaper publication in US; Los Angeles Times, with the largest reported circulation went up to 1,172,005, was ranked as the forth largest[1].

 

NYtimes.com

Displayed with a clear index background, NYtimes.com applies a text based webpage design concept fro mapping their image as a traditional and classical newspaper since 1851[2]. The structure is three columns for navigation on the left, articles and photos in the middle, and advertisement on the right.

 

The navigation column is categorized by very detail genres of news, then blog or weekly comments, then digital mobile devices, and general information. Be honest, this navigation is explicit but blurred. Where can I type in the address of my house and get a one-year subscription of the New Your Times? How will I know that I have to find the “customer care” from the navigation bar first?

 

The middle column includes news articles, pictures, videos and audios. The interface here is combined by several chunks of content, such as the traditional newspaper we get used to. The advertisement area is not that annoying, comparing with many flash and pre-roll ads.    

 

Although NYtimes.com starts with a news website, they have great ambitions to make their website as a major portal website with integrated information. They implement almost all the text from paper version, news pictures (sometimes display as slide shows), new videos, and news audios (mp3). However, it is not an easy thing for initial users to find what they want from the website. 

 

As to the interaction design, NYtimes.com provides RSS feeds, e-mail subscription, “My Account” as a web management center to set up users’ information and preferences, “My Times” as a customized page, “Most Popular” were articles or movie clips selected by largest traffic in e-mail, blog, or search area. “My Times” page also provide diverse news resources and widgets, such as Yahoo! News, Washington Post, Times, and BBC News.

 

The function area for each article can help readers e-mail this article to their friends, print or reprint the article, save the article to your own NYtime file folder, and share it to many social tagging systems. Which is also considerate, the system allows readers divide a long piece of article into several pages, but they can also combine it into a single page.

 

What NYtimes.com is lacking is the area for readers to leave a piece of feedback or grade the movie clips. The only clue they measure if an article is popular or not is through the traffic. But we all know that it would be a dangerous and biased view.   

 

Even though, what caught my eyes is the “Submit Your Video for California Wildfires,” the UGC (User-Generated Content) technique NYtimes.com applies was great. Like “iReport” from CNN.com, the collection of stories, photos, and videos from local people could enhance the community participation, also the interaction between publishers and readers.     

 

LAtimes.com

 

Then I would like to talk about LAtimes.com. Comparing with NYtimes.com, LAtimes.com implements a graphical interface design in their index. They also have three-column design. Navigation bar on the left, articles and graphics in the center, and advertisement on the right.

LAtime.com indeed provides a refreshing index with succinct and bigger front and graphic. I am really appreciated with the slide show they present in the front page. Readers could go to the next page by clicking the buttons. In this way, editors save more spaces in presenting information; also readers wouldn’t be bothered by the glittery photos.

 

It’s easy to find the subscription/home delivery by scrolling down the navigation bar; while it is a little difficult to find the paper version of today’s newspaper because the link is hidden like a category of news in the navigation bar.

 

The member log in entrance is hard to reach as well; readers have to go to “My Settings” to access their customized page. However, LAtimes.com offers a handy MyLATimes to customize each reader’s favorite news topic. Readers can edit or modify the feeds by dragging the box. The process is as easy/fun as using iGoogle.

 

LAtimes.com provides related news photos and videos beside news articles. Which is also considerate, the system allows readers divide a long piece of article into several pages, but they can also combine it into a single page. In addition, besides tagging function, e-mail subscription, and RSS feeds, LAtimes.com allows readers to leave comments on the forum (while only some of the articles could be added feedback buy readers, the rest couldn’t.)  

 

Eight Golden Rules of Interface Design

 

Next step, I would like to apply Shneiderman’s “Eight Golden Rules of Interface Design” to exam the interaction interface design in Nytimes.com and Latimes.com.

 

Eight Golden Rules of Interface Design by Shneiderman	NYtimes.com	LAtimes.com
1. Strive for consistency	★★★★ (Navigation bar and title hierarchy is consistent.)	★★★★★ (Navigation bar and title hierarchy is clear and consistent.)
2. Enable frequent users to use shortcuts	★★★★  (Allow readers to sign up an account and customize their own news page.)	★★★★  (Allow readers to sign up an account and customize their own news page.)
3. Offer informative feedback	★★★ (On the “My Times” page, news articles, photos, videos display at the same time.)	★★★★ (On the “MyLATimes” page, news will display only when users roll over the titles. This can save lots spaces.)
4. Design dialog to yield closure	★★★★ (The design of function bar beside every article is clear.)	★★★★ (The design of function bar beside every article is clear.)
5. Offer simple error handling	★★★★ (“My Times” allow users to customize their own news page and RSS feeds.)	★★★★ (“MyLATimes” allow users to customize their own news page and RSS feeds.)
6. Permit easy reversal of actions	★★★ (Videos will auto-play.)	★★★★  (Readers could know the path how did they come from on the top of each article.)
7. Support internal locus of control	★★★★  (Allow readers to sign up an account and customize their own news page.)	★★★★  (Allow readers to sign up an account and customize their own news page.)
8. Reduce short-term memory load	★★★ (Navigation bar and categories are too detailed.)	★★★★ (Navigation bar and categories are clear.)
** Quantity and influence of information	★★★★★	★★★
Overall	3.8★	4★

 

Overall, LAtimes.com provide not as much information as NYtimes.com does, but the interface LAtimes.com display news information is more reader-friendly.

 

Newser.com

 

Finally, I want to introduce one of my favorite news website, Newser.com, which I think is a new way to edit news website with graphical interface design. Less advertisement on the index page makes the page more clear and “under-controlled.” Readers can also customize their news page with different topics and numbers to display.

The index is constructed by several pieces of news graphic with few words. The first paragraph of news articles will display only when users roll over the titles. Of course, you can choose not to display the dialog box unless you click into the exact news articles. This can save lots spaces.

 

Newser.com provides related articles, photos and videos beside every news article. Sharing and tagging system are embedded beside every article as well. What is the best part, Newser.com doesn’t really have a group of reporters, on the contrary, they recruit a group of advanced editors to summarize every piece of news comes from their news partners. When editors concentrate the long articles into one-hundred-words articles, things become earlier to be understood.

 

The tiny news and graphical interface design are exactly what people need in this information over-loaded age.

1. Strive for consistency.

Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.

 

2. Enable frequent users to use shortcuts.

As the frequency of use increases, so do the user’s desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations function keys, hidden commands, and macro facilities are very helpful to an expert user.

 

3 Offer informative feedback.

For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.

 

4. Design dialog to yield closure.

Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.

 

5. Offer simple error handling.

As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.

 

6. Permit easy reversal of actions.

This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.

 

7. Support internal locus of control.

Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.

 

8. Reduce short-term memory load.

The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.