I am glad to present you my 9 web rules guide, which is focused on programmers with no notions about UX and explains 9 essential aspects of web usability to take into account in any web development. I'm very grateful to have done this project with the support of Dani Amo, whom I want to thank very much. I hope you enjoy it!

1. ules
pol.vales@gmail.com
linkedin.com/in/polvales/
Pol Valés Rodon
WEB
R9

2. Show the user the fulfillment
of the requirements
Keep the user
informed while
the page is
loading
Continue
Done
The user must be informed that
the action was successful
Successful!
Sign Up
1. Visibility of system status
The user must be informed at all times
of the state of the system.
Capital letter
Lowercase letter
Special Character
Already registered?
I have read and accept the terms and conditions

3. 1. Visibility of system status
The first point refers to the visibility of the state. This concept refers to how well
the system's status is transmitted to users. Ideally, systems should always keep
users informed of what's going on by using appropriate feedback within a
reasonable amount of time. [1]
A simple example that can help make this point clear is the fact that every time
you try to upload a file to Google Drive, you can see how the system alerts the
user about the system status by displaying the number. of uploaded files and
the time left to complete the task. (Figure 1)
Another helpful example for a better understanding of this point is the
following. In the process of buying some jeans in an online store, you first
select some jeans from the product page, select the size and, finally, click ADD
TO CART and it turns out that the website warns that no stock available. This is
an example of poor visibility of system status.
However, if a tag already appeared on the product page indicating that there is
no stock available, the user would save time and his satisfaction with the web
would be better. (Figure 2)
Figure 1
Figure 2

4. Don’t exceed 7 elements
Miller's law says a person can remember
up to seven different elements. This leads
us to think that the navigation menus
should not have more than seven
elements
WE APPLY MILLER’S LAW RESPECT 7
“A very effective method of
presenting groups correctly is
Fragmentation”
2. Miller's law
George Miller
American psychologist
specializing in cognitive
psychology.
Limited Memory
Miller argued that humans
have very limited memory
7 elements
The North American
emphasized that we have a
visual memory capable of
remembering only seven
elements.
That is why we should not
have more than 7 items in
the navigation menu.

5. When it comes to usability and user experience, a question always arises. There is a relationship between usability and
psychology. Well, with this law, we see that it is.
Studies by George Miller indicate that most people store only five to nine items with short-term memory. This rule can
be easily applied to the navigation menu.
First of all, the information is received in sensory memory for a fraction of seconds after the stimulus disappears, then
it is transferred to short-term memory, which only holds one amount of information for less than a minute. After going
through short-term memory, information is forgotten or, if processed by repetition, for example, it can reach long-
term memory, where it can remain indefinitely.
One of the most widely used pieces of evidence to prove this law is the memory range of numbers. The results
obtained when applying the experiment to young adults who have received education and the result obtained are 7
elements (more or less two). Thus, as miller said in 1956, short-term memory can hold up to 7 items. [2] [3] [4]
In conclusion, we can draw the rule of using a maximum of seven items in our navigation menu.
2. Miller's law

6. New Tab
Search Google or type a URL
Apps
New Tabx-+
What if you try to close the window with a white background?
Apps
Can't you find it more complicated than in the window with the black background?
This is due to usage standards. No matter how innovative we want to be, we must not
overlook the conventions previously established and that users already have
internalized.
For example, in the case of closing the window the user already has a lot of interiorized
that the red color is the one that is associated with closing it and, therefore, we must
respect it.
The same goes for icons such as search or record, because it would
not be logical to use an eye or another type of microphone? It may seem
so and we may even like the design more, but we have to. to make the
assessment between following the standards and making it more usable
or prioritizing the design. In some cases, this is an issue of valuation, but
we must always keep this in mind.
3. Standards vs Innovation

