Heuristic Evaluation v0.1.3

fascilitated by: Prof. Ooi Wei Tsang
version v0.1.3
by: Amos, Daphne, Jia Ying, Jia Xuan, Jie Hao
on: 24 March 2017

1. Visibility of system status

✖ Bad

File Manager UI

• If loading takes too long, a loading screen should be shown
• There is no auto-focus for using search bar. Having it can prevent possible user frustration.
• There is no notification to show file has been successfully deleted. no choice to undo too.
• There is no status updates shown after changing names of files/folders. e.g. whether change of name was successful or failed.
• When the system cannot search for anything, the page is just blank. The user may not know what is happening.
• An indication should be displayed instead to inform the user about the absent of results.
• There is no feedback on the button [ Icon | List ]. Although the user can clearly see which mode he is currently in. it should be clear that which button is currently being selected.
• There is no indication/feedback when a new file/folder is created.
• There is no indication of file directory, user will not know where he is currently at.

Editor/Viewer UI

• Instead of having the “Manage” dropdown button, it should instantly show the different formats (e.g. Pages/Slides/HTML).
• When editing a file, it should show the file’s name and/or filepath.

✔ Good

File Manager UI

• Search results are displayed fast. However, improvements can be made by showing how long it took to be loaded.
• Files and folder system is quite intuitive, as it is similar to what a user would see on his/her OS’s file explorer.
• Response time of actions are quite immediate.
• Loading of website is acceptable as it is less than 2 seconds

2. Match between system and the real world

✖ Bad

File Manager UI

• In a website, an interactable button/link should the mouse pointer to a cursor. It should display as a pointer instead.

• Interaction to rename file isn’t what most OS have.

✔ Good

File Manager UI

• Back and Forward button icons are intuitive/matches real world back and forward symbols
• New File and Folder button icons are intuitive/matches the real world as the + sign means addition/creating new file/folder
• Download and Delete button icons are intuitive/matches real world usage
• Search are intuitive/matches real world usage
• Double-clicking opens file or folder. This interaction match the behaviour of file manager system in most operating system (MacOS/ Windows).
• Fonts used are suitable, minimalist and clean for viewing/reading.
• The design.layout is quite intuitive like what a typical files and folder system a user would see on the OS, like windows and mac.

3. User control and freedom

✖ Bad

File Manager UI

• User can only navigate through the files on clicks only, unlike on OS where users can use keyboard as well.
• After deleting file/folder or changing file/folder name, the highlight for the selected item is gone. This means users have to select their desired item again.
• Renaming files and folders are a little to easy as it does not prevent users from accidentally renaming files could be only using double clicks on filename would enable file renaming action. A rename button for basic/new/less tech-savvy users would be welcomed too.
• Deleted files/folder could be moved to a ‘Bin’ folder first, so that user can recover them if they have accidentally them.
• User is not able to control whether to search for file or folder or both

Editor/Viewer

• When user go back from the text editor the path goes back to the home path instead of the path where the file was last opened.

✔ Good

File Manager UI

• Search is easy to open, enter info and execute. However, an improvement could be made such that user can clear/cancel search content.
• Clicking on file or folder shows which file or folder is clicked by user.
• Renaming files/folders are easy.
• Undo and Redo supported in search bar.

Editor/Viewer

• Changing view (pages, html, slides), highlight follows cursor, also show which view user is on.
• can use key presses to undo redo etc in editor and home page. But lack the buttons, can improve by adding buttons.
• Navigation didn't have much dialog and easy to go back.
• Undo and Redo supported in Editor/Viewer.

4. Consistency and standards

✖ Bad

File Manager UI

• Logo’s font size not compatible in all browsers

Editor/Viewer

• Logo’s font size not compatible in all browsers

✔ Good

File Manager UI

• Follows platform conventions like file explorer on different OSs.
• The design is quite intuitive like what a typical files and folder system a user would see on the OS, like windows and mac.
• Icons are enlarged when hovered over
• Icons that cannot be used are correctly greyed out.

Editor/Viewer

• The design is that of any typical markdown editor.

5. Error prevention

✖ Bad

File Manager UI

• Search bar does not detect spelling error.
• User does not know whether the search bar is selected only until he has typed something
• A warning should be prompted before the user delete a files/folder.
• Should not allow user to edit through URL

✔ Good

File Manager UI

• Actions are almost instant responses so there is no need for confirmation and error

6. Recognition rather than recall

✖ Bad

File Manager UI

• The search result should provide useful information about its path so that user know where the file/folder comes from.
• There is a choice of list and icon, but the list does not have sufficient difference from icon other than aesthetic.
• In windows and google chrome there is something like last modified to show file’s last modified date.

Editor/Viewer

• User is not able to know which file he/she is editing as there is no indication of filename or file path.
• Exiting the editor/viewer always return user to root folder and not the file’s location/directory.
• When user type ``` it should auto suggest what plugin are available for them to use.

✔ Good

File Manager UI

• Usage is simple enough with similar application as other common programs to be intuitive enough to remember.

7. Flexibility and efficiency of use

✖ Bad

File Manager UI

• User is not able to sort the files by alphabetical order.
• No implementation in relation to time like last modified yet.

✔ Good

File Manager UI

• Keyboard shortcut actions mapped for homepage.
• Back and Forward button. Quick navigation for user.
• Search is very flexible and useful for both simple use and power use on the input strings.
• Searching of files and folders has feature of typing partially with % and _.

Editor/Viewer

• Keyboard shortcut actions mapped for editor.

8. Aesthetic and minimalist design

✖ Bad

• None

✔ Good

General

• Simple and minimalist interface.
• Not cluttered with too many options.
• Obvious icon to distinguish folder and file.
• Straight to the point and immediate response of action

9. Help users recognize, diagnose, and recover from errors

✖ Bad

File Manager UI

• Typing an invalid filename will not prompt user about it.
• User is unable to recover files deleted by mistake
• Show user an error page when attempting to access an invalid file through URL

✔ Good

• None

10. Help and documentation

✖ Bad

General

• Lack of help and documentation, novice users won't know what functionalities are there for them to use.
• Tooltip on hovering over icons to give brief overview of what the icon does.
• Include help linking to Github Readme.md page and cheat sheet.

✔ Good

General

• Buttons are at the same end of the application which makes it easy to reference and find.
• The functions are not cluttered and pretty intuitive.