The Importance of Visual Hierarchy
Design Flaws Analysis
Recently, I learned of a medical website called drugs.com was flawed with design not following the human’s model of thinking. I used this website for searching drug interactions. After my first input of the drug name into the search box, I found nothing happened (FYI, the interface did change, but I did not notice that). Pic 1 shows the original state before I input anything. Pic 2 shows the result of adding the drug name. I typed the drug name again, and also tried different names, thinking there could be something wrong with the website. The system actually creates a new list called “My Interaction List” just right below the search box with all the drug names that I searched for. “My Interaction List” does not just come out for no reason. It actually has been mentioned in pic 1 in a regular font size. Even though it’s been bolded, it is still hard to notice the importance. It could have give users some levels of attention when the drug list was created under the search box. This design also requires users to take extra step - click on “Check for Interactions”, in order to get the interaction report. Commonly, if there is only one drug name on the list, the system would not generate a drug interaction report. I believe this system contains some design problems that make the searching function more complicated than it supposed to be. Suggestions will be proposed by comparing other websites with the same drug interaction checker function.
Suggestions and Rationales
The three designs displayed through out the pages all contain some features that I would like to integrate into the design of drugs.com for revision purpose.
Remove the “Add” button right after the search box. This button requires users to take one more step before they add the drug to the list. Users can actually choose from the drop down list with recommended drug name as not many patients would be able to memorize the exactly drug name. If that is wrong drug name, then the system would not be able to add it to the list.
Pic 1 doesn’t provides clear visual cues to users when drug list will be generated below the search box after they input the drug name. Hierarchies give users order to make sense of a design easily. If increase the font size of “Interaction List”, it will dominate and catch users’ eyes first, instead of letting the particularly big “Drug Interaction Checker” title overwhelm its importance. Bank mentioned in the article of “Understanding Web UI Visual Hierarchy” that placing contrast between two different elements positioned close together will generate interest (Bank 2015). Refer to the design from group one which were captured from rxlist.com, drug name is added to the drug list and confined in a square box with highlighted black and white color. This design gives clear visual hierarchy allowed users to focus on the relevant information (Johnson, p30).
Another way to create visual hierarchy refer to group two images from rxisk.com. Each feature is categorized by name with the same size, same color, and first letter capitalized (ex “Drugs”, “Add a drug”, “Interactions”). It is very clear and organized to let user quickly identify each function.
Taking off the social media sharing logos in the state of before searching. I think these are unnecessary functionalities displayed in this state as the drug interaction list has not even created.
The design of search box showed in group three images from webmed.com directly shows users direction to type in the drug names. The two search boxes defined with Medication 1 and Medication 2 do not allow any confusion to users, by reminding users to type in at least two drug names in order to obtain the interaction report.
Johnson, Jeff, Designing with the mind in mind, chapter 3 (p.30)Bank, C. (2015).“Understanding Web UI Visual Hierarchy”.Awwwards. Retrieved from: http://www.awwwards.com/understanding-web-ui-visual-hierarchy.htmlPic 1, 2 screenshot from drugs.comGroup one screenshot from: https://rxisk.org/tools/drug-interaction-checker/Group two screenshot from:https://www.rxlist.com/drug-interaction-checker.htmGroup three screenshot from: https://www.webmd.com/interaction-checker/default.htm