The+Any+Key+Final+Report

The Any Key Final Report
 * The Problem: **

Almost every program ever made has a slew of keyboard commands, many of which are unique and unintuitive, and many of which can only be found by searching through manuals or badly designed web sites. Finding the commands available is an arduous process, particularly since modern software is often constantly being updated with new functions and new commands to execute them, rendering static physical reference materials obsolete. This lack of accessible, complete information on keyboard commands in modern software is the problem we wish to address.
 * Credits: **

Mark Stewart:
 * Initial project idea
 * Proposal
 * Work on most of initial part of User Needs
 * Paper and Balsamiq Designs
 * Work on Design writeup
 * Javascript for prototype database
 * Design of Usability Test and questionnaire
 * Five usability tests and their writeups
 * Work on Final Report

Victor King:
 * Work on finishing User Needs
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Paper and Balsamiq Designs
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">HTML and CSS for prototype (other than log in bar)
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Prototype write up
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Four usability tests and their writeups
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Usability Test summary and the rest of the writeup
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Work on Final Report

<span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Michael Midgley-Biggs:
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Work on several parts of User Needs
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Paper and Balsamiq Designs
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Work on Design writeup
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">JavaScript/HTML/CSS for prototype log in bar
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Final Prototype design and HTML/CSS/Javascript


 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Audience: **

<span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">This product is aimed at a very wide range of users, as there is no one type of computer user that predominantly uses keyboard commands. [|Anyone who uses the internet] <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;"> is potentially a user of our site. As such, the interface will be designed to be as simple and non-technical as possible in language and appearance. However, because many people who are less knowledgeable tend not to use keyboard commands and shortcuts in the first place, it’s possible most of the users will tend to be on the more knowledgeable side when it comes to computers.

Initial List of Users: <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">We compared our idea to many other solutions that performed similar functions:
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Developers looking for commands to be used in IDEs, testing software, debugging programs, etc.
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Graphic designers looking for commands to be used in image or video editing software
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Businesspeople looking for commands to be used in financial software, store front-ends, etc.
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Writers, looking for commands to be used in word processors, publishing software, etc.
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Gamers, looking for shortcuts for actions in computer or video games
 * <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">In a wider, more general sense, potentially anyone who regularly uses applications with shortcuts and has an Internet connection
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Competing Solutions: **


 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;"> Things to Compare To: **
 * <span style="background-color: transparent; color: #000099; font-family: Arial; text-decoration: none; vertical-align: baseline;">[|Stack Overflow]
 * <span style="background-color: transparent; color: #000099; font-family: Arial; text-decoration: none; vertical-align: baseline;">[|Wikipedia]
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;"> Search engines ( [|Google] )
 * <span style="background-color: transparent; color: #000099; font-family: Arial; text-decoration: none; vertical-align: baseline;">[|KeyXL]
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Photoshop Keyboard Shortcut Editor
 * <span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Mac OS X Keyboard Shortcut Preferences

<span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;"> **Stack Overflow:** A quick search for keyboard shortcuts on Stack Overflow reveals a long list of posts asking about keyboard shortcuts. Many of the posts are directly requesting a list of keyboard shortcuts for a particular program, or simply providing a list. There are many other posts on keyboard shortcuts that show up as well, which would make it more difficult for a user to find a simple list of shortcuts. Also, the functionality of TAK will go beyond simply providing a list of shortcuts for a program. <span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;"> **Wikipedia**: TAK may or may not end up being a kind of wiki. Wikipedia has a list keyboard shortcuts that is fairly comprehensive, but only applies to operating systems and is just a single page. A TAK wiki would be more comprehensive and specialized. <span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;"> **Search engines (Google)**: Search engines like Google are probably a common way for people to look up keyboard shortcuts, as it is the first instinct of pretty much anybody when you don’t know something on the Internet. Of course search engines that search the entire web are not nearly as efficient as a more specialized search when you know what you are looking for. <span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;"> **KeyXL**: A large collection of keyboard shortcut lists, grouped by program. KeyXL is searchable only by program and operating system, and provides its information only in list form. Allows users to vote “+” or “-” on shortcuts in a list, indicating usefulness or incorrectness, and has a feature for submitting ratings and comments on each list page as a whole. <span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;"> **Photoshop**: Photoshop provides a list of editable keyboard shortcuts that can be grouped by category. While users who personally edit the shortcuts of a program are not a target user (with regard to that program), TAK will still be useful for users of Photoshop and other programs that have their own list of keyboard shortcuts because those lists are often poorly documented and hard to search.


 * Mac OS X**: Mac OS X also provides an interface for viewing and editing keyboard shortcuts. As well as not providing all of the functionality we hope to provide with TAK, they use symbols to represent certain keys (ie. shift is an upward arrow) without the symbol actually appearing on the physical key. We will aim for better readability and clarity with TAK.  [[image:macshortcuts.png width="504" height="379"]]

