These wireframes are part of the design process. They are not what the final interface will look like - they are designed to show the functionality we expect on different pages. Please leave comments!
Our main page consists of a grid of equal-sized icons depicting a graphic of each tool and a brief description of each tool beside the box. The type of boxed grid elements to be displayed on the page can be manipulated by the tabs at the top of the tools. Each tab consists of a command to display different types of tools (e.g. most popular, random, statistical etc.,). When the user hovers over a grid element a pop-up display depicting a miniature version of the web’s tool page is instantiated prompting the user to further try the tool or visit the tool’s webpage. This neater organization of tools tended to be a lot simpler, accessible and visually appealing. Information about each tool can be easily gotten by a quick roll-over. Panels to the extreme left of the page contain links to information about TAPoR including Tutorials and user comments about the tools. We have succeeded in reducing the huge amount of link clutter to just the most essential, especially those that are meant to help the user learn more about tools and their current usage. The next page describes what an individual Tool Page looks like using wireframe. In this instance we took the “List Words” tool as an individual example.
When a user clicks on a tool from the main page, he is directed to a tool’s webpage where a detailed description of the clicked tool can be obtained, including different tags depicting the tool’s functions. There are ready options for the user to execute around the tool. These include options to try, bookmark, comment and rate the tool. The user also gets to see a sample of other tools used people who also tried the same tool.
Background
We sought to maintain a user-centered design in our approach, aiming to center the redesign activities on the needs of the users rather than design aesthetics alone. We have used this approach to facilitate the communication of user needs in an intuitive and actionable manner. In a large sense, the eventual structure of our Redesigned Tapor page was influenced by the various user needs depicted in our Personas (http://tada.mcmaster.ca/Main/Personas) and the ideas gleaned from our environmental scans. In our environmental scans we sought to understand how different websites organized both tools and visual elements on their pages, and how those may have had an overall effect on the site’s usability. We also sampled and learned how these sites integrated functions like recommendations and voting systems into their structure. An additional goal in the environmental scans was to obtain ideas of the different types of designs and features that are out there, especially for tools: we sought to streamline these for our TAPoR redesign. Following the types of users and the various premises profiled in our Personas and Scenarios, including features gleaned from environmental scans, we were aiming to achieve the following for a Redesigned Tapor:- Accessibility: We wanted fewer clicks to get to tools; the performance of some tasks without user login, and to encourage the exploration of projects
- Simplicity: We wanted to remove a much clutter as we could
- Create a review framework for tools
- Allow for the framework’s extensibility if or when needed
- Create tags for tools to enrich a tool’s description and enhance its discoverability
TAPoR Main Page (Figure 1)
This wireframe shows the Main Page with a roll over event:
Our main page consists of a grid of equal-sized icons depicting a graphic of each tool and a brief description of each tool beside the box. The type of boxed grid elements to be displayed on the page can be manipulated by the tabs at the top of the tools. Each tab consists of a command to display different types of tools (e.g. most popular, random, statistical etc.,). When the user hovers over a grid element a pop-up display depicting a miniature version of the web’s tool page is instantiated prompting the user to further try the tool or visit the tool’s webpage. This neater organization of tools tended to be a lot simpler, accessible and visually appealing. Information about each tool can be easily gotten by a quick roll-over. Panels to the extreme left of the page contain links to information about TAPoR including Tutorials and user comments about the tools. We have succeeded in reducing the huge amount of link clutter to just the most essential, especially those that are meant to help the user learn more about tools and their current usage. The next page describes what an individual Tool Page looks like using wireframe. In this instance we took the “List Words” tool as an individual example.
List Words Tool Page (Figure 2)
* List Words Tool Page:When a user clicks on a tool from the main page, he is directed to a tool’s webpage where a detailed description of the clicked tool can be obtained, including different tags depicting the tool’s functions. There are ready options for the user to execute around the tool. These include options to try, bookmark, comment and rate the tool. The user also gets to see a sample of other tools used people who also tried the same tool.
- (comment from StefanSinclair - 23 Mar 2011 19:43:21): I like the proposed layout. I think whatever can be done to help and encourage navigation should be tried. One example is that every tool should have a set of tags that are created automatically based on the values of fields and also user-defined tags. Those tags should appear compactly with every tool as links so that the user can find one tool that does XML and find all other tools by clicking on the XML link.
- (comment from StefanSinclair - 23 Mar 2011 19:43:42): I'd suggest having the full tool profile appear as a hover when the user hovers over the thumbnail (that will reduce the need to click to open and then dismiss the info panel).
- (comment from StefanSinclair - 23 Mar 2011 19:44:14): I'd like to see the search box do suggestions (search as you type) with meaningful labels.
- (comment from StefanSinclair - 23 Mar 2011 19:44:47): It may be worth having a random tool showcased on the page.
- (comment from StefanSinclair - 23 Mar 2011 19:45:22): We would need an advanced search. Similarly, it might be good to have a way of browsing through the tool facets.
- (comment from StefanSinclair - 23 Mar 2011 19:50:00): I'd be tempted to do away with user accounts in the first instance. Reviews and comments could be submitted anonymously, we'd just need to moderate constantly (which spread across multiple admins wouldn't be that bad). We'd want boxes to allow users to suggest new tools for us to assess (users couldn't do this on their own, but I think that's a minor sacrifice). If users choose to invoke tools that require asynchronous functioning then they'd need to provide a valid email address (again, no need to login). In fact, an initial email might be sent just to confirm that the job is valid before it's actually launched.
