THESIS STATEMENT ( revised )
The role of graphics as a navigation device in information structures in an interactive application can affect how the user can access information faster and easier. I will design a human centered interactive website costumed for online beginning design students that will implement and define the design process and guides, through visual graphics and metaphors for online collaboration on social and cultural design solutions.
Introduction
By default, the 21st century intersection of various media resources has made design a cross disciplinary medium. In order to create ground breaking projects, one needs to be able to collaborate with individuals who can bring different talents to the table. For example, a website project is a collaborative teamwork between copy, interactive, animation, graphic designers and programers; each solving a different part of the puzzle for the project.
In this proposal, I will analyze how simple problems with interface design and interactive components of the available online educational tools can cause confusion particularly for design students who are typically visual learners.
I will investigate the available online collaborative educational tools, assess their advantages and limitations, and discuss how they could be improved so that the online design students can become more engaged in the creative and collaborative process.
To support my theory, I will design a human centered interactive website costumed for online beginning design students that will implement and define the design process and guides them through using visual graphics and metaphors for online collaboration on social and cultural design solutions.
Research
Creative Collaboration is a process through which a team can generate highly innovative ideas with excellent buy-in from the members of the creative team. [1]
Typically the physical collaborative design process starts with brainstorming through sharing visual and artistic inspirations, references, sketching and round table discussions and finally defining the project before moving to the next step in the design process.Based on my experience as an educator for over six years, discussions with colleagues and conducting surveys, in a physical classroom, design student’s participation in brainstorming and discussion process dramatically increases when the communication is taken place in a round table format.
Unlike the linear traditional classroom structure, the circular gathering allows the participants to sit in the same level and see each other at all times, promoting a sense of balance and equality. This simple sitting modification can help student’s confidence to engage more effectively in the creative process and build communication and teamwork skills. [1]
Unfortunately, today the current online tools for learning and brainstorming are limited and not conducive for visual artists. Many of the industry standard web-based course-management systems such as Blackboard [2] and eCompanion [3] are designed for traditional academic topic based courses such as history or mathematics, and both are missing the human centered interface for easy and intuitive navigation and communication for visual students.
On one hand these tools have provided great opportunities for both students and educators to communicate, share files, resources and information, and conduct conversations using online forums and discussion boards. On the other hand there are limitations and significant design flaws with the interface and the interactive components of these standard educational databases such as:
1- Unintuitive and linear interface design which is difficult to navigate specially for visual users.
2- Repetitious navigation buttons on the page, adding confusion for the user.
3- Linear navigation design, requiring the user to click multiple times to preform a simple task.
4- Impersonal discussion boards, allowing participation interact only through linear threads.
5- Unattractive and cluttered interface with minimal options for customization.
6- Not compatible with all browsers.
7- No support for WordPress blogs.
7- Flash Videos and Quicktime movies are only supported with additional developer’s code modification.
These limitations can make the learning process frustrating and uninspiring, and ultimately have a negative impact on the online design student’s creative process due to confusing navigation structure and the lack of a cohesive interface for visual users.
Fortunately, there are many complementary online resources that cover general design topics, new trends and techniques that are relatively easy to navigate through and find information on. For example Smashing Magazine [4] offers tutorials, new trends in technology and a variety of design techniques. Net Tuts [5] and Web Design tuts [6] are two other great resources that cover design tips and tricks both for web and graphic designers.
All these resources are invaluable for creative users already with a design background, but not necessarily useful for beginning design student who needs an understanding of the design foundation and the process first before trying to learn techniques. Layer Magazine [7], Adobe TV [8] and Abduzeedo [9] also provide step by step self contained and isolated video tutorials on the technical steps of learning different design programs and ‘ HOW TO’ techniques for any given design topic. Again, as great as all these resources are, techniques no matter how mind blowing, need to be relevant to a project, communicate a massage and serve a bigger purpose; otherwise they are quickly forgotten. In addition, none of these websites provide problem solving techniques on collaborative teamwork and guide the beginning online design student from one step to next to fully understand and engage in the interdependence circle of design process.
As I continue my research on the new and innovative online educational technology tools and collect information, I will continue to conduct surveys from both design students and the faculty and gather their input in terms of what they like to see added or changed in an interactive website exclusively geared for beginning online design students, and how they envision the process of online collaboration improving.
Goal
The goal of this project is to design a human centered interactive website costume designed for beginning online design students to achieve the following:
1- Enhance and improve the quality of design projects by defining the design process and steps, using visual graphics and metaphors geared for beginning online design students.
2- Through interactive collaboration projects on social and cultural design topics, promote social and cultural awareness and cross cultural understanding.
Method
Circles as an ancient metaphor have been used in various cultures for thousands of years conveying equality, communication and honoring the collective wisdom. [9]
This website will replicate a circular shape similar to a pie chart. The chart is broken down into steps that the design student needs to take to solve a design problem from start to finish. For example, the first pie chart starts with brain storming session where the design students have to come up with creative ideas for an assigned social or cultural topic, such as designing a poster on using ‘ Sustainable Energy’.
By clicking on the brainstorming chart, the section will open circularly and the students can have access to additional learning tools such as lectures, exercises and video tutorial specific to that brainstorming section without leaving the page (or the table as the metaphor). The guided and directed instructions and support for each section can help beginning design students to fully understand the design process esthetically, creatively and technically.
As part of the online brainstorming process, the students will utilize some of the available educational and social net working services such as Blackboard, Adobe Connect, Flickr, Voice thread [10], and wordpress to communicate, share ideas, inspirations and artistic influences as it relates to each section of the pie chart (the circle). Similar to an on ground design group project, the class will be divided into five or six students per group. Once a section is completed by all groups, the class moves to the next section of the pie chart till the project is completed within it’s assigned deadline.
What makes this website unique is:
1- It’s visual and human centered interface that teaches beginning design students the specific steps to a design process and guides using visual graphics and metaphors.
2- Promoting online collaboration and teamwork on design topics related to social and cultural awareness and sensibilities.
I will research, analyze and test jQuary libraries, Flash AS3 Components, CSS3, and HTML 5 to find the best solution to implement my vision and achieve the following goals:
1- To create an interface that is visually comprehensive and easy to understand and navigate for beginning design students.
2- An interface that is easy to update.
3- An interface that incorporates some of the dynamic interactive features available online today, such as Tiny Circle slider [11], 3D Flipping Circle [12], and 3D rotator [13] and Flash AS3 Components. [14]
This interactive collaboration process can add dynamic and bring clarity to the creative process and enrich the teaching and learning experience for both students and teachers.
References
1- Learning Styles – Website Accessed July 21- 12
http://www.umassonlineblog.com/2009/07/29/sitting-in-rows-or-in-a-circle/
http://www.coker.edu/round-table-learning.html
http://www.gp-training.net/training/educational_theory/reflective_learning/learning_styles/styles.htm
2- Blackboard -Website Last Accessed July 21- 12
http://www.blackboard.com/
3- eCompanion – Website Last Accessed July 21- 12
http://www.smc.edu/TechnologyResources/FacultyStaffITHandbook/Pages/eCompanion.aspx
4- Smashing Magazine – Website Last Accessed July 21- 12
http://www.smashingmagazine.com/
5- Net Tuts – Website Last Accessed July 21- 12
http://net.tutsplus.com/
6- Web Design Tuts – Website Last Accessed July 21- 12
http://webdesign.tutsplus.com/
7- Layer Magazine – Website Last Accessed July 21- 12
http://layersmagazine.com/
8- Adobe TV – Website Last Accessed July 21- 12
http://tv.adobe.com/
9- Abduzeedo – Website Last Accessed July 21- 12
http://abduzeedo.com/
10- Wisdom metaphore – Website Last Accessed July 21- 12
http://en.wikipedia.org/wiki/Collective_wisdom
11- Voice Thread – Website Last Accessed July 21- 12
http://voicethread.com/
12- Tiny Circle slider – Website Last Accessed July 21- 12
http://www.baijs.nl/tinycircleslider/
13- 3D Flipping Circle – Website Last Accessed July 21- 12
http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
14- 3D rotator – Website Last Accessed July 21- 12
http://www.uize.com/examples/3d-rotation-viewer.html?tour=all
15- Flash AS3 Components – Last Accessed : Sun, Jul – 2012
http://www.adobe.com/devnet/actionscript/samples.html