<span style="background-color: transparent; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;">**Overview of Approach:** <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">We will catalog commands in a searchable database accessible through a web site. Users of the site will be able to add shortcuts to the database, and the shortcuts will be indexed by name, program, operating system, and other relevant tags. Having one go-to database for this will free users from having to search web sites, manuals, etc, for obscure commands, making the process much faster and easier. Additionally, having the database be user-editable will make it easy for users to participate in keeping the information up to date, much like on Wikipedia. This approach has a number of advantages over previously reviewed solutions. The site will be specific to keyboard shortcuts, so users will not have to look through as many unrelated posts/links to find the information they need. It will be searchable by single or multiple parameters, allowing the user to narrow results down further than is possible on KeyXL. Being user-updated also gives it an advantage in keeping the data up-to-date and crowdsourcing data entry vs. KeyXL. In short, our site will combine the advantages of user-generated content on sites like Wikipedia with the specificity of information on KeyXL.
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Solution: **

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Home/Search screen. The first thing the user sees:
<span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">This screen includes the login bar at the top where the user can sign in (the non sign in parts are non-functional). It includes textboxes for Command, Program, and Operating System, a Search button for requesting the search, and a text area for displaying search results. It also includes a link to the “Add a Command” page at the bottom.

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Screen after user hits the sign in button:
<span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">Hitting the sign in button displays textboxes for username and password.

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Screen after user logs in and completes a search:
<span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">When you user hit the search button, the search results are displayed in the text box.

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">The "Add a Command" screen:
<span style="background-color: transparent; font-family: Arial; text-decoration: none; vertical-align: baseline;">The basic layout for this screen is similar to the home/search screen. This screen contains fields for Command, Program, Operating System, Shorcut, and Description, as well as a button for submitting a command. It also has a link to the search page at the bottom, in the same place that the previous link was located.

**<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">User Tutorial: ** <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Users of our system were told the basic nature of the site (i.e. that is is a database of keyboard commands with which users can search for commands and add commands), and that’s it. Other information was only given on an individualized basis if users were having trouble during the user test (e.g. many users had to be told that the “Command” text box was for the name of the command, some users had to be told what to put for “program” if their command was an OS-level command, etc).
 * <span style="background-color: #ffffff; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> First Prototype Transitions: ** <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> Search Page <span style="background-color: #ffffff; font-family: Arial; font-size: 19px; text-decoration: none; vertical-align: baseline;">⇔ <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Add A Command Page
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Usability Test: **

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Tasks:
<span style="background-color: #ffffff; display: block; font-family: Arial; text-decoration: none; vertical-align: baseline;">Note: User starts out on the "Search" page.

1) Login: At the moment, login will take any username or password, so this task involved users locating the 'Sign In' link, typing in an arbitrary username and password, and pressing 'enter'. They have succeeded once their selected username is showing in the top right corner of the header bar.

2) Add A Command: This step involved the user adding a command to the database. They will start out on the search page, so they have to find the link to the add a command page, then fill out the appropriate information on it, then submit the command to the database. They have succeeded when the "Command Added" confirmation message appears on the screen.

3) Search for the Command: This step involves the user searching for the command they've just added to the database. As this step follows the Add A Command step, they will have to find the link to the search page, then enter the appropriate information, then submit the search and find their command in the results. They have succeeded when they have found the listing for the command they added previously.

4) Modify the Search: This step involves the user modifying the parameters of the search they just entered. They may either add additional terms (e.g. program, OS), or search for a different command. They have succeeded once the new search results are showing.

<span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Survey Data:
<span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">We collected the gender, age, time spent on the internet each day, and self-ascribed computer literacy of each user tested (1-7 scale). [|Link to Survey]

<span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Survey Questions:
<span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">1) What do you like most about The Any Key? 2) What do you dislike most about The Any Key? 3) How easy is it to use The Any Key (1-5 scale)? 4) How professional is the look and feel of The Any Key (1-5 scale)? 5) What changes or additional features would most improve The Any Key? 6) Any other comments?

Demographic details of participants:
 * 1) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 18-20, 4-6 hours of internet use per week, computer literacy of 4
 * 2) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Male, 18-20, 6-8 hours internet use/week, computer literacy of 4
 * 3) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 18-20, 4-6 hours internet use/week, computer literacy of 3
 * 4) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 18-20, 4-6 hours internet use/week, computer literacy of 5
 * 5) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 18-20, 2-4 hours internet use/week, computer literacy of 4
 * 6) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 18-20, 2-4 hours internet use/week, computer literacy of 3
 * 7) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 21-29, 4-6 hours internet use/week, computer literacy of 3
 * 8) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Female, 50-59, 2-4 hours internet use/week, computer literacy of 4
 * 9) <span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">Male, 50-59, 0-2 hours internet use/week, computer literacy of 3

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Summary:
<span style="background-color: #ffffff; font-family: Arial; text-decoration: none; vertical-align: baseline;">(Note: statistics are not practical with such a small sample size, but specific numbers are given)

