I created a website prototype that has two US Postal Service tutorials such as filling out an envelope and shipping a package. I utilized User-Interface Design laws and principles that I have learned this semester to ensure this prototype is very user-friendly.
Tesler’s Law states that every system has a given amount of complexity which cannot be reduced. Instead, the complexity for the user is shifted onto the developers and designers. Accordingly, I considered the following User-Interface Design laws and principles for a clean and concise prototype for my users.
Miller’s Law states that the average person can only keep five to nine items that are consciously being used in their working memory. Each tutorial in my prototype is between five to six pages’ total which fits within range given by Miller’s Law. Accordingly, the information given will be easily transferred into the user’s Long-term memory. In other words, this will make it easy for users to remember all of the information included in my prototype.
Chunking is a way to deal with intrinsic cognitive load by grouping information into smaller units. This ensures that the information given will not overload the user’s working memory. Each tutorial in my prototype is chunked into three to five different steps along with a home page. This makes it easy for the user to remember what is in each section of my prototype.
The Law of Proximity states that objects that are near or proximate to each other tend to be perceived as a group by people’s perception. In the envelope tutorial, I placed an orange rectangle close to a box of information on each step, so the user knows where the information should be placed on the envelope.
The Von Restorff Effect predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. Accordingly, I bolded the key words in each step of the tutorials, so those words will stay in the user’s mind when completing each tutorial.
The Zeigarnik Effect states that people remember uncompleted or interrupted tasks better than completed tasks. I implemented this effect by including a progress bar at the button of each page which shows the user how many steps are completed and uncompleted. Also, the envelope tutorial uses colors to show progress on the envelope. The light gray color represents the uncompleted tasks, and they turn dark gray as they get completed.
The Serial Position Effect states that users best remember the first and last items in a series. I used this effect by having essential first and last pages on each tutorial. The first page includes important information such as the title, materials needed, and a photo that displays what will be completed. The last page is a summary page of what the tutorial went over. This will ensure users will be left remembering essential information.
Fitt’s Law states that the time it takes a user to click on a target is dependent on how large, and how far away the target is. Accordingly, I considered this law by making the start buttons on the home page large and centered underneath its title, and the following pages have large, round forward and back buttons.
Hick’s Law states that the time it takes to make a decision increases with the number and complexity of choices. Accordingly, I considered this law by ensuring that there were only two choices for the user to click on which are the forward and back buttons during the tutorial. I also kept the navigation bar simple by only having three options. This increases the clarity of instruction provided on each page which reduces the Extraneous Cognitive Load.
Jakob’s Law states that users prefer your site to follow standard website conventions, so they already know how the site works based off other sites they have already used. My prototype follows this law by having the navigation in the top left of the page and the forward and back buttons on the right and left hand side of the page.
The Coherence Principle states that people learn better when extraneous content is not used, but instead, the website uses clear and concise language. Accordingly, I did not use any seductive details on any pages and kept my explanations very concise.
The Signaling Principle states that people learn better when there are visual cues that bring attention to the organization of the important content present. Accordingly, I bolded essential words on each page and used arrows to show where the user should look next.
The Multimedia Principle states that people learn better from corresponding words and pictures than from words alone. Accordingly, I used both words and pictures on each page to help users depict the content in a more intuitive way.
The Spatial Contiguity Principle states that people learn better when corresponding text explanation is integrated with the pictures on the page. Accordingly, I intertwined text explanation with images to build cognitive connections between the two parts which enhances German Cognitive Load.