7. 3. Standards vs Innovation
There are two key reasons for using standardized usability elements and getting a consistent website. When
designing a screen, the interactions between human cognition and the screen for which it is being designed must be
taken into account. Making things easier for users means not forcing them to learn new renderings or toolkits for
each task. Reducing the length of thought process by eliminating confusion is also a safe bet in improving usability.
[68]
The first reason is that using standards reduces learning. Utilizing standardized elements that the user already has
built-in, allows users to complete new tasks without having to learn a whole new set of tools.
The second reason you need to follow the standards and get a consistent website is that it eliminates confusion. Users
tend to apply rules they have experienced on other websites. Knowing this, one must be aware of whether or not the
user is causing confusion when using design innovations. Additionally, users should not have to spend time
wondering if different words, interactions or actions really mean the same within the context of the particular website.
When the user fails to reach their goal, they can be frustrated and frustrated, which results in a poor user experience
and is therefore poorly usable. [5]
One of the techniques for solving this is to apply UI elements as originally defined. Commonly used UI elements, such
as message windows, icons, scrollbars, and radio buttons, are graphical elements that are generally consistent and
have representations that are quickly understood by users.

8. For example, "radio" buttons should be used when the user can only choose one option. Instead, when you are
allowed to click more than one option, the checkboxes should be used. This is an example of HTML5 standards that, if
used correctly, can interact with the user very fast but, if misused in the UI, can cause a lot of problems with the
usability of the place. [6]
Another technique to take into account standards is to consider well-established conventions when choosing a
design.
This point is about this, there is a dichotomy between whether a designer has to innovate or "copy" the way other
people design their website. However, when designed with the user's perspective and cognition in mind, it is
important to understand that humans have a memory and an experience that leads them to place certain elements in
certain areas of the screen. This should be taken advantage of by reserving these locations for various graphic
elements such as the logo at the top left, the search field at the top right or the exit icon at the top right (in the mac
case, left). [7]
Option 1
Option 2
Option 3
Option 1
Option 2

9. +8%
-12%
-3%
The more options the user has
to choose from, the more his
d e c i s i o n - m a k i n g t i m e
increases as he tries to
contemplate all the options,
which makes it take longer to
choose.
So, for example, we have to
evaluate whether a screen
with twenty options is worth it
or better four screens with five
options per screen.
Reactiontime/Decision-making
Number of options
1 2 Too many
Low IQ
Mediu IQ
High IQ
4. Hick’s Law
6. Errors
7. Minimalism
8 Norman door
9. B.A.S.I.C
5. Carousels
1. Visibility of system
status
3. Standards vs
Innovation
2. Miller’s Law
4. Hick’s Law As the law tells us Hick-Hyman; "The time it takes to make a decision, increases as the number of options increases"
Reaction time = a + b log (n)
Where “a” and “b” are empirically defined constants
As we can see, the model establishes a logarithmic
relationship between the reaction time and the
number of options. However, in order for this to be
the case, the user must be clear about their need.
2

10. 4. Hick’s Law
Hick-Hyman (or Hick-Hyman) is named after a team of psychologists William E. Hick and Ray Hyman. In 1952, this
team set out to examine the relationship between the number of stimuli given and the reaction time of the user to
any stimulus. With this experiment, they realized that the more stimuli they chose, the longer it took the user to make
a decision about which one to interact with.
The formula representing this law is expressed as follows: RT = a + b log2 (n)
Where “RT” is the reaction time, “n” is the number of stimuli provided to the user and “a” and “b” are constants that
depend on the task being performed and the conditions on which it is performed. [8] [9]
So, how would it apply to the world of web usability?
The idea that a web designer has to stay with is that it is vital to separate the essential material from the secondary
options and to properly select the information to display in order to show only what is needed since in this way, the
stimuli received by the user are reduced and, as a consequence, their decision-making time is reduced. That is, Hick's
Law should be used when it is found that user response times are critical and can be applied to any decision-making
process where there are several options.
This is a very representative image of the concept to be
conveyed. As can be seen, the decision making of the user will
be faster in the third case, as the information is much more
segmented and the user needs less time and resources to
process it.