There were many issues raised during the usability tests, and none of the nine users went through the process without some issues. Six users had an issue with sign in, generally suggesting that there was a need for a clickable button. Four users expressed that the link from the home/search page to the "add a command" page was not easy enough to see initially. They generally implied that it should be "darker" and more prominent. Interestingly, while the link from the add page to the search page was identical, there were no issues or complaints about it, as the user already had experience from the initial link.

When it came to adding a command, all of the users had some issues related to their not knowing exactly what to type in the input fields. A common issue was that "command" was ambiguous and should clearly indicate that it is asking for the name of the command. Another was that it was unclear what to do with the "program" input box if the command was at the OS level. Multiple users also had issues with how to format their input. The exact wording for certain command names, operating systems, or even programs can vary, and the fact that the prototype didn't account for that was an issue. It was also an issue that there was no standard format for specifying the shortcut itself. Five of the users instinctively tried to enter the shortcut by hitting the shortcut keys themselves, implying that a key capture system would be useful but that even without it it should be clear that our implementation doesn't support it.

There were a few other issues raised as well, such as what to do about a user attempting to add a command that already exists in the database, and what to do if users try to submit a command without filling out all the fields. There were also a couple comments on the "bland' colors and "light" text. A couple users expressed an overall desire for more description and help options, saying for example that there was a "lack of description", that there should be "a roll-over for each search box/command, to further explain" or "a help/info page for certain jargon that others might not know".

Despite the large number of issues, many users expressed an overall positive opinion of The Any Key. Five users said that it was "moderately easy" to use, and four said that it was "very easy", with only "extremely easy" as a better option. Four users said that the look and feel was "moderately professional", three said that it was "very professional", and two said that it was "extremely professional". No user selected an option below "moderate" for either question. There were comments that the design was "simple", "creative" and "useful", with one user commenting that they "would definitely use it".

<span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Itemized list of problems and fixes (priority):
[|Final Prototype Link] We did a significant redesign of the UI for the final prototype to make the interface more unified, intuitive, and professional-looking. The basic actions remain the same, but the "Add a Command" page has been unified with the search page and is now an option on the top menu bar (but only when a user has signed in). Also, to avoid confusion with regard to what the text boxes are for, the "Command" box has been renamed "Command Name", and all text boxes for both search and adding commands now have grey click-away text with examples of appropriate inputs (e.g. Command Name box contains the text "e.g. Desaturate"). This should make all input boxes much easier for users to figure out. To make the search results more readable, they have been streamlined, and also now only display command name, program, OS, and shortcut by default, but can be expanded to show command descriptions. Now available on the expanded search results are "Edit" and "Delete" options. Also, search results are now numbered so that it's easier for a user scanning through them to keep track of where they are. User sign-in now has a sign-in button, and the Add, Edit, and Delete functions are only available to users who have signed in. In the future, we would like to add notifications on the addition of duplicate commands to the database, additional tags to label the commands with (e.g. tagging some of them as "text editing commands" or "OS-level commands", or tagging them with what version of their software they correspond to), and an intuitive way to deal with entering the information pertaining to OS-level commands. We still need a simple way to indicate to a user what to input for "Program" if the command they are entering is an OS-level command. We also still need a way to standardize input like Mac OSX, which different users may input as Mac, OSX, OS X, Mac OSX, Mac OS X, etc, and which, as a result, does not match all of the results that it should match at present. Maintaining real and secure Sign Up and Login functionality is something we'd like to do as well. As it stands, however, the site functions well for its intended purpose, and the usability has been improved considerably over our initial prototype.
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need a sign in button on entering username and password (4)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to make what the input labels are asking for as clear and unambiguous as possible (5)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to clearly specify the format for all input, particularly for the shortcut (4)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to do more than simple string matching for searching, to allow for unpredictable input from users with regard to things like command names and operating system names (4)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to prevent users from submitting a new command without filling out all required fields (3)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to determine and specify what to do for “program” input for OS commands (3)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to specify that shortcut input does not accept key capture, or implement key capture (5)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need a way to deal with users attempting to add commands that already exist in the database (4)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 13px; text-decoration: none; vertical-align: baseline;">Need to make buttons and links more visible (3)
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">What Was Changed in the Final Prototype: **
 * <span style="background-color: #ffffff; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Open Issues, Future Changes: **