+ All Categories
Home > Documents > web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu...

web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu...

Date post: 15-May-2018
Category:
Upload: ngohanh
View: 212 times
Download: 0 times
Share this document with a friend
16
(We)cord Chris B., Christina G., Cindy T. Introduction (We)cord: Their Story Is Our Story. In our needfinding, we found that students often lack engagement in history classes and are often only exposed to a single viewpoint when learning about the past. Our product aims to engage students by allowing them to share stories with each other about their own family histories, and read those of their friends’, and to allow students to compare accounts by giving them easy access to a myriad of diverse primary sources of different time periods and areas. We hope that students will be more engaged in history and current events if they learn about history through a human perspective, and from their own peers. Sketches In our design phase, we experimented with a series of overlays, structures, and ways of providing fundamental information to the user. Overview of 10-20 sketches Design 1: In this series of screens, we experimented with two primary potential features: discovery of content by Newsfeed, and discovery of content by exploration of a map and the implementation of a search feature. Figure 1. Figure 2.
Transcript
Page 1: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

(We)cord Chris B., Christina G., Cindy T.

Introduction (We)cord: Their Story Is Our Story.In our needfinding, we found that students often lack engagement in history classes and are often only exposed to a single viewpoint when learning about the past. Our product aims to engage students by allowing them to share stories with each other about their own family histories, and read those of their friends’, and to allow students to compare accounts by giving them easy access to a myriad of diverse primary sources of different time periods and areas. We hope that students will be more engaged in history and current events if they learn about history through a human perspective, and from their own peers.

SketchesIn our design phase, we experimented with a series of overlays, structures, and ways of providing fundamental information to the user.

Overview of 10-20 sketches

Design 1: In this series of screens, we experimented with two primary potential features: discovery of content by Newsfeed, and discovery of content by exploration of a map and the implementation of a search feature.

Figure 1. Figure 2.

Design 2: With this series of sketches, we focused on designing an intuitive way to upload personal stories, and explore the stories of your classmates. Content discovery would be based on what your class likes.

Page 2: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Design 3: In this design, we primarily focused on location-based discovery of content, both within the app and in real life. As the user navigates the world, the app displays information about historical events within that world, captivating the imagination.

Figure 3.

Design 4: In this design, we based information discovery as a timeline. The user would be able to select a single point in space, and “walk it through time,” seeing all of the primary sources/classmate experiences in a given location.

Design 5: We were creative in this AR/VR design, which used augmented reality to display the history of specific elements of history as an individual walked by, and then could guide them to discover more.

Design 6: This design was focused on map-based discovery of resource groups of sources, rather than individual stories. It also relied heavily on the usage of the classroom/time period as means of information discovery.

Page 3: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Selected Interface Design

Top Design #1

Top Design # 2