11. SCROLL
Ideally, don't use
carousels, as studies
show, users tend to pay
attention only to the first
slide. However, if you
want to include it, you
have to use the minimum
of slides.
A very high percentage
of users just look at the
first slide.
/ 5
1
M O R E I N F O
Carousels
CATEN
However, if you want to use it to display information you have to be careful not to overdo it by placing too many slides and
too much information because it would create the opposite effect.
!
5. Carousels

12. 5. Carousels
The image carousels on the homepage may seem like a good technique to make a dynamic effect and include more
information on the page. However, thanks to the different studies that are explained below, we see that it is not.
A study at the University of Notre Dame found that only 1% of visitors clicked on the carousel. In addition, the carousel
changed approximately 320,000 times in total, and of all clicks, 84% were on the first slide. [10]
"We have repeatedly tested rotary offerings on carousels and found that it is a poor way to present content on the
homepage." - Chris Goward, Wider Funnel.
"In all the tests I have done, the carousels have been ineffective. First of all, anything beyond the first sight has a huge
percentage of not being seen on our website. Second, the chances that the carousel will show the user what they are
looking for are negligible. Test after test, the first thing users do when they reach a page with a large carousel is to
scroll it and begin to search for items that bring them closer to their task. ”- Craig Kistler
"Carousels should show new content only if the user requests it. Instead, it should sit still and allow the user to read
the information quietly. " - NN Group

13. You entered the URL incorrectly or this
page is no longer here.
INCLUDE AT LEAST FOUR LINKS
Back to previous page
The error code must be replaced
with text indicating that the
requested page was not found. In
addition, the user should be given a
way out, by adding some internal
search engine or pages related to the
search he made.
Search...
6. Errors

14. 6. Errors
To make this point in the guide, Nielsen used a phrase: "It helps to recognize, diagnose and recover from mistakes:
error messages must be expressed in simple language, indicating the problem and give the user a solution. " [11]
Therefore, at this point solutions are proposed in order to meet Nielsen's goal.
As proposed in the principles of gamification [12], when designing error pages the user must be allowed to move to
other sites on the web or the option to return to the start. However, you should not make the mistake of displaying all
the content on the web and see if the user ends up finding what you need. A good technique is to offer the option of
returning to the start and displaying the main navigation menu of the website so that it does not cognitively overload
the user, who may already be frustrated by reaching a page. error, as Kathryn Whienton recommends in the article,
"Cognitive overload and usability don't go hand in hand." [13]
Airbnb's UX design director says that if a website has an extensive navigation menu or a lot of content, in general, it
should try to include up to four links in its error page. [14]
Apart from links, it is good to add a search engine to the error page to help even more the user to find what they are
looking for. Designer Steve Lambert even includes an explanatory video on his error pages. [15]

15. 7. Minimalism THE MORE OF LESS
CONTRAST
Colors have always been a great potential in web
design because it helps to establish both informative
and emotional connections between the product and
the user. We must try to squeeze out a small selection
of colors to the maximum and not include too many.
Feel the Colors

16. 7. Minimalism THE MORE OF LESS
We must seek to simplify interfaces by removing elements and
content that do not support user tasks. "You don't need more
space, you need less."
Images are the highlight in
minimalist design; They allow for
an emotional connection and
create an atmosphere. However,
we should not use images with
many elements that can distract
the user.
A 2015 study by Microsoft on the capacity of human care showed that the
average number of care declined from twelve seconds to eight. What can
we see with this? Well, we have a shorter attention span than a GoldFish
fish.
As designers, we need to adapt to this behavior so that people receive the
right and necessary information as quickly as possible.
Using contrast between elements can direct the user's
attention to important elements and make the text more
readable.
CONTRAST
Colors have always been a great potential in web
design because it helps to establish both informative
and emotional connections between the product and
the user. We must try to squeeze out a small selection
of colors to the maximum and not include too many.
Feel the Colors

