Please click here to view the Project C, Part 02 Concept Visualization
I attached a PDF since there were too many images in my document to upload individually. Th PDF will explain the functionalities of each part in details. Below is the final rough draft. Please refer to the PDF to see the process:
Thesis Statement – Option 01
This research seeks to examine how metaphor can be an effective tool to enhance and improve the process of learning experience for visual learners.
Short Description
Studies have shown using visual metaphors familiar to user’s interests in navigation interface design, can facilitate intuitive understanding of complex concepts and topics for visual learners.
Examining the latest data in online educational platforms, I will argue that the current Learning Management Systems are not conducive to visual learners who have challenged the educators to come up with innovative ways to present class material so that it is more user-centric for eLearning visual students.
This research seeks to examine how using visual metaphors familiar to design students as part of a navigation device, can enhance and facilitate the eLearning experience to meet the needs of online design students.
Action Plan
The visual prototype for this research will be in the form of an interactive educational website in the form of a book that defines the design steps and process through visual metaphors familiar to design students. What make this educational website unique is that it is a ‘ one stop shop ‘ for completing a design task from start to finish, with minimizing the need for the visual learner to leave the website in search of finding resources for the project at hand.
The visual tools needed for each chapter for creative exploration such as interactive color wheel will be incorporated into the interface using HTML 5 and CSS3, while social networking services and brainstorming tools such as Voice Treat and Viemo will be linked to.
For my thesis review, I will use Dreamweaver to create the initial prototype of my design, which can allow the committee and the testers to have some basic interaction with the website before it is fully build.
I will continue with my research on this project, gather new data through usability testing, surveys and troubleshoot any possible issues that may come up in this process.
I will continue to learn HTML5, CSS3 and Adobe Edge further to have a fully working prototype in ITGM 765 in the Fall 2012 for further testing .
Thesis Statement – Option 01
This research seeks to examine how metaphor can be an effective tool to enhance and improve the process of learning experience for visual learners.
Thesis Statement – Option 02
Studies have shown using visual metaphors familiar to user’s interests in navigation interface design, can facilitate intuitive understanding of complex concepts and topics for visual learners.
Examining the latest data in online educational platforms, I will argue that the current Learning Management Systems are not conducive to visual learners who have challenged the educators to come up with innovative ways to present class material so that it is more user-centric for eLearning visual students.
This research seeks to examine how using visual metaphors familiar to design students as part of a navigation device, can enhance and facilitate the eLearning experience through an interactive book, defining design steps and process to meet the needs of online design students.
Thesis Statement
This research seeks to examine how metaphor can be an effective tool to enhance and improve the process of learning experience for visual learners.
Abstract
Studies have shown using visual metaphors familiar to user’s interests in navigation interface design, can facilitate the learning process by intuitive understanding of complex concepts and topics for visual learners. Today, with the introduction of HTML 5 and CSS3, visual metaphors have become part of the new web trends in how users interact online.
However, this new forms of communication hasn’t reached the standard current eLearning Management Systems which continue to rely on the linear and thread based forms of interactivity and communication that in not conductive for visual learner, and don’t provide the needed support for online visual students to engage effectively in the process of creativity, learning and collaboration.
This research seeks to examine how using visual metaphors familiar to design students as part of a navigation device, can enhance and facilitate the eLearning experience through an interactive book, defining design steps and process to meet the needs of online design students.
New Research July 29th
Themes Listening to Teachers
Summery:
A none profit website that includes topics on social, cultural and political that is current and as it is worded on their website is ‘ Worth spreading’.
I am interested in Open Source Education and found this website particularly engaging and interesting as it talks about many current topics such as global warming, none violence and more.
TED: Ideas worth spreading
http://www.ted.com/themes/listening_to_teachers.html
Scorm Cloud
Summery:
An alternative eLearning platform to LMs. The database allows the eLearning educators to put their course content someone on the ” Cloud”, similar to Google Docs and SCORM Cloud lets you deliver it wherever you want, and update the content as needed. You can also use Scorm Cloud with some great apps such as wordPress, Drupal and Google apps. According to eLearning weekly, is also cheaper to use than Blackboard.
http://scorm.com/scorm-solved/scorm-cloud-pricing/
Golan Levin
Golan Levin and Collaborators
Essays and Statements
http://www.flong.com/texts/essays/thesis_proposal/
10- Web Course Design With Topic – Case Driven Methdology | PDF
http://www.mit.jyu.fi/OPE/kurssit/VYO0262/Hiltunen.pdf
Inspirational Readings While Researching
1- Good Video Games and Good Learning | James Paul Gee | PDF
http://www.academiccolab.org/resources/documents/Good_Learning.pdf
2- Open Education | Website
3- A Theory of Computer Semiotics: Semiotic Approaches to Construction and Assessment of Computer Systems | P.B. Anderson | PDF
http://acl.ldc.upenn.edu/J/J92/J92-4011.pdf
4- Macintosh Human Interface Guidelines | PDF
http://interface.free.fr/Archives/Apple_HIGuidelines.pdf
5- Windows 8 Metro UI: A Bold New Face for Windows | Website
http://www.pcworld.com/article/251340/windows_8_metro_ui_a_bold_new_face_for_windows.html
6- Using learning environments as a metaphor for educational change | Martin J, Eppler | PDF
7- Abstract Thoughts? The Body Takes Them Literally | By Natalie Angier | New York Times Article
8- Creating Effective Visual Metaphors | Vicki S. Williams
metaphor: a figure of speech in which an expression is used to refer to something that it does not literally denote in order to suggest a similarity – WolframAlpha
Today’s web navigation often rely on metaphors of page flipping to allow the user move from one section of an application/website to the next. Using visual metaphors in navigation interface design can help the user find information more effectively. Examples of such metaphors are Yahoo Body Map website that maps the site navigation to a human body.
Studies have shown in online educational environments, using visual metaphors familiar to user’s discipline can have a significant positive impact on the learning experience and outcomes, and can facilitate intuitive understanding of complex concepts particularly for visual learners.
Examining the current research and data, I will argue that current eLearning platforms don’t provide the needed support for online visual students to engage effectively in the process of creativity, learning and collaboration. I will further argue that the linear and thread based eLearning educational environments are outdated and not conducive for visual learners who have challenged the educators to come up with new and innovative ways to present class information to eLearning students, so that it is more conducive to the student’s needs as visual learners.
To support my argument, I propose employing a human-centered interface as a more effective method in defining the process of design through visual metaphors and guides to meet the needs of online design students through collaborative design projects on cultural and social topics.
Proposal
Symbols and icons as metaphors are a necessary and integral part of navigation design today. They help the user find information quickly by bridging the gap between the real and the virtual world through translating familiar objects into digital pixels that we can visually relate to. [1]
For example when we see an exclamation mark both in reality and on a web page, we intuitively know that it represents a problem, or when we see a trash can, we know automatically that it is used to discard unwanted items.
In James Paul Gee’s “What Games Have to Teach Us about Learning and Literacy” he highlights the importance of targeting metaphors to a specific user. He argues that creating a language relying on pre-knowledge of the user’s world can create more familiarity and make access to information easier, even for users who have never been to the site before; thus this language allows for a human process to engage the user with technology in the virtual space more intuitively and successfully. [2]
As pointed out by James Paul Gee in ‘Good Video Games and Good Learning’[3] and Martin J. Eppler in ‘ The Image of Insight: The Use of Visual Metaphors in the Communication of Knowledge’ [4], metaphors are used in the physical and the virtual world to help us understand complex ideas through game like interactions and familiar concepts, such as connecting a virtual human body to understanding biology similar to Yahoo Body Map website. [5]
In Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug argues that the first law of usability is creating an interface where the user doesn’t have to think about where they are on a page, and the information is clearly defined. [6] He points out some basic web design rules such as omitting needless words, repetitious navigation buttons, and adding metaphors or as he refers to it ” street signs” and breadcrumbs to guide the user to know where they are on the page and what options are available to them.
New online educational tools have allowed students to study from anywhere and have access to a wealth of information at the click of a button. When students view an education website, they are looking for information; and their mission is to find what they need quickly and easily.
Unfortunately in eLearning platforms today, the role of graphics as navigation device to facilitate the learning process through the concept of familiarity and ‘ street signs’ that Gee, Krug and Eppler have proposed are not followed, and the information architecture for these websites are outdated and not conducive particularly for visual learners. [7]
As stated in Leena Hiltunen’s essay “Web Course Design with Topic-case Driven Methodology”, today we need to change the way the information is presented to student users so that instead of becoming passive ‘ TV viewers’, they could become more involved and active participants in their learning process, not just “translating” books or lectures on a web page format. [8]
Many of the industry standard web-based course-management systems such as Blackboard [9] and eCompanion [10] are designed for traditional academic topic based courses such as history or mathematics, but both are missing the human centered approach in employing familiar metaphors for more effective and facilitated learning process.
On one hand these online 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 interface design flaws that can cause confusion and frustrations specially for visual learners. [11]
Some of these shortcomings are:
1- Thread based and linear interface with repetitious navigation buttons on pages, requiring the user to click multiple times to preform a simple task.
2- Confusing instructions on how to use some of the interface functionalities such as chat rooms.
3- Impersonal discussion boards, allowing participants to interact only through linear threads.
4- Unattractive and cluttered interface with minimal options for customization on important tools such as the calendar or the survey functions.
5- Not compatible with all browsers, and no support for WordPress blogs.
These limitations can make the learning process frustrating and uninspiring and they ultimately have a negative impact on the online visual student’s creative process due to confusing navigation structure and the lack of a cohesive interface for visual users to access the information they need easily and quickly.
This proposal, while not the first to introduce such concepts, will re-examine the role of non-linear metaphors for information access and will argue that human centered visual metaphors specific to each discipline, should be incorporated into the design structure in eLearning websites to ease and improve the learning experience for visual learners in particular.
To support my theory, I will design a human centered interactive website that will implement and define the design process and guides through semiotics to meets the needs of online design students, and enhance, improve and facilitate the eLearning experience through collaborative online design projects.
References
1- Smashing Magazine | Website
2- What video Games have to teach us about learning and literacy | Jmaes Paul Gee | PDF
http://www.yorku.ca/jjenson/geesituated.pdf
3- Good Video Games and Good Learning | James Paul Gee | PDF
http://www.academiccolab.org/resources/documents/Good_Learning.pdf
4- The Image of Insight: The Use of Visual Metaphors in the Communication of Knowledge | Martin J. Eppler | PDF
5- Yahoo Body Map | Website
http://health.yahoo.net/human-body-maps/
6- Don’t Make Me Think: A Common Sense Approach to Web Usability | Steve Krug
7- Learning Styles And e-learning | Essi Kanninen | PDF
http://psychology.wikia.com/wiki/Learning_styles
8- Web Course Design With Topic – Case Driven Methdology | PDF
http://www.mit.jyu.fi/OPE/kurssit/VYO0262/Hiltunen.pdf
9- Blackboard | Website
10- eCompanion | Website
http://www.smc.edu/TechnologyResources/FacultyStaffITHandbook/Pages/eCompanion.aspx 11- Learning Styles And e-learning | Essi Kanninen | PDF
http://psychology.wikia.com/wiki/Learning_styles
10- Web Course Design With Topic – Case Driven Methdology | PDF
http://www.mit.jyu.fi/OPE/kurssit/VYO0262/Hiltunen.pdf
10- Web Course Design With Topic – Case Driven Methdology | PDF
http://www.mit.jyu.fi/OPE/kurssit/VYO0262/Hiltunen.pdf
Inspirational Readings While Researching
1- Good Video Games and Good Learning | James Paul Gee | PDF
http://www.academiccolab.org/resources/documents/Good_Learning.pdf
2- Open Education | Website
3- A Theory of Computer Semiotics: Semiotic Approaches to Construction and Assessment of Computer Systems | P.B. Anderson | PDF
http://acl.ldc.upenn.edu/J/J92/J92-4011.pdf
4- Macintosh Human Interface Guidelines | PDF
http://interface.free.fr/Archives/Apple_HIGuidelines.pdf
5- Windows 8 Metro UI: A Bold New Face for Windows | Website
http://www.pcworld.com/article/251340/windows_8_metro_ui_a_bold_new_face_for_windows.html
6- Using learning environments as a metaphor for educational change | Martin J, Eppler | PDF
7- Abstract Thoughts? The Body Takes Them Literally | By Natalie Angier | New York Times Article
8- Creating Effective Visual Metaphors | Vicki S. Williams
9- Metaphors of_for Language in Popular Culture.pdf | Handout for LING 057
10- The impact of digital technologies on human wellbeing.pdf | Dr Paul Howard Jones
Attached you will find the rough design concepts that I am exploring for this project.I will add more material and rough sketches and process development by the end of the weekend.
For now, I am going to use photoshop for creating my prototype and later I will switch to Dreamweaver to show the basic interactivity. I am planning to learn html 5 and CSS3 during the next few weeks to be able to fully utilize the new online interactive tools more effectively.
Thesis Statement
Today’s visual web navigation often rely on metaphors of page flipping to allow the user move from one section of an application/website to the next. Using visual metaphors in navigation interface design such as mapping a health site to the human body can help the user find information faster and easier.
Studies have shown using visual metaphors familiar to the user’s discipline in online educational environments can have a significant and positive impact on the learning experience and outcomes, particularly for visual learners, and can help facilitate intuitive understanding of complex concepts. I will argue that current eLearning platforms don’t provide the needed support for online visual student learners to engage effectively in the process of creativity, learning and collaboration. I will further argue that the linear and thread based eLearning educational environments are outdated and not conducive for visual learners and based on the current research research need to transform and update.
To support my argument, I propose employing a human-centered design as a more effective alternative in defining the design process more efficiently through visual metaphors and guides to meet the need of online design students through collaborative design projects.
Please click here to download the PDF for revised Thesis Statement and the Proposal.
Action Plan Revised 02
The visual component will be and interactive book geared for beginning eLearning design students to provide 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- To create an interface that is visually comprehensive, efficient and easy to understand and navigate through for beginning eLearning design students, and to enrich the teaching and learning experience for both students and teachers.
3- Promoting online collaboration and teamwork on design projects.
Visual Component
I will research, analyze and test jQuary libraries such as the jQuery sliders and 3D viewers, Spry widgets, Flash AS3 Components, CSS3, and HTML 5 to find the best method to implement my vision to create an interactive human centered website that will meet the needs of the online design students, and enhance, improve and facilitate the eLearning experience through collaborative online design projects.
jQuery timeline slider
3D rotator – ( for displaying the 3D artwork)
http://www.uize.com/examples/3d-rotation-viewer.html?tour=all
Flash AS3 Components – Last Accessed
http://www.adobe.com/devnet/actionscript/samples.html
ITGM 755 : Summer 2012 | Professor Leong
Thesis Statement
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.
Short Description
The visual component for this website will replicate a circular shape similar to a pie chart. Circles as an ancient metaphor have been used in various cultures for thousands of years conveying equality, promoting communication and honoring the collective wisdom. [1]
What makes this website unique is:
1- It’s visual and human centered interface, teaching the beginning design students the specific steps to a design process through guided steps, visual graphics and metaphors to solve a design problem.
2- Promoting online collaboration and teamwork through design projects related to social and cultural awareness and sensibilities.
Action Plan
The chart is broken down into specific steps that the design student needs to take to solve a particular design problem from start to finish. Below are the rough steps as to how I see this website’s interface and functionality developing:
1- Once the design problem is introduced, the online class will be divided into five or six students per group.
2- Based on the selected design problem, the pie chart’s color themes will change to reflect the
topic. For example, the chart color themes for a poster design on using Sustainable Energy resources would reflect a different color palette than a poster designed on Animal Cruelty. This
simple change in color palette based on each project, can add dynamics to the website by keeping it connected to each design project and current. It can also help guide the student visually to know where they are in the design process and become more familiar with the color concepts from a more general perspective.
2- On the initial entry all the pie charts are closed.
3- The first pie chart starts with creative briefs and brain storming session where the design students have to come up with ideas for the project.
4- By clicking on the brainstorming section, the piechart will open circularly, letting students access additional course materials, learning tools and resources such as lectures, exercises, simulations and video tutorials specific to the brainstorming section without having to leave the page. (or the circle as the metaphor)
5- Once the user clicks on one of the links in the brainstorming section such as Instructions, the pie chart dimes out, and the new page will open on the top of the chart, similar to Fancy Box jQuery, again without the user having to leave the initial page. [2]
As part of the online brainstorming process, the users can utilize class groups created on social net working services such as Flickr, Voice Thread [3], and wordpress to communicate, share ideas, inspirations and artistic influences as it relates to their design topic.
6- Once a section of the chart is completed by all groups, the class moves to the next section.
The guided and directed instructions and support for each section can help the beginning design students to fully understand the design process esthetically, creatively and technically.
7- At the end of the project, each group will share and record their final design solutions on VoiceThread and talk about their work and the challenges they faced with the assignment. The audio recording is a crucial part of the process of collaboration as it can greatly help the student to verbally talk about their work, articulate their vision and expand their analytical and communication skills, similar to a traditional classroom critiques. They can also use the same resources to leave each other audio feedbacks.
8- The complete collaboration process and the final outcome will be documented and posted on the website, before moving to the next design project.
Method
I will research and study 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:
2- Enhance and improve the quality of design projects by defining the design process and steps using visual graphics and metaphors for online beginning design students.
3- Through interactive online collaboration process on social and cultural design topics, promote social and cultural awareness, tolerance and cross cultural and racial understanding.
4- Design a human centered interface that is visually comprehensive and easy to understand and navigate for beginning design students.
5- Design an interface that is easy to update and modify by incorporating XML and jQuery libraries.
6- Design an interface that incorporates some of the more dynamic interactive features available online today, such as jQuery libraries, Spry widgets and Flash AS3 Components.[7]
Prototype
For my thesis review, I will use Dreamweaver to create the initial prototype of my design, which can allow the committee and the testers to have some basic interaction with the website before it is fully build. I will also conduct a usability test with my hybrid class design students prior to building the final website to troubleshoot any possible issues that may come up in this process.
References
1- Wisdom metaphore – Website Last Accessed July 21 – 12
http://en.wikipedia.org/wiki/Collective_wisdom
2- Fancy Box – Website – Last Accessed : July 22 – 2012
http://fancybox.net/
3- Voice Thread – Website Last Accessed July 21 – 12
http://voicethread.com/
4- Tiny Circle slider – Website Last Accessed July 21 – 12
http://www.baijs.nl/tinycircleslider/
5- 3D Flipping Circle – Website Last Accessed July 21 – 12
http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
6- 3D rotator – Website Last Accessed July 21 – 12
http://www.uize.com/examples/3d-rotation-viewer.html?tour=all
7- Flash AS3 Components – Last Accessed : July 22 – 2012
http://www.adobe.com/devnet/actionscript/samples.html
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
Hello everyone,
I went back to developing my third pitch. Please take a look and I look forward to your feedback.
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 work between copy, interactive, animation and graphic design artists and programers, each solving a different part of a puzzle for the project.
Unfortunately in the current online education system, the eLearning tools are limited and not conducive for visual artists. Many of the industry standard online educational platforms such as Blackboard and eCompanion are designed for traditional academic topic based courses such as history or mathematics and missing the human centered interface design for easy and intuitive navigation for visual individuals.
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 collaboration educational tools specific for design students, assess their advantages, limitations and discuss how these tools could be improved, so that the online design students can become more evolved in the creative process and team work.
To support my theory, I will design a human centered interactive website for design students, and will work with developers and programers to incorporate, customize and enhance some of the available online educational tools such as ‘chat room’ that allows the students to collaborate on creative projects online more intuitively and naturally.
Research
There are many tools in the education field that are currently used for eLearning education.
The web-based course-management systems such as blackboard [2] and eCompanion [3] have allowed the students and the educators to communicate, share files, resources and information. Online forums, discussion boards and chat rooms have created opportunities for students and faculty to post information, view each other’s work and learn through the exposure to different perspectives; thus providing more creative freedom in the process of online teaching, learning and exploration.
However, there are limitations and flaws with the visual and interactive components of the standard educational course-management systems such as Blackboard and eCompanion.
As an online & hybrid multimedia instructor and an online student, I have experienced these shortcomings from both angles.I have also received similar feedbacks from both my colleagues and peers about the same challenges in using these systems. Some the the common complaints about both Blackboard and eCompanion are:
1- Linear and cluttered interface design, requiring the user to click multiple times to perform a simple task.
2- repetitive navigation on the page, adding additional confusion for the user.
3- Not supported by all browsers such as Safari.
4- To view Flash videos and Quicktime movies, the databases for eCompanion and the latest version of blackboard has to be modified with additional programer & developer code.
5- No support for WordPress.
6- Linear communication format in ‘discussion rooms’ where students and faculty have to type their questions or comments in vertical text fields.
7- Linear communication format in ‘chat rooms’ where students and faculty have to type their questions or comments, which can be manageable in a smaller class. But this option is unusable in larger class virtual classes due to the number of students and the amount of typing, reading, responding and lag time.
These limitations can make the learning process frustrating and uninspiring, and ultimately have a negative impact on the creative process due to the lack of the visual components in the interface that designers can understand.
Because of these limitations, Flicker, Vimeo and Utube as third party web tools have become viable resource for educators and students who use these services for class projects to upload comps, photo libraries, projects and movies and fill the missing gaps.
This lack has also provided a fertile ground for many newer and more dynamic online educational support tools to enter the market. For example Wall Wishers [4] allows the user to create a virtual wall where the user can post notes, add links to websites, insert images, music, audio podcasts and even videos to brainstorm ideas, discuss a topic or simply share information with the visitors. But the space and communicated is done in the traditional and linear fashion. The interface is un-intuitive and confusing to navigate. The result is a wall that looks very cluttered and the information is hard to find.
Photopeach [5] is another new educational tool that allows the user to upload pictures, add audio and effects to create a web-based slideshow. The finished slideshow can then be shared and/or embedded within a variety of sites (including Facebook, blogs, personal websites). In addition to displaying slideshows of photos, the tool can also be used to develop quizzes without requiring the user to know about programming a slideshow or quiz. But again, the program falls short in creating a dynamic and user friendly interface that can engage the viewer and help them access information quickly and easily.
Dabbleboard [6], Moodle [7] and desire2 learn [8] or other educational websites that allow for the user to interact and put up videos and notes, but again all three use a linear navigation system that is confusing for visual users.
The most innovative educational tool today is Voice Thread [9], which is a multimedia, interactive, collaborative online tool for educators and students. This new technology allows the participant to create virtual study groups, use video, text, and audio to record their comments and use markers to highlight, doodle or leave comments for individual or on group projects instantaneously. Similar to a classroom environment, the instructor can moderate the flow of the information and the interactive virtual groups. However, Voice Tread is also limited as the user can not display and talk about an artwork simultaneously, and the video functionality is not supported on Safari.
As I continue my research on the new and innovative online educational technology tools and
gather information, I will conduct surveys from both the students and the faculty as to the what they see missing in using the available tools, and how they like to see the process of online collaboration improved.
My goal is to design a costumed human centered interface structure for online design students to enhance and improve the quality of design projects through interactive collaboration process, utilizing and customizing some of the available educational online technology tools.
Method
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 none linear human centered interface customized for collaboration work among design students in the shape of a circle. Circles as an ancient metaphor have been used in various cultures for thousands of years conveying equality, communication and honoring the collective wisdom. [10]
This website will replicate a a circular shape similar to a pie chart, and each chart will have a design problem listed in a specific order of relevant to the design project from start to finish.
The chart is broken down into steps that the design students need to take to solve the specific design problem. For example the first pie chart will start with brain storming sessions where the users have to come up with creative ideas for the project.
The users would brainstorm and communicate their concepts in a virtual space which unlike the current linear formats, will be presented similar to a round table promoting communication and equality. Each participant can pick a specific color tag, photo or a webcam video for visual identity. In this virtual space, the students can communicate interactively using their voice ( similar to the technology being used in Voice Tread) , and talk about and show their project development and process simultaneously which is not supported by VoiceTread doesn’t at this time. There will be lectures, exercises and video instructions in each section to help the students in both the creative and technical process, and to complete each step of the pie before moving to the next part as a group.
What makes this website unique is to combine an intuitive and human centered interface that the designers can understand with some of the online educational support tools to fill the current gaps in the creative and technological process.
I will collaborate with developers and programers for incorporating audio and live video and file sharing functionality options in the round table chat room and discussion boards.
This interactive collaboration process can add dynamic and bring clarity to the creative and brain storming process and enrich the teaching and learning experience.
References
1- Creative Collaberatoin Quote : Accessed July 16, 2012
www.generation-europe.eu/forum/glossary/
2- Blackboard : Accessed Daily
3- eCompanion : Accessed Daily
http://www.smc.edu/TechnologyResources/FacultyStaffITHandbook/Pages/eCompanion.aspx
4- Wall Wishers : Last Accessed July 17, 2012
5- Photo Peach : Last Accessed July 16, 2012
6- Dabble Board : Last Accessed July 19, 2012
http://www.dabbleboard.com/tour
7- Moodle : Last Accessed July 19, 2012
8- Desire2Learn : Accessed July 19, 2012
http://www.desire2learn.com/markets/higher-education/
9- Voice Thread : Accessed July 19, 2012
10- Collective Wisdom : Accessed July 19, 2012
http://en.wikipedia.org/wiki/Collective_wisdom