GR6 - User Testing
Design
Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).
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 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: 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.
Background:
Feedback and observations
Task 1:
Task 2:
Task 3:
Task 4:
User 2
User 3
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.