GR6 - User Testing
Design
The design followed a very simple theme. Text was minimized as much as possible without sacrificing usability and visibility.
The login page was also the home page of the website. The home page consisted of the logo, the title, a brief description (deemed necessary after GR4 for users to understand the nature of the website) and a login component. If the user is a new user (i.e. without a login name/password combination) or has forgotten their password, the interface prompts them with additional components, appropriately. A snapshot of the primary view of the home page is shown below.
There is one main navigation bar at the top of the page that allowed the user to navigate between the different components of the interface. There is also a "Help" option for users to see instructions about how to interact with the interface. This was included because users said that the interface did not allude to its purpose at first, nor did it give any instructions of what to do at first for novice users. At the top left of the navigation bar is the account settings option for the user which, when clicked, pops up a small pop-up which allows the user to edit his/her profile settings, add friends, change picture and sign out. This is shown in the figure below. 
The below snapshot is the pop up that allows a user to add a trip to his/her trip list. The design has very little text and most of the instructions are embedded into the actual input field boxes. This was a design decision that came up from a lot of the trial and error of designing this pop up, as it proved difficult at first to remove all the unnecessary textual clutter. There is also a dynamic satisfaction rating that is in the form of stars next to the Country drop down list. The design for the input trip pop up is almost identical to how trips look when saved into the trip list. This allows for consistency and increased usability for users, who will understand how their inputed information will get translated into the website. 
The Maps section of the website allows users to search locations and see which of their friends, if any, have been to that location previously. The interface is also very simple and intuitive. It simply contains the map, and one search component.The below snapshot shows this portion of the interface. At first, the search component of this section of the website was placed on top of the map and no side bar was included. After the GR4, this design decision proved to be inconsistent with other portions of the website. Thus, the search component was placed to the left of the map, on top of the side bar, making it consisten with the other portions of the website. When a user searches a location, a "bubble" pointer appears on the map. When clicked, it will present a clickable pop up with all the friends that have traveled to that location. If a friend is clicked on, the website will direct the user to his/her friend's trip page so that they can view the trip information.
The below snapshot is of the My Friends portion of the website. This was completely reconstructed in an iterative design process to increase usability and consistency with the other sections of the website. Users may invite their friends by email, by searching the website for users, or through their Facebook accounts. The example below shows the user searching for Adriana within the website directory. The website returns "Adriana Vazquez" in the Results portion of the interface. As with the My Trips portion of the website, the panel that contains all the components is the same size and model of the Add Trip panel. This suggestion was made to us during GR4 and increases the consistency and the esthetic cleanliness of the interface.
Implementation
The main software used for the development of this project is Flex (Adobe Flash Builder). This includes xml along with the GUI builder for designing the website and Actionscript for handling the changes in the design
and for connecting the website with the Database.
The Database used is based on the MySql provided by the scripts.mit.edu and the middle man between our application and the Database is php.
Using Flex (instead of HTML/Javascript) was a major important decision, since we hadn't used it in class and only 1 of the 3 members knew it already. However, it was very easy to learn and, most importantly, the GUI Builder
makes the design part a lot more convenient and easy to handle. Connecting it to the back-end was indeed more tedious than it is with regular Javascript, but - fortunately - no real problems appeared and the interaction between back-end and front-end is fast and smooth.
This implementation decision affected the usability of our interface positively, since we had a great variety of gadgets to select from and the way you can simply drag and drop gadgets and position all the elements exactly where you want, allowed us to design the website to exactly match our paper prototype.
Evaluation
Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss how you might solve them.
Briefing
All users where briefed in exactly the same way, which is similar to the briefing we did for the paper prototypes since it proved to be very efficient and clear.
World Insider - User Briefing
“World Insider” is a network website, which allows friends to share travel experiences. The idea behind it is that users that share the same interests and travel standards can connect over the website and share their genuine unbiased knowledge. A tip from friends you trust is much more useful than multiple tips from random, unknown people online.
This website offers a fast way to create a trip according to your standards.
How?
Users create their profile and ‘Add Cities’ that they have visited. For each city, they rank the best things to do in a brief and clear manner. Additionally, they can provide opinions and tips for future travelers that describe the best features of a location.
Users connect with their friends that have also created profiles. Then, they can easily browse their friends' profiles to read about their trips and find suggestions or just search for destinations in a map and get the information they need.
Details
A dynamic map, per user, will show the cities and countries that they have information about (which comes from their friends). This adds a lot to the user's experience.
Users can choose a destination of interest and they will get a compiled list of personal reviews written by people they trust.
World Insider - User Tasks
Task 1: Log In/Register
Someone told you about www.insider-world.com.[actually under rossides.scripts.mit.edu]
You want to gain access to the website.
Create a profile (by registering).
Log in to your home page.
Task 2: Create trip
You just got back from a trip and you cannot wait to share - all the tips and amazing things you saw and did - with your friends.
Therefore, add a “trip” to your profile including basic info (like destination and date), top things to do there.
Task 3: Add Friends
It's time to expand your network on our website. Add the friend, who told you about this website, and, thus, already has an account. [Your friends’ name is Michalis Rossides]
Send an email invitation to a friend who might not know about this website yet and you want to introduce him/her to the website.
Task 4: Find trips
You feel like traveling to Athens. Find all the cool things that you “have to do” in Athens, from friends that have already been there and have updated their profiles appropriately.
User 1:
Background
Female McGill Student, originally from Mexico City, studying Political Science and Economics. Has a good knowledge of modern technologies but has no experience with software engineering, website design or design in general. She was chosen because she fits the profile of our target population, which are young adults that like to travel, with an "average" knowledge of technologies and interest in social networking sites such as Twitter and Facebook, proficient in English but speaks many languages as well, and also this website was completely new to her. We therefore considered her to be a good candidate that is representative of our user population.
Feedback and observations
Task 1: The task was carried out straight forwardly.
We got a positive comment about the minimalist design ("good that the page isn't too cluttered").
A comment was also made that after log-in, it is confusing to see a blank space in the middle, for her immediate intuition was that something was being loaded, but taking time due to a slow connection. This is a visibility issue, because it is not clear that the website was already on a fully loaded state, but it's not a critical error.
Additional points: She then refreshed the page out of curiosity and noticed that after being logged in, simply refreshing the page logs you out which to her seemed a little bit strange. She made a valid point, although we do regard this as a more complicated functionality which is independent of the "visible" design.
*Task 2: *The trip was created successfully. Suggested that the list of activities be sorted (which we had initially done but reverted since trip advisor has a very similar list, which we guess has to do with the most frequently used trips). She suggested also that instead one could be able to type into the boxes and have it try to match something in the list automatically (i.e. autofill).
Task 3: Found it not so intuitive what "view all" meant, but managed to otherwise find the friend successfully by typing in the name. Mentioned it was not good that you could only search by first name, and that definitely the search bar should be able to accept pressing "enter." Did not entirely like the tabular display of friends and the fact that they don't come up in alphabetical order.
Task 4: Found the map functionality very useful and intuitive at the beginning. Got a little confused when she had to specifically pick the trip "Athens" herself from the friend's profile rather than being re-directed directly.
Overall feedback was enthusiastic and user was inquisitive and curious. She liked the layout but mentioned that a lot more "enter" and "double-click" functionality should be used since it's more intuitive. She said the interface is pretty user friendly in general, just that given the potential of website seeing a lot more functionality and interaction with the map would be exciting.
User 2
Background:
Female student at MIT, course 9. She is a sailor and has little experience designing websites. Is a heavy user of social networking websites. Fits target population since she travels back and forth and enjoys documenting her trips. Proficient in English, French, Cantonese, Mandarin, and Korean.
Task 1: Completed task smoothly and without any mistakes. Task took less than 30 seconds.
Task 2: Found the Add Trip button very quickly and added the trip without any hesitation.
Task 3: Was first confused about how to search for a friend (either search by e-mail or by checking the world insider search tool) but after a little prompting was able to complete the task without any hesitation.
Task 4: Was a little disoriented about how to search for a country until she read the My Maps and was able to search trips easily and extremely quickly.
Overall feedback: Seemed like there was unnecessary clicking at some points such as selecting the trip from the list and then clicking the "View Trips" button. But other than that the website was very intuitive and easy to use. She said that it was very useful and would love to see it in the real world!
User 3
Background
Female student at MIT. Course 20. Is a sailor and has no experience designing website. Is a programmer and is proficient in Python, Matlab and Java. Speaks English, Spanish and French. Travels internationally at least once a year and loves to document her trips. Is a great candidate for a user of the website.
Task 1: First tried to sign in without creating a new profile but then was prompted that her username did not exist in the database. She then immediately created a profile and logged in. This was a smooth transition and showed that the process of a new user to log in is very streamlined.
Task 2: Completed task smoothly and without any delays. Loved the neatness of the interface
Task 3: Completed task smoothly and without any delays.
Task 4: Couldn't find out how to find other people's trips. Didn't know that My Map showed everyone else's travels and thought that it showed her personal map network. After some prompting, she understood how to complete her task.
Reflection
Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.
Reflections
The design process of World Insider allowed us to get a strong understanding of the strengths and importance of iterative design. We realized that a thorough study of the problem we wished to solve and the target user space, tied with the knowledge that we acquired throughout the course of the class about good principles of UI design, translated without much difficulty into a very clear, unambiguous design.
After every iteration of the creation of World Insider, we realized the value of user input, which is naturally key of user-centered design. Starting with the paper prototype, which forced us to carefully layout in paper the concept and make it more tangible, we learned the value of having the initial iterations as cheap and fast as possible because feedback from users could immediately be incorporated in the design. Also, catching flaws at such early stages definitely saved us much time of coding. For instance, something as seemingly trivial as label names could be so utterly confusing for users and some of the tasks like “Find and Add friends” would become instantly faster by adding a “My Friends” tab on the menu bar, rather than having a friends panel under “User Account”.
Another interesting lesson was that even though new terminology seems to emerge and evolve constantly in the internet-world, one has to find a compromise between originality and conventionality. Conventionality usually seems to increase information scent and learnability. For example, in our initial prototype, we had the world map under the label “My World” and it took users quite a bit of exploration (~30-40 seconds) to find the map, whereas changing it to “My Map” made the search time pretty much instantaneous.
For the computer prototype, it proved to be really efficient to have figured much of the design beforehand. Although it may have been good to decide on what technology to use at an earlier stage just to have more time to get acquainted with it, we feel in general that having made the decision to use Adobe Flash after we had done our paper prototypes and carried out the initial round of testing let us be very free and unconstrained about the design. Even though it was a challenge to learn many new technologies (since we were all new to javascript, html, css, actionscript, php, etc. before this class), having focused our energy foremost in making the design of the front-end as simple and intuitive as possible, was definitely an approach that worked well for us.
Once we came to the computer implementation, in particular the back-end, we did realize however many constraints imposed by our choice of technologies . An advantage of the waterfall model though, was that having already iterated a few times over our design, we found it easy to detach from our code, and keep making changes to our initial design. For instance, we quickly learned that it was so much easier to deal with data grids when coupled with a database in the back-end, and although visibly it was not as appealing as we would have liked, we chose to use datagrids extensively. This is where perhaps a deeper understanding from the beginning of Flex, php and Database management might have been helpful since we could have perhaps invested time into making our own components that would look closer to our design, rather than having to conform to using datagrids, but we take this as a great learning experience.
User testing was also another great learning experience, not only because of the feedback, but the process of designing the briefing, story board and scenarios, also proved out to be really helpful. It required us to carefully think about the goal of the website, and articulating the steps we envisioned users doing most frequently really kept reminding us that we are not the users. Besides we would always be pleasantly surprised by positive feedback, and all the constructive feedback helped us give direction to each iteration. In particular, after the heuristic evaluation, we compiled an extensive list of all the things we could change. If we were to do it again, perhaps we would have prioritized a few of the issues and fixed them really well instead of trying to do all of them. In the end though, for time constraints we did have to make some compromises, such as deciding to implement at the very last all picture capabilities, including profile pictures, friend pictures, and trip pictures, but we don’t regret it because we did not want to sacrifice functionality and design clarity for adding extra features that we probably wouldn’t have had time to perfect. However it was a crude reminder of how creativity in a website and functionality as rich as that of well-established magnate websites such as facebook is hard to attain in the first few iterations.
We look forward to continuing to experiment with our World Insider, and continue spiraling out in our design of World Insider, especially to bring in much of the functionality we envisioned like adding pictures and facebook capabilities.