Modern Logic for Artists, Heuristic Evaluation

Modern Logic had a great start on their web portal with easily filled forms and balanced layout. However, there were items in the design that could further improve usability.

The first step in evaluating Modern Logic's web portal was to put it through a heuristic evaluation. To better understand this topic I referenced the Nielson Norman Group's article 10 Usability Heuristics for User Interface Design and those items will be in bold below.

Overall, the portal has a pleasant Aesthetic and Minimalist Design, but the first issue that came up was not having easy Visibility of System Status. The first page of the portal has a numbered system at the top which looks like navigation, but was not interactive. Modern Logic quickly updated this so you could click through each page and it would show status of completion, but they could go a step further by labeling each section on the menu, allowing you to use Recognition Rather than Recall. This gives you a summary of the entire task of completing this form and allows you to quickly jump from section to section and know where you are going, giving User Control and Freedom. This is especially valuable when returning to the site if you left midway through filling out the form.

I provided section titles for them to visualize this change.

Menu on basic interactive update.

Menu with descriptive text letting a user know all the steps involved, allowing easy navigation. Underlined text reinforces the idea these are links.

Forms, Ease of Use

In general the forms are easy to use and see, but there were a couple areas for improvement.

First, the description of a form field is best placed above, as a label, rather than placeholder text. You can read all of the advantages of this style in this article, Placeholders in Form Fields Are Harmful.

Second, seen in Text Example A, the placeholder text "Railway..." does not meet Web Content Accessibility Guidelines because the contrast between the text and background is too low. The link color also does not contrast the background enough, and could also be underlined to further convey it is a link. Color contrast was checked using WebAIM.org.

In addition, when clicking into the fields, it did not clear the placeholder text, nor did it place a blinking cursor in the field, which breaks Consistency and Standards. During user observations, users didn't know if they had selected the field or not. In the example here, some users might not know that Railway is an example font and it could confuse them.

On a different page, my recommendation was to move placeholder text to the labels and increase contrast. This lowers the amount of text and redundancy, improving Aesthetic and Minimalist Design.

Site before changes.

Site with more contrast and less text. Label spacing from its respective field was reduced.

Forms, Error Messaging

At first there wasn't much to Help Users Recognize, Diagnose, and Recover from Errors, but Modern Logic is in the process of providing explicit information about how you may need to update your forms, making sure they are complete.

In addition to the updated menu with completion warnings, on the last page, before you Submit your site they now include items that still need completion. However, the text could have higher contrast and the Submit button could say "Submit Your Site" to be more informative.