App Name: PC Eat Up Target Audience: UCSD Students Theme: Food Meetups for students who want to eat together with new people
10 Heuristics:
Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
In our app: Homepage tells you that you are now on the homepage after logging in, and tells you to pick a restaurant. Each page has a title/logo telling you where you currently are in the application.
Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
In our app: All words in error messages, homepage, login, and chatroom are in plain informal English.
User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
In our app: User picked the wrong restaurant. User has the freedom to go back to the restaurant menu and pick the correct one they wanted using a “Back to Home” button.
Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
In our app: Have same format for all chat-rooms throughout the application for consistency. All buttons that do the same thing are consistent (i.e. “Back to Home” button takes the user back to the home page).
Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. (Read full article on preventing user errors.)
In our app: Before clicking on the logout button, it asks the user “are you sure you want to logout?” Before logging out.
Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. (Read full article on recognition vs. recall in UX.)
In our app: All pages also have logos with familiar pictures of each restaurant so that people can easily recognize each restaurant.
Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
In our app: Users can continuously send messages without re-clicking the chat box.
Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
In our app: Menu items just name the restaurant, chatroom buttons are clear and concise (i.e. “Submit” and “Input text here”...).
Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
In our app: If your message fails to send, displays “Message could not send. Please check your internet and try refreshing the page to try again.” in a pop up alert box. This rarely happens, but here is where it is implemented in the code: in server.js in an if(err) statement.
Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
In our app: We added a help page that explains what the app does and what we use it for.
Distribution of Work:
Kann Chea: Implemented a modal for Help in the home page and a modal confirmation when a user clicks on log out button.
Alex Stolzoff: Worked on CSS for multiple pages, helped design the layout of the app, added glyphicons, as well as background images.
Dennis Ku: Designed and implemented login page and assisted with solving bugs in setting up the application.
Vilan Le: Implemented multichat pages. Added button css. Added error catching for messages that failed to send.
Simon Hu: Worked on css for multiple restaurant pages. Added home and back buttons to pages. Helped determine the attributes of our app that would correspond to the design heuristics.