...
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
Our project is a website, and was thus made using standard web programming tools. The frontend is entirely HTML, CSS and JavaScript. The backend was written in Python using the Flask web framework, utilizing SQLite for the database.
Important Design Decisions in Implementation
- Minimize page refreshes
To improve the usability of our interface, we tried to avoid have the page refresh when the user performed most actions. For example, claiming, liking, and commenting do not cause apparent page refreshes. Even more complicated actions, such as deleting items occur without a refresh. In cases when a refresh is necessary, we tried to keep the experience as stable as possible, such keeping the item popup open when copying an item to a different wishdex.
- Download pictures to keep browsing fast
Initially, we only stored image URLs and loaded and resized them on page load. However, we found that this made browsing slow, particularly for the scrolling interfaces we had built for the Popular page. We therefore wrote the add item process to download and locally store small versions of the images.
- Keep structure simple and consistent
We decided to use Flask and SQLite because they are a “micro-framework,” meaning it allows for simple views, templates, and models without extra capabilities provided by more elaborate frameworks. In addition, we tried to keep aspects such as URL structure and parameters for AJAX calls as simple as possible and consistent across different but similar use cases.
- Force Facebook Connect for login
We chose to keep the login process as easy as possible by only allowing Facebook Connect. This allowed us to get simple information about the user without requiring another form. This also prevented some validation from having to be written on the backend.
- Only allow comments not replies
We chose to only allow comments on items without any replies to them. This greatly simplified the interface implementation on the frontend and the backend structures necessary to store and access the comments. We believe that comments alone are adequate for a user of our website.
Implementation Problems and Effects on Usability
Note: Some smaller issues, such as the user's icon next to a comment not directing to the user's profile page, are mentioned in the Evaluation section.
- Scraping limitations
We only implemented a scraper for Anthropologie items. This automatically fills the fields of the “Add Item” popup when the user enters a link. The lack of a scraper for other links makes the site much less efficient for adding items, which is one of our core functionalities, because the user must enter the item information manually.
- Speed issues
Although using SQLite as the database kept our development environment simple, it also contributed to some of our pages loading slow at times. In addition, some of the frontend had fairly heavy JavaScript usage, such as the popup boxes. This issue added to page loading times. Both of these problems affected feedback on certain actions to some degree.
- Facebook Connect
As mentioned in our Evaluation section, Facebook Connect is not the preferred method for logging in for some users, who prefer not linking their Facebook information with other services. Although Facebook Connect made login more efficient, it also made our website less desirable to use for some usersDescribe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.
...
Evaluation
We conducted a user test on Sunday, May 8th, 2011 at the MIT Student Center.
...