Wireframes version 1

Very rough version, just for presenting my basic idea.

Download the clickable wireframes

Examples of interactions

Example for the first part of my project, allowing users to rearranging and exploring by dragging and clicking:

 http://karencollinsphoto.com/

(I will have a different interface but similar interactions)


The second part, a collage for navigating the photos and videos I did about the tour to a facility or interviews of experts :

http://www.charity-partners.com/
http://www.nowwhatargentina.org/
http://www.bing.com

(I will have the similar idea of interactions, but a cleaner and simpler look is preferred)

Usability research

Usability Research

The target user of my project will be the main stream people that are experienced with computer and the Internet, especially students, teachers, office workers, managers, and etc. Therefore, designing the suitable interface and interactions becomes one of the essential parts of my project. I need to respect their experience or mental model, but also give them some enjoyment and refreshment for better learning the information I am trying to give out.

Being proactive on usability testing

In the field of human-computer interface, goal-directed or user-centered are always the heart of the design.

Goal-directed means “the design target depends on the context – who the users are, what they are doing, and what goals they have” (Cooper, P16). The goal-directed concept helps to make the design more effective and user-friendly.

On the other hand, I also learned the concept of “User-centered design” and “Service user experience” from Saarilouma’s book “Future interaction design 2.” A successful user-centered design framework for an interactive application is established from the research of users’ need, interests of stakeholders, and user involvement or even co-creation (Saarilouma P135).

These give me the idea of being considerate and being proactive. I am planning to spend more time on usability research: inviting some potential users to tell their expectation and give feedback to the wireframes. Moreover, usability and interaction tests should be conducted on from the beginning to the end of the project if possible.

Building digital artifacts

In her book, Saarilouma repeatedly talks about building the linkage between physical artifacts (functions or actions that existed in our lives) and specific digital artifacts - the virtual theorized things in digital world (Saarilouma, P186).

This kind of interaction is “Direct manipulation” in another book I read – “Designing the user interface” by Ben Shneiderman and Catherine Plaisant. The key of this interaction is that, creating the visual representation of actions and objects that users are familiar. “By pointing at visual representations of objects and actions, users can carry out tasks rapidly and can observer the results immediately” (Shneiderman and Plaisant, P66).

Regarding to my project, I plan to build a interface that looks like the trash can with some recyclable waste and non-recyclable waste, users are supposed to find out which items are recyclable (by clicking and dragging) and then click on it for further details, and then go back to explore again. So I need to careful about the appearance and actions. Therefore, the interactions should feel like the real physical movement, while the interface shouldn’t be too “real” because not too many people want to play around with a messy ugly trash bin. This could be the challenge for that.

Saarilouma believes, “The best artifacts are those that have evolved, been extensively used, and adapted.” That means more observations and more usability tests are required in my project to me.

Other elements in interaction designs

Building the directly manipulated digital artifact helps the application become easy to learn, easy to use, and all the interactions can be easily understand and performed with physical movement. However, this does not guarantee its success. “Poor design, slow implementation, and inadequate functionality” are what to be care of (Shneiderman and Plaisant, P218).

Therefore, I should refine every important issue in my interaction designs. For example, appropriate virtual representations and physical actions, easy reversibility, instant visibility and feedback.

In addition, varies of coordinate media can be helpful for better user experience. Demonstrative visual elements like meaningful graphic display and “combutcons.” Also, auditive interaction or instruction can also make the user feel more natural and satisfying (Saarilouma P134).

Function versus fashion

How can I make the balance of functionality and simplicity (more simple but effective design)? “Less is more” is what I believe in visual designing, even more than that, using “you” form to guide the novice user, offering constructive guidance, employing suitable phrasing, and avoiding too much terminology or abbreviation are what I should be aware of (Shneiderman and Plaisant, P470). It should be applied not only in my interaction design, but also in the text content, because they goal of my project is giving user the information via my designs and interactions in an enjoyable way.

In the display design, keeping everything organized is essential. White space, indentation, alignment, columnar formats, field labels, and even the use of colors are the keys to success (Shneiderman and Plaisant, P470).

References:

Cooper, Alan. (2007). About face: the essentials of interaction design 3. Indianapolis, IN: Wiley publishing, Inc.

Saariluoma, Pertti & Isomaki, Hannakaisa. (2009). Future interaction design 2.London: Springer-Verlag Press. 

Shneiderman, Ben & Plaisant, Catherine. (2010). Designing the user interface:strategies for effective human-computer interaction. Boston, MA: Addison Wesley Press.

Click here to download the DOC file

Thesis proposal

Objective
I specialized in Interactive Design during my Digital Media study, and I am amazed in the simply and beautifully designed websites or web application. Moreover, the most useful knowledge and techniques I have learned in my master program is ActionScript programming, usability design, storytelling, typography, digital photo and video production, and sound design.

Therefore, I plan to apply all the knowledge in the above fields and develop an interactive application, delivering the key concepts and first-hand materials of waste recycling for the environment.


Goal
I plan to work on this project because recycling recyclable waste becomes more and more important as the eco-system is being damaged and more nature disasters attacked. However, most of the people still need to be persuaded or educated about the significance of recycling. My project will focus on helping people know more about waste recycling, and trying to convince them think more and do more on waste recycling.

There will be two main parts on separated pages on this project. The first part will be “Finding recyclable items in a trash bin.” It will be a trash-bin-look interface with some clickable items (e.g. cans, paper, bottles, etc.) and users can discover the information and facts about that each item by clicking and dragging (e.g. how is it recycled, why is it important, what happens after it is recycle, etc.)

During this project, I plan to interview a non-profit organization called “MassRecycle” and an electronics recycling facility. The second part will be a page with photos and videos of that (e.g. recycling process, a visit to a recycling facility, interviews, etc), while I also plan to present the contents with the consideration of interactivity and usability.

Most of the people don’t like just reading text and pictures on web pages, I believe an interactive media especially in the first part will be more suitable for letting people play around with it and then learn more. Moreover, the first-hand photos and videos in the second part would be attractive too.


Target Users
The mainstream of people could be the target users of my project, and I want it reach as more people as possible. However, the main target will be those have experience and access to the Internet, because this is a Web-based interactive application.


Evaluation
I plan to invite some potential users to test the usability and finish a questionnaire on that. I will evaluate the project success if they feel they have learned something on it, and also feel comfortable with the interactivity.


Deliverables
My final deliverable will be an interactive application which guides users through the key concepts of recycling, and provides them chances to experience the recycling process and facility.
Furthermore, I will produce a short documentary video for “MassRecycle” and probably persuade them putting my interactive project on their website.




Schedule
Date (week) Task
4/17 Do more research on similar design; create functional diagrams and basic wireframes;
4/24 Revise usability and interactions of wireframes; begin shooting photos for the “trash bin” interface in part one
5/1 Begin working on basic graphics and designs; begin working on basic ActionScript coding
5/8 Keep working on ActionScript coding; visit the electronics recycling facility in Worcester, do some interviews, and record these in photos and videos
5/15 Keep working on the videos of last week; begin creating text content; keep working on ActionScript coding
5/29 Finish the first version prototype for testing and revision
6/5 Obtain feedbacks and recommendations on the first version and begin revising
6/12 Finish second version prototype with functional features
6/19 Further revisions and finishing touches
6/30 Summit final work


Download DOC file