17. 7. Minimalism
Minimalism is a word with a very wide meaning and used in various spheres of human activity. The dictionary gives us
the following definition: "Style or technique characterized by extreme simplicity." [80]
In this seventh point of the guide we would like to highlight five techniques that can help to achieve a minimalist
design and good usability. These six techniques can be categorized as: "Goldfish", Colors, Contrast, "The more of less"
and Images or Illustrations. A 2015 study by Microsoft on the capacity of human care showed that the average number
of care declined from twelve seconds to eight. What can be seen with this? Well, it has a shorter attention span than a
GoldFish fish. This is one of the cornerstones of minimalist design. What needs to be done, then, is to try to simplify
the interfaces in order to eliminate unnecessary elements and content that is not compatible with the user's tasks. [16]
[17] [18]
To create a minimalist interface, color must be used strategically to create visual interest. Minimalist color palettes
move away from the popular contradictory colors of web design of the 2000's. Minimalist designs are monochrome, or
use a different color to highlight the most important elements of a website that are usually clickable. In a study by NN
Group, almost half of the analyzed websites used a monochrome color palette, and the other half used one or two
accent colors in a monochrome color palette as well. For this reason, attempts should be made to squeeze as little as
possible from a small selection of colors and include few in order to create a minimalist design. [19]
One technique that is linked to the use of colors is Contrast. This technique helps us create a visual hierarchy and
allows us to create accents.
Ludwig Mies van der Rohe's famous phrase "The more of less" is the maximum representation of minimalism. This
technique makes the website convey a feeling of clean, tidy and higher quality. [20]
It should also be noted that the human brain processes images 60,000 times faster than text, and that 90% of the
information transmitted to the brain is visual. For this reason, a technique used in minimalist design is the inclusion of
representative images and / or illustrations in order to catch the user's attention and convey the concept faster. [21]
[22]

18. There are clues that tell your brain that
you have to push the door to open it.
When a design lacks these clues, we
turn that design into a Norman door.
PUSH
8. Norman Door
Don Norman tells us that a Norman door is one where
design causes us to think the opposite of what is
supposed to be done; a door that gives us wrong
directions and needs a tag to correct them.
The capacity for discovery has much to
do with simplicity. Tracks facilitate
discovery. For example, what do we
think of when we see this door? Do we
think we should open it out or in?
So how can we solve it?
The process that Don Norman proposes to us is to observe the
people who use it, to create a prototype, to test it and to repeat the
process.
On the other hand, we can also look for other prototypes existing on
other websites in order to focus on their users and thus create our
prototype from this base.
PULL
"If we need to put a label on our
design, does that mean it is poorly
designed?"
EXIT

19. 8. Norman Door
Norman's door name is given by those doors that have the effect of being pushed / pulled when in fact the opposite
has been done and are named after the author of "Design of Everyday Things." ", Don Norman.
The big question for Norman's doors is, "If something has to be labeled, is it badly designed?"
Most everyday design is understood because it is conditioned in the brain from the moment you learn to use it (no
"its" tag is put on a chair). However, some objects like the doors still have to be labeled. So the same thing is probably
happening in the UIs.
While the labels have been easy to remove from the past, they are currently trusted to clear up confusing designs. The
problem is that standardized icons and universally recognized icons have not yet been set. [23]
To better understand the concept, you can see in the figure above several "share" icons, which represent that they all
have the same function but there is no established standard yet. [24]

20. 9. B.A.S.I.C
There are several basic
questions about five
categories that we must ask
ourselves before launching a
webpage to the public. Next,
we list these five categories
and the different questions we
must ask each one:
Is it aesthetically pleasing?
Follow the company style
guide?
Beauty
B
Can everyone comfortably
browse the web?
Is it compatible with other
platforms?
Accessibility
A
Simplicity
S
Can the user achieve their
goals with little or no initial
instruction?
Intuition
I
Do you reuse existing
patterns / designs?
Consistency
C
Reduce user workload?
B.A.S.I.C

