I found some layout of settings on Wii. They are good reference for Free Your Hand website and help me decide what kind of background color is suitable on TV. It seems like black, gray, and dark blue are proper background color on TV.
The new layout of the "Free Your Hand" website:
(Layer one)
(Layer One when selecting) There is preview of each category when using Up and Down to select.
(Layer Two- news index page) I put "Next Page" button on the top so that users can jump to the next page quickly instead of stepping all over the items.
(Layer Three- news content)
I was working on the look and feel of the "FREE YOUR HAND" website this week. I want it looks modern. Besides, in order to make it matches to browse on TV, the layout of TV on demand become my reference.
Here are some designs of current TV on demand. The navigation of them are almost like one dimension movement(up and down), two the most.
- One dimension (Up and Down):
- Two dimensions:
User Profile:
Alan, 29 year-old, from Taiwan, is a new ITP student and new in NY City.
He was a software engineer before he quitted his job from a Telecom network company in Taiwan.
He is an Internet addict. He particularly likes browsing online Taiwan local News since all his family is there. Besides, he likes to visit the Taiwanese biggest wedding online forum because he's going to fly back to Taiwan and get married in the end of this semester. He almost does his free browsing at lunch or dinner time. It is probably the only break time he can get rid of all the school assignment of tight scheduled classes.
Scenario:
One Friday evening at 6 PM, Alan just finished a part of his ICM coding assignment. He decides to take a break and order a Papa Johns Pizza and buffalo chicken wings for delivery for today's dinner. After finishing the online order, he begins to check online Taiwan local news from Yahoo! Taiwan News.
He saw the news that there is a Typhoon closing to Taipei; Alan wants to call his family later since it is 6:12 AM in Taipei and it’s too early to give them a call. He continues browsing the news.
At 6:28, the door bell rings, pizza is delivered. Alan comes back at the desk with his dinner.
He switches the mode of web pages to the "Free Your Hand mode" and plugs the USB "Free Your Hand pad". He eats pizza with his hands and continues staring at the laptop screen. He doesn't need to use the oily hands to control his mouse anymore.
With the "Free Your Hands pad", Alan steps “Up” and “Down” to make the pad cursor scrolling up and down on the news index page, which there are all titles of news. When he sees some interesting title, he just steps “Right” and enters to read the news content. When he finishes reading the news, he steps “Left” to return to the news index page.
With the “Free Your Hands mode”, the structure of the news channel becomes only one dimension. Alan sees only the index of news main categories, such as politics, entertainment, and sports. Alan steps “Down” and scrolls down to Sports and then steps “Right” to enter it. Then, he sees the index of sub categories of Sports news, such as Baseball, Basketball, and Swimming. He steps “Down” and scrolls down to Baseball and then steps “Right” to enter it. Now, Alan sees today’s all titles of baseball news. He chooses the first one and enters to read the news. After reading it, he steps “Left” and be back to the title index. Alan keeps browsing the news and enjoys the delicious pizza and buffalo chicken wings at the same time.
Wireframe of "Free Your Hand Mode" of Yahoo! Taiwan News
Flow chart of "Free Your Hand Mode" on Yahoo! Taiwan News
Goals
My goal is to build a website where the user interface is able to let users browse without mouse. I want to minimize the constrains people encounter and broaden the means people use when browsing Internet.
Rationale
I am a girl who loves technology and cosmetics. I always wear sun screen if going outdoors. So I need to use cleansing oil to remove the sun screen after coming back home. Yahoo! Taiwan News is my best friend in New York. I always receive my hometown news from it. Papa Johns' pizza and chicken wings are also my best friends in New York. When I use cleansing oil to remove the sun screen on my face or eating Buffalo chicken wings, I still keep browsing news online. However, I have to be very careful not to touch my mouse or touch panel with the oily fingers. I usually twisted my fingers with difficult and uncomfortable gestures to move the mouse cursor onto the right position to make the right action I wanted. Therefore, there has been a thought in my mind for a long time, which is "Is there any browser or website or any other tool that can make me enjoying Internet and Buffalo wings at the same time?"
In addition to my experience of beauty oil and the chicken wings, my father's online experience is one of the reasons I want to build "mouse-free" interface on website. My father is 65-year-old. He usually complained to me and my younger brothers that the text size of websites is too small before we helped him magnify the size from IE browser. However, the design of webpages is out of order. He has to tolerate the formless webpages. My father's experience reminds me that the web designers usually forget some groups of audience, such as elders, kids, or the disabled.
Audience
My audience or target users will be general web users. I do not think there is a limitation of users for my project. I am an Internet heavy user, I won't say the current designs of websites are all suitable for all conditions. My father is not an Internet sticker; he encountered some problems when he tried to use this 20th century technology. So, I think my target users are general Internet users, who are not afraid to see and use new, fresh things.
Core features and functionality
The core feature of "free your mouse" project will be as follows:
1) Use foot instead of hand
2) Website structure will be simplized to one layer on one page
3) Interface will be easy to be navigate for foot or other devices and controllers
What I plan to build
I plan to build a simple website with the new interface and structures which is suitable for not only mouse but also other controllers. In addition, I will use dance pad to replace mouse to be the controller.
Intended effect
I hope this concept could bring some new thoughts or impacts for current web designers and web owners. Also, Internet users could realize that they have the right to have better browsing experience.
Future plans and visuals
I look forward to bringing the "Free your mouse" concept to mobile phones and TVs. Mobile phones have much smaller screens than regular PCs. Besides, the interface of mobile phones themselves do not have "mouse". Thus, the web designs for mobile phones should be very different. The situation of TVs is the same; the interface of TV controllers does not have mouse or joystick. I consider the concept of "Free your hands" project can be a solution for mobile phones and TVs in the future.
I came up with the name of my project when writing the project description. "Free Your Mouse!!" sounds like a good title of the project. It's exactly what this project intends to do. I guess I'll use this title unless there is going to be another better one coming to my mind.
My husband is a telnet BBS (Bulletin Board System) fan. He almost visits the biggest Taiwanese telnet BBS – PTT – everyday. It reminds me that telnet BBS is a weird system that doesn’t allow using mouse. It only uses keyboard. If you only need browsing the articles or posts, actually you only need four keys, “Up”, “Down”, “Left” and “Right”. Using “Up” and “Down”, you can select which item you want to enter. Using “Right” to replace “Enter” and “Left” represents “Return”. I made a table to make it easier to understand.
I consider this concept is perfect to my project since it is not only get rid of mouse but also simplize the flow of content structure. I guess I found a perfect related work for my project.
Here are the screenshots of telnet BBS:
The disadvantage of telnet BBS is that it can't be embedded images. However, some people still can do interesting drawing pixel by pixel on telnet BBS.
I am struggling to consolidate the project ideas this week. Since my idea before was too broad to find further real useful related works, I try to narrow it down to a more specific concept. I believe it will help me have clearer direction to keep conducting the related work hunting.
I'm interesting in Web UI because my background before ITP was associate production in Yahoo! Taiwan. When I was in Yahoo! Taiwan, there was no department or team for doing UI design or interaction design. One of my main tasks was deciding how users interact with the channel and what the channel looks like. Although I mostly needed to follow the templates from headquarter in the US, I still got much fun from thinking how to change the current design to please my local users. Thus, the experience in Yahoo! Taiwan makes me love considering users' insight and Web interaction design.
After getting into ITP, I become heavy Internet user in my life. I do not have TV in New York so that I reply on Internet to read news. I like to browse Web news when I get home and need to use cleansing oil to remove the makeup. However, I always wish I could have the third hand to use the mouse to browse Web news when both of my hands are with oil and have to massage my face. One question comes up to my mind, "Could I browse Internet without my hands?"
I my second and third semester in ITP, I took the classes "Design for Constrains" taught by Amit Pitaru and "Toy Design" taught by Daniel Rozin. I began to think about the design of websites for the disabled and children. I am not disabled but I AM LIKE a disabled without hands when I use hands to remove makeup. My father always complained that the texts are too small on websites. He almost gets online everyday to read Yahoo! Taiwan News and checks emails from friends. He asked me how to magnify the text size so that he could read emails and the online news. The design is out of order after I helped him magnify the text to the largest through IE. I wonder if Microsoft considers users' need of text size, why Yahoo! does not? My father is not blind but he IS LIKE a blind if he cannot see clearly the web content for the text size.
I always think Internet brings people more convenience, more information and more communication. I would love to improve its current design and break the current rules to let more people have better experience when browsing Internet.
My thesis focuses on creating new better user interface, especially the user interface for websites, to make people have other means to interact easier in the Internet world. People are used to the UI on current websites. However, is the current UI the best way to browse Internet? I believe there are always other means or user interfaces which are much closer to people’s intuition or interaction in the real world. For example, 3D pictures which apply to online shopping or art gallery online display make user feel like seeing the products or art work in the real store, gallery or museum.
Current user interface of websites are reply on mouse to browse. Mouse cursor is small; the UI for mouse cursor is too small for finger when user uses PC with touch-sensed screen and needs to use finger to control computer and browse Internet without using mouse, mouse panel and keyboard. Besides, the Web text and UI usually are too small for elder and children as well.
Furthermore, current user interface on websites are not considered people who are not convenient or mature to use their hands to control mouse, such as elders, children and people whose hands are disabled or injured. If my hand got injury, I guess it is pretty hard using Wii Feet to replace mouse to control current Web user interface and browse online news.
To sum up, I believe that there are should be more ways and interesting UI to browse Internet and I look forward to creating a new one to broaden and fresh people’s Internet browsing experience and help the people who have been limited by current website UI to participate Internet activities.
DON'T CLICK IT offers a new way to browse Internet - users don't have to click the mouse to execute the buttoms.
A Japanese guy used Wii balance board as controller to browse google maps's street view so that users can feel like walking on the real street. Using Wii balance board to browse Google street view is more intuitive than using mouse on the desk.
John Maeda is the pioneer in computer graphical arts. He loves drawing and combines his interest with the technical skills learning from MIT. His devotion to the new forms of arts inspires encourages me to devote myself to the new forms of browsing Internet.