Selected Interface Design (Storyboards for 3 tasks + reasoning for selection (pros/cons)

Our top two designs were chosen for similar practical reasons: They both place content discovery front and center, and would be more likely to “accidentally engage” students by dynamically providing them with more information. Our top design #1 was chosen primarily for the use of the “newsfeed feature,” which contains information from a variety of sources, including primary sources, classroom stories, and teacher-curated content. As the students scroll through the newsfeed, they can contribute to discussions, post insights, and generally make historical connections that they would not have thought of otherwise. Design #1 also features an intuitive navigation bar at the top of the screen for switching between the four primary screens of the app: Newsfeed, Map, Search, and Classroom. Design #2 features similar screens to all but the newsfeed, and more prominently features the upload screen. By contrast, rather than a newsfeed, Design #2 has an exploration path that leads the user down trails of continuously related primary sources. Ultimately, we decided to prototype a hybrid of the two designs, using the foundation of Design #1 and incorporating features from Design #2.

Page 4: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Pros/ Cons (Design 1)

Pros : ● Newsfeed to display information is front and center● Classroom mode designed to focus on relationships between students/teachers● Discovery and exploration are a significant theme in each screen● Easy, intuitive navigation with top bar menu ● Simple, yet powerful search menu ● Intuitive upload page

Cons: ● Must navigate to map● Upload feature is not immediately apparent/easy to find● Changing the time/era of the map is unintuitive

Pros/Cons (Design 2)

Pros: ● Map is front and center● Better Map than part 1 (color coded for student perspectives, easily navigate through

time, etc)● Discovery feature from one primary source to the next makes finding diverse

perspectives intuitive and engaging● Sliding menu accessible from anywhere makes navigation to main screens fast and

simpleCons:

● Students not invited to discover content ● Navigation is unintuitive ● Information on the map is more difficult to read

Task Storyboarding

Functionality: Task #1 : Engage directly with history by reading primary sources.

Page 5: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

This is an incredibly fundamental task to our application, as a majority of the content the user consumes will come from primary sources. Consequently, we wanted to make it fundamentally simple for users to access them. When the user first opens the app, they are greeted by a newsfeed, that features many primary sources about different topics. Clicking on any one will take the user to a primary source viewing page. Similarly, clicking on any point within the visualized map, or opening up “Classroom” and selecting teacher and user picks will also open up primary sources. From there, users can browse, compare, and discover even more primary sources.

Functionality: Task #2: Share historical and personal accounts with your community

Page 6: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Within the newsfeed, we made the design choice to prominently color-code all user-generated stories and then integrate them into the newsfeed/map features. Consequently, discovering user stories is simple, and parallels discovering primary sources. In order to upload a story, the user navigates to the map, then selects the “+” icon in the corner. This takes them to a screen where they are guided through the upload process, inputting information into designated text boxes, which can then be used as keywords to search/find the story later on.

Functionality: Task #3: Discover and Compare diverse perspectives

As mentioned in task 1, the primary source viewing screen is the screen from which users can discover/compare perspectives. By swiping right when reading a primary source, the user is

Page 7: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

able to see a list of related documents/perspectives from the same time period and area, allowing the user to engage with differing accounts and directly draw comparisons between them.

Prototype Description

Page 8: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

For our prototype, we took what we thought were our best ideas and constructed task flows. We wanted to make sure we could account for the cases where users did not immediately carry out the task flow directly, so we included screens that were not in the flows for our three tasks.

MethodParticipants: demographics, how recruited/compensated

Participants: Since our target demographic is an average student of high school/college age, in order to test our prototype (and with TA permission), we sought out students as participants. We recruited Stanford students of different ages, backgrounds, and with varying levels of interest in history from the team members’ residences. All that were selected had formerly been participants in high school history classrooms, and were incredibly familiar with the problems that we were trying to address. It is important to note that while the diversity of interest was high, the diversity of academic achievement was minimal, and highly skewed towards the upward end. This may have slightly affected our data.

Environment: Our participants were interviewed in their dorm rooms. We believed that interviewing users in an environment in which they would likely be participating in classroom assignments and activities, such as their residence, would best simulate the real life conditions of the application’s use. We made sure to interview them in private to avoid any distractions.

Page 9: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Tasks: Three tasks with varying levels of complexity were chosen for our prototyping:1. View stories that your friends uploaded (Simple)

This test was testing the menu bar and whether or not users would know to click on one of the pins on the earth image.

2. Upload a story about the user’s family history. This task tested whether or not users would intuitively click on the world icon to get to the map.

3. Gather diverse perspectives. This task tested if users would understand how to navigate to a page that lists similar stories with different perspectives.

Procedure: When conducting the experiments, we used our paper prototypes. Each screen was on a separate index card so that we could navigate through each motion. We placed each index card starting from the opening screen.

Test Measures: When conducting our tests, we wanted to focus on how intuitive our app was to use without any prior information. In other words, we wanted users to be able to navigate through the app without much text or instruction. One measure we used to test this was whether or not users expressed confusion on what step to take next or how to access certain functionalities. Another measure we tested was if users took steps that contradicted what we predicted users would take. This means that what we think is intuitive is not.

Team Member Roles:Each team member served as the computer during their tests, and also provided an introductory and conclusion discussion.

ResultsParticipant 1 (005937919)

Participant 1 seemed to understand how to use the application pretty intuitively. He was successfully able to carry out all tasks although it took a bit of exploration. The user understood how to navigate through the top menu bar but hesitated much more after clicking on those initial options. An issue that the user had was that he was not entirely sure what was happening at each screen -- for example, he knew that a page was the newsfeed and that a page was a map with pins, but did not have a clear understanding of the content (i.e. what was actually in one of the primary source pages, what sorts of things pop up on the newsfeed, etc.). The insight we drew from this was that we need to make each page more clear in it’s functionality (though this might have been a result of this being a low-fidelity prototype without all of the text that would be on the screen. When on the map screen after clicking on a pin, he did not understand that the header of the primary source that pops up can be slid upwards for a full page view.

Page 10: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Participant 2Participant 2 grasped the concept intuitively, although she did need help understanding

what interfaces were supposed to be dynamic. The participant was easily able to switch between the four main screens, “Newsfeed,” “Search,” “Map,” and “Class.” She criticized the design location of the top bar, and specifically noted that the search menu should be at the very end of the bar, not in a central location. However, she stated as she was completing the tasks that she found it intuitive to use. She also found the process of navigating to primary sources very intuitive, and was able to complete the process with no assistance once prompted, on her first try. When prompted to try other ways, she did so - locating the primary sources from both the map and the news feed. She could not identify primary sources from the teacher’s “Class” section, and said that that needed improvement. In addition, although she was able to navigate to related stories with no instruction once prompted, she noted that she wished that there were multiple ways to note article relation, including sorting by people instead of place. Overall, she found the design to be intuitive, simplistic, and easy enough to use, but lacking physically and in some features.

Participant 3Participant 3 seemed to have some trouble at first with navigating between a few

screens, although she was able to complete all tasks after a little exploration. Participant 3 had similar concerns as Participant 1, in that she was not sure what information was contained in which screen and how subscreens might be organized under each menu button. She noted a number of design features missing that could be added for simplicity’s sake (such as back buttons on every screen, indicators for whether an action is pressing or swiping, and a visual

Page 11: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

scrolling option for a timeline on the map screen). Other main insights drawn from feedback discussed afterward included the perception of “friends” not being intuitive (i.e. “friends” in the sense of social media versus real life friends), and some lapses in clarity for visual symbols.

DiscussionUsers found the application to be very intuitive after a brief exploratory period. The tasks

themselves were simple enough to complete with our given layout. However, there are some clear improvements that can be made - the navigation bar struck some users as unintuitive, and when navigating through primary sources users expressed the desire to “go back,” which did not previously exist. In addition, users wanted a variety of ways to discover content, and felt very constricted by the methods of discovery that we offered. In our finalized design, we should alter the nav-bar, offer a dynamic display of sorting through content, and offer multiple pathways of exploration.

Appendices:

Page 12: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Consent Form

The application (We)cord is being produced as a part of coursework for the class CS 147: Introduction to Human-Computer Interaction at Stanford University. Participants are being asked to test and evaluate the application. The data from this evaluation will be used by the (We)cord team to improve and modify the design and interface of the application. Data will be collected through interview, observation, and feedback questionnaire.

Participation in this experiment is voluntary. Participants may withdraw themselves and their data at any time without any fear of repercussions. Questions and concerns about the experiment may be addressed toward the researchers Cindy Torma, Chris Barnes, or Christina Galisatus, or to the instructor of CS 147, Professor James Landay, at:

James A. LandayCS DepartmentStanford University650-498-8215landay at cs.stanford.edu

Participant anonymity will be maintained at all times by separation of names from data. Data will only be identified by participant number. Finally, information will not be shared with any parties outside of the researchers/teaching staff.

I hereby acknowledge that I have read and understood this consent form and the expectations of the experiment. I have been given time and opportunity to ask questions about the experiment and my participation. I give consent to have data collected on my behavior and opinions in relation to the (We)cord experiment. I also give consent for images/video of me using the application to be used in presentations, publications, and data review amongst the researchers, as long as I am not personally identifiable in the images/video. I understand this consent form as it appears above and understand I may withdraw my permission at any time, as well as my data to that point.

Name: ______________________________________

Participant Number:____________________________

Date: _____/_____/_____

Page 13: web.stanford.eduweb.stanford.edu/.../projects/education/wecord/Report5.docx · Web viewSliding menu accessible from anywhere makes navigation to main screens fast and simple Cons:

Participant Signature:_____________________________________

Witness Name: ____________________________________

Witness Signature:__________________________________

I also give permission for images/video of me using the application to be used in presentations or publications as long as I am not personally identifiable in the images/video. I understand I may withdraw my permission at any time.


Recommended