21. References
[1] Aurora Harley, 2018. "Visibility of System Status (Usability Heuristic # 1)." Source: https://www.nngroup.com/articles/visibility-
system-status/
[2] Khan Academy. "Miller's Law, Chunking, and the capacity of working memory." Source: https://www.khanacademy.org/test-
prep/mcat/social-sciences-practice/social-science-practice-tut/e/miller-s-law--chunking--and-the-capacity- of-working-memory
[3] Miller, G. A. (1956). "The magic number seven, plus or minus two: Some limits on our capacity for processing information.
Psychological Review, 63, 81-97. ” Source: https://psycnet.apa.org/doiLanding?doi=10.1037%2Fh0043158
[4] Atkinson, R. C., & Shiffrin, R. M. (1971). "The control of short-term memory. Scientific American, 225, 82–90 ”
[5] Euphemia Wong, 2019. “Principle of Consistency and Standards in User Interface Design”. Source: https://www.interaction-
design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design
[6] Gerry Gaffney. "Why Consistency is Critical." Source: https://www.sitepoint.com/why-consistency-is-critical/
[7] “UI Design Patterns for Successful Software - Course”. Source: https://www.interaction-design.org/courses/ui-design-patterns-
for-successful-software
(8) Mads Soegaard, 2019.``Hick's Law: Making the choice easier for users. '' Source: https://www.interaction-design.org/literature/
article/hick-s-law-making-the-choice-easier-for-users
[9] "Psychology of E-Commerce: How to Sell Online." Source: https://www.interaction-design.org/courses/psychology-of-e-
commerce-how-to-sell-online
[10] Erik Runyon, 2013. "Carousel Interaction Stats." Source: https://erikrunyon.com/2013/01/carousel-interaction-stats/
[11] J Nielsen, 1994. "10 Usability Heuristics for User Interface Design". Source: https://www.nngroup.com/articles/ten-usability-
heuristics/
[12] “Gamification principles for user engagement”. Source: https://datagame.io/gamification-principles/
[13] Kathryn Whitenton, 2013. "Minimize Cognitive Load to Maximize Usability." Source: https://www.nngroup.com/articles/
minimize-cognitive-load/
[14] Q&A WITH UX & PROTOTYPING GURUS, 2016. "Experience design and prototyping the Airbnb way: Q&A with Katie Dill."
Source: https://www.justinmind.com/blog/experience-design-and-prototyping-the-airbnb-way-qa-with-katie-dill/
[15] Steve Lambert. Source: https://visitsteve.com/404

22. [16] Kevin Mcspadden, 2015. "You Now Have a Shorter Attention Span Than a Goldfish." Source: https://time.com/3858309/
attention-spans-goldfish/
[17] Momcilo Dakic, 2018. “DesignSuccessful UX Design - A short overview”. Source: https://hackernoon.com/successful-ux-design-
a-short-overview-a3606305321f
[18] Study of EyeQuant. Clean design really is better. Source: https://www.fastcompany.com/90144106/stop-cluttering-up-your-
website-study-suggests-its-bad-for-business
[19] Kate Moran, 2015. "The Characteristics of Minimalism in Web Design". Source: https://www.nngroup.com/articles/
characteristics-minimalism/
[20] Mohammad Shakeri, 2013. "The how and why of minimalism." Source: https://www.webdesignerdepot.com/2013/07/the-how-
and-why-of-minimalism/
[21] Anne Trafton, 2014. "MIT neuroscientists find the brain can identify images seen for as little as 13 milliseconds." Source: http://
news.mit.edu/2014/in-the-blink-of-an-eye-0116
[22] D Vogel, G Dickson, J Lehman, 1986. "Persuasion and the role of visual." Source: http://misrc.umn.edu/workingpapers/
fullpapers/1986/8611.pdf
[23] J Nielsen. "The design of everyday things."
[24] L M Ming. "Why Isn't There A Standard Share Icon?" Source: https://www.fastcompany.com/3031872/why-isnt-there-a-
standard-share-button