The Prototype of the Application – Useful Photoshop
As I stated in a previous entry, I will now attempt to explain the user interface of my application through several screens composed with the elements of the paper prototype I constructed in Photoshop. I will not be going through every small detail, but I will outline the most important elements and their function.
The Front Page
This screen is effectively a prototype of the front page of the application, with the user menu opened. I will go over each element in turn:
- User Console: The user console is the panel located in the upper left corner. It displays a short summary of your personal information, or nothing if you are not currently logged in as a registered user. It shows the user’s name, title, a selection of achievements and how much expertise the person has. Clicking the name or avatar will redirect you to your own profile, while clicking the achievements or expertise will give a small pop-up window (not included here for brevity’s sake) with a scrollbar that allows you to cycle through all your achievements or the tags in which you have attained a certain expertise. This may not be useful for your own profile, but the same functionality is provided on the smaller user consoles next to the posts you see on the front page.
- Main Menu: The main menu is normally collapsed simply as the menu button and only shows the options on the screen when clicked. These options contain all the basic functionalities of the application such as making a new post, issuing a challenge or searching the posts for specific topics. Advanced Search is also available which will allow users to specify additional criteria beyond simply a certain string to match with a post name.
- Posts: The two posts located on the screen contain some basic information and clicking the post name will take you to the main view of it. Various information is displayed next to it such as the writer’s user console, as well as its current score and how much expertise it has garnered the writer. A small keyword also shows in the upper right corner of each post detailing whether the post is new, an update, an edit or a new iteration. Only two posts are given as examples, but naturally more can be displayed on the screen and skimmed over using a scrollbar on the side.
- Notifications: A notification bubble is located in the lower left corner of the screen which is colored red whenever there are new notifications. This is effectively a listener that will be updated whenever something occurred that would be of interest to the user. That can be anything from acomment on a post of his/hers, a challenge that was issued to them, a new post by someone on their friends list, and so on. Notifications can be studied in a more traditional list through the main menu. Notifications are also minimized until the user clicks the bubble, after which they show up as is shown on the screen. All new notifications will always be shown on screen, but notifications shown in the short recap list will be padded with old notifications only up to five, to prevent the screen from being flooded with old information. To view older notifications, a user will have to go through the main menu.
That is basically all there is to say on the front page. It is simple and straight-forward and serves solely as a gathering point for the posts. Notifications, the user console and the menu button are all present across the entire application.
The Post View
This screen displays a post view, with comments and challenges uncollapsed so they can be viewed. Posts are mainly organised in three tabs, with general information (such as post title and any attachments) above it. It is important to note that the user’s console is replaced by a console giving the information of the user who posted the entry being viewed. Again, I will discuss the major elements in turn:
- Description Tab: This tab contains the general description of the problem and perhaps the methodology the user followed in their solution. It is plain text, but can be formatted to be made more enjoyable to read.
- Solution Tab: The solution tab contains a number of sub-tabs depending on the user who wrote the solution to the given problem. Tabs are added and cycled through using the buttons on the right. These tabs are optional but advised for lengthy solutions (especially computer programs) that would benefit from some organisation. The contents are, once again, simple text with optional formatting and potentially the ability to mark blocks of text as “code” to allow more structured formatting pertaining to a certain programming language.
- Output Results Tab: This tab contains a description of the input the user gave his solution and what the output was. This is a very broad way of defining as this tab will contain wildly varying information depending on the field of study involved and the techniques used. Computer Algorithms will (at least if the user wants to properly inform others on what exactly he did) demand users to supply information on their own computer as well as what language was used, and so on.
- Post Sidebar: To the left of the tabs is various information such as the times the post was viewed and favorited, its score and any expertise it has garnered. Giving a score is as simple as clicking the bar corresponding to the ranking you wihs to give the given post. Other elements in this side-bar are buttons to perform various actions such as posting a comment or issuing a challenge.
- Comments & Challenges: Comments and challenges are listed below the post itself. By defauly, these are collapsed, but can be viewed as a list, complete with scrollbar, if the user presses the respective buttons. Comments work in much the same way as posts on the front page in that they display user information and the score the comment has received. Options pertaining to each type can be found underneath the actual comment or challenge in question (e.g.: whether to accept or refuse the challenge, to reply to the comment, etc.)
Once more, I tried keeping things simple and straightforward. Most things can be accomplished with a single button press and has most things grouped together. I found the inclusion of the tabs necessary in order to keep the text flow on the screen more limited. Without those tabs there would have been at least three large blocks of text, without considering the fact that the solution itself may be far large than this example shows, with many tabs.
Creating a Challenge Track
The last screen from the prototype that is worth showing in greater detail without being redundant is the screen that comes up when creating a Challenge Track.
Challenge Track Information: All the general information for a challenge track is located at the top of the screen, included the buttons to publish, save as a draft or publish it privately (essentialy using the track and its achievements for yourself only and not allowing others to attempt it). Filling out this information simply involves typing in the text boxes.
- The Track: The track underneath displays all the milestones you have placed, in order. Users will have to achieve these in the same order as they are defined. Adding challenges to the track can be done with the ‘plus’ button and they can be clicked and dragged to take a spot before or after any other milestones you drag them past.
- Milestone Information: Clicking one of the milestones will enlarge its icon and allow you to enter its name and the details of achieving it (which cannot be too long for brevity’s sake). Clicking the icon again allows the user to upload an image to represent the milestone, but a default image will naturally be supplied. The ‘minus’ button will remove the milestones if there are at least three in the track (in other words, a challenge track must have a minimum of two milestones).
Once more, a simple and hopefully (user evaluation will confirm or deny this) intuitive interface that should allow for users to create a track quickly and easily.
My final words on the prototype are that I hope they are sufficient to give people a good idea of what the application would look and feel like. Only next week’s evaluation will be able to give a glimpse of whether or not it succeeds at this. Some screens such as the user profile have been left out because I did not see the point in describing how things were simply listed, but I may include them if they were deemed particularly successful or poorly designed in my next post, after the evaluation. I hope this has given some insight into what I have been doing and I hope this alone will already give me some useful feedback.