User interface design

User interface (UI) design refers to the process

to design interfaces in software or electronic devices, with the aim of facilitating the
interaction between the user and the device. In other words, the user interface is
refers to the part of the software or system that allows users to interact with it. The
User interface design focuses on maximizing usability and user experience.
user when interacting with the system, which involves the creation of visual designs and
functional, intuitive, easy to use and aesthetically pleasing.
User interface design involves considering various aspects, such as
the visual design, the layout of the elements, the navigation, the interactivity and the
user feedback. User interface designers must have
It accounts for factors such as accessibility, user experience, preferences of the
user and system requirements when creating interfaces that are effective and satisfactory
for the end user.
Some of the common tools used in interface design
users include graphic design software, prototyping tools, software of
interaction design and web development tools. User interface design
it is an integral part of software and application development, as a good interface
User engagement can make a difference in terms of product adoption and success.
The definition of user interface design may vary slightly depending on the
author or expert presenting it. Here are some definitions from prominent sources.
professionals in the field of user interface design:
Jakob Nielsen, an expert in usability and user interface design, defines the
user interface design as 'a process to produce easy-to-use interfaces'
to use and that provide a pleasant user experience.
Don Norman, a product design expert, coined the term 'design
centered on the human being" and defines the user interface as "a connection between
the user and the product that allows for interaction and understanding.
Alan Cooper, a pioneer in the field of user experience, defines design of
user interface as "the process of designing anything that has a
interface to allow user interaction.

Interface Principles
Visibility: All controls and interface elements must be visible.
Feedback: El sistema debe informar al usuario sobre lo que está sucediendo.
Restrictions: Physical and logical limitations must guide behavior of the
user.
Consistency: Standards and conventions must be followed.
 Mapping: Relationship between controls and their effects.

Mental models: The interface must reflect the user's mental model.
Learning: The interface must be easy to learn.

2. Jakob Nielsen:
Visibility of system status: The system must keep the user informed
about what is happening.
Match between the system and the real world: The language and terminology must
reflect the real world.
User control and freedom: Users should feel that they are in charge and
they can undo unwanted actions.
Consistency and standards: The interface elements must behave in
consistently.
Error prevention: The design must be able to prevent errors.
Recognition instead of recall: The interface should minimize the load of the
user memory.
Flexibility and efficiency of use: Expert users should be able to accelerate their
interaction.
Aesthetic and minimalist design: The interface should not contain irrelevant information.

(visibility and accessibility)

Usability principles:
According to Jakob Nielsen and Rolf Molich:

Visibility of the system status.

Coincidence between the system and the real world.
User control and freedom.
Consistency and standards.
Error prevention.
Recognition instead of recall.
Flexibility and efficiency of use.
Aesthetic and minimalist design.

According to Don Norman:

Visibility.
 Feedback.
Restrictions.
Mental models.
Consistency.
Learning.

Accessibility principles:
According to the W3C (World Wide Web Consortium), which is an international community that is
dedicated to developing standards for the World Wide Web (WWW). It was founded by Tim
Berners-Lee in 1994 and his main mission is to lead the web to its fullest potential.
ensuring its long-term growth:

Perceptible: Information and user interface components must be

presented to users in ways they can perceive.
Operable: User interface components and navigation must be
operable.
Understandable: The information and the functioning of the user interface must
be understandable.
Robust: The content must be robust in the way it is interpreted by
different technologies, including assistive ones.

WebAIM (Web Accessibility in Mind):

Textual alternatives.
Adaptable content.
Keyboard controls.
Enough time.
Avoid flashing content.
Clear navigation.
Reading and readability.

These principles serve as a guide for designing interfaces that are easy to use and
accessible to a wide range of users, including those with diverse abilities
and capabilities.

Interface design aspects

Alan Cooper:
Simplicity: The interface should be simple and clear for users.
 Visibility: Important controls and information must be visible.
Feedback: El sistema debe proporcionar retroalimentación clara sobre las acciones
of the user.
Metaphors: Metaphors must reflect the real world to facilitate understanding.

Ben Shneiderman:
Simplicity: The interface should be simple, making tasks easy and
direct.
Visibility: All control elements must be visible.
The system must inform the user about the result of their actions.
Restrictions: Restrictions must be applied to avoid errors and allow for easy
recovery.

Jakob Nielsen:
System status visibility: The interface must keep the user informed
about what is happening.
Coincidence between the system and the real world: The language and terminology must
reflect the real world.
User control and freedom: Users should feel that they are in charge and
they can undo unwanted actions.
Consistency and standards: The interface elements must behave in
consistently.

These aspects of user interface design focus on simplicity,

visibility, feedback, and consistency, key elements for a good experience of
user and an effective interface.
Ways of use and navigation
Direct mode: Users interact directly with the objects on the screen,
allowing a tactile and manipulative experience.
Menu mode: Users navigate through a series of options presented in
menu format to perform specific actions.
Command mode: Users enter specific commands via keyboard or
other input devices to control the system.
Form mode: Users fill specific fields with relevant information
to perform actions or complete tasks.
Linear navigation: Users follow a sequence of steps or pages in a way
linear for accessing information or completing tasks.
Tab navigation: Users can switch between different sections of
information or functions through visual tabs.
Tree navigation: Users explore information in a hierarchical structure.
deploying branches and sub-branches as needed.
Navigation through hyperlinks: Users click on links or buttons
interactive elements that take them from one page to another or to related content.

According to Bruce Tognazzini:

Ways to use:
Direct Manipulation: Users interact directly with the objects on the screen.
WYSIWYG (What You See Is What You Get): What you see on the screen is what you
obtains in the printed output.
Incremental Construction: Users build objects incrementally.
Navigation:
Breadcrumb Navigation: Users can see where they are in relation to the
site structure.
Progressive Disclosure: Show only the necessary information at any given time.
According to Jef Raskin:

Ways to use:
Intuitive: The actions and results are predictable for the user.
Convenient: The system adapts to the user's needs.
Efficient: The system allows users to perform tasks efficiently.
Navigation:
Zooming User Interface (ZUI): The ability to change the scale of information in the
screen.
Spatial Hypertext: The ability to organize information spatially.
According to Sherry Turkle:

Modes of use:
Customized: Users can customize their experience based on their
preferences.
Users can interact with others through the interface.
Navigation:
Networked Navigation: Navigating through interconnected information networks.
Virtual Navigation: Navigate through virtual spaces.
Visual design
The use of typography, symbols, color, and other static and dynamic graphics is
commonly used to express facts, concepts, and emotions. This composes a
systematic graphic design oriented to information that helps people to understand
complex information.
Effective visual communication for this system is based on some basic principles.
of graphic design. There are three factors that can be considered for the design of a
correct user interface: development factors, viability factors and factors of
acceptance. Development factors help improve visual communication. This
includes toolkits and component libraries, support for rapid prototyping, and
adaptability.
Color:
Discussions about color are often confusing because scientists, artists,
designers, programmers, and marketing professionals describe the color of
different forms. Some of these forms differ from the red, green, and blue that are based on
color system "RGB", familiar to users of devices with cathode ray tubes
cathode ray tubes (CRTs).

The following terms clarify concepts about this way of understanding color:
• Hue is the spectral composition of wavelength that produces
perceptions of being blue, orange, green, etc.
Value is the relative amount of lightness or darkness of a color in a range
from black to white (also called intensity).
Saturation (Chroma) is the purity of color on a scale from gray to the variant.
more vivid of the perceived color.

Brightness is the amount of luminous energy when creating color.

Color is one of the most complex elements when trying to design an interface.
correct chart. It can be a powerful communication tool used
correctly. Colors can be combined to take on a visual meaning.

Advantages of using color to facilitate communication:

• emphasize the important information.
• identify subsystems of structures.
• to carry natural objects in a realistic way.
• to bring time and progress.
• reduce interpretation errors.
• add dimensions to the encoding.
• increase comprehensibility.
• increase credibility and appeal.

The importance of color is to communicate; color codes must respect usage.

existing professional and cultural associations of certain colors. The connotations vary
strongly regarding the different types of users, especially when they are from
different cultures. The connotations of color must be used with great care.
ICONS: They are small hyperlink graphics that:
• In isolation
• Accompanied by a hypertext
• Accompanied by a label
• Accompanied by a 'tooltip'
Use standard ideographs to represent navigation actions. For
specific navigation actions of our site: it is preferable not to use icons, or, of
use them, accompany them with a label. In most cases, it increases usability.
simple hypertext, or a button generated only with text and the appropriate style classes
to give it the appearance of a button. The sizes can be variable, although it has been
demonstrated the same effectiveness for the micro icons and they have a noticeably weight
lesser
• 40 X 40 pixels Weight < 1 KBytes.
• 20 X 20 pixels Weight < 300 Bytes.
• 12 X 12 pixels Weight < 100 Bytes.

RESPONSE TIME AND FEEDBACK

In an interactive system, visual feedback is all
graphic form of communication that goes from the system towards the user. Despite the fact that the
visual feedback is a software component that is difficult to develop and difficult to
designing to guide and make the user's task easy, Human-Computer Interaction
(IHC) like the area of Software Engineering have proposed various until today
techniques for designing and developing visual feedback without having a consensus. This
work predicts the patterns of interaction as a unifying mechanism between the
Software Engineer and HCI to design visual feedback based on
context of the user's task, while also allowing communication between specialists
involved in its development. When an interactive system is evaluated, it cannot be
set aside the study of visual feedback that
it corresponds to the form of visual communication that goes from the system to the user.
Feedback takes place in the application's interface in the form of expressions of
output (e.g., windows, icons, sensitive maps, error messages), in order to inform the
user about the effect of their actions and on the current state of the system. For this
effect, feedback should be informative, understandable and should be carried out in a
reasonable time to the user's task.
Visual feedback is a factor that pertains to both software engineering.
how HCI contributes respectively to the utility and usability of a
interactive system. The utility concerns the functionality of the system software
characterizing it for what it was made for. Usability concerns guiding appropriately
to the user in their task and make the system easy to use.
Despite the importance of this dual role of feedback and its presence
predominant in the current Interactive Systems (IS) unfortunately has not
studied a design mechanism that allows finding a compromise between the
factors of Software Engineering and HCI. On the HCI side, a proposal has been made for a
a large number of ergonomic recommendations for visual feedback, but without
specify 'how' to design and materialize visual feedback in an IS.
Now, on the side of Software Engineering, there are numerous programming techniques.
visual and CASE tools have been proposed to develop software components
for visual feedback. However, these components are strongly
dependent on the programming details (e.g. coding language and the box
of tools to be used).
Internationalization

The concept of internationalization applied to websites and, in general, to any

software development refers to the process of designing and building software
a way that adapts to different languages and regions without having to modify the code or
make variations in computer engineering.
The process of software internationalization aims to facilitate the subsequent
localization of the software product.
It is an expensive job that computer engineers undertake when coding the
website and that, in the long run, leads to significant savings in globalization plans of
companies, by greatly facilitating the localization process into other languages.
We detail some of the considerations that are most taken into account:
The functionality of the website is common in all languages and should not be
localized. Therefore, it is separated from the user interface, which must be localized.
various files to update the content without affecting the graphic design
from the page.
It is important that the user interface allows variations in spacing or
transliteration capabilities so that any user can input
text.
 It is advisable to plan the company's globalization project.
so that programmers can collaborate with the translation agency of
a webpage for incorporating the specific instructions needed in
the source code.
Location:
Website localization is the process through which software is adapted to
a specific language and culture so that users obtain an optimal
browsing experience.
Website localization is an essential resource for any company that wants to
sell their services or products in international markets. Not in vain, localization
is responsible for all the content that the user sees. Since the first impression is the
what matters is the effect that the usability of our website has and the experience of
user on their first visit will decide if they return.

Localization implies much more than translating. Collaborate with localizers.

professionals guarantee you:
A thorough knowledge of the target language and culture.
Application of the appropriate terminology and the adequacy of the elements
graphics and the formatting conventions specific to the place
Adaptation of payment methods, currency, sizes, measurement systems...
Whatever symbol or element is used must be correct.
A good website localization avoids absurd mistakes or even
offensive in the target audience's culture.
The localization makes the user perceive that the website has been created
in their language.

Differences between both concepts:

As you can see, the internationalization and localization of web pages are not the same.
the same, although both are part of the companies' globalization strategy and
A good development of both is essential to achieve success.
Podríamos decir que la internacionalización conforma la estructura interna de la página
web that allows locators to adjust it more easily to very audiences
different so that each culture perceives it as its own.

Metaphorical and conceptual models:

Types of metaphors.
Organizational metaphors
They are based on the existing structure of a group, system, or organization.
For example: a supermarket website may be organized by departments
or sections like 'physical' supermarkets. Bakery, butcher shop, hygiene, cleaning...
In this way, the user applies their real-life knowledge to the website and can
start to move.
It is important for the user to find meaning and usefulness in the metaphor: if it is a site of
purchases, it is not advisable to organize it as a reflection of the corporate structure of the
company, which is something that the user does not understand and that will also be useless to them in their
Shopping task.
Functional metaphors.
They rely on tasks or functions that the user can perform in their daily life.
Example: Adobe Photoshop or MS Word and in general all the programs that work
Under window systems, there are the functions Copy, Cut, and Paste, which allow for
the user understands how to reuse part of their work in the same or different
applications.
Visual metaphors.
They are based on familiar graphic elements for most people. For example: a
music site where users can listen to songs, they can be provided with
of three icons 'Play' 'Pause' and 'Stop', which are already familiar to you on all devices
CD, DVD, etc...
Using metaphors is not designing with 'style'.

It is necessary to help the user understand what the system offers them by avoiding confusion or
the use of inappropriate metaphors. Many designers confuse the act of applying
metaphors in their work with a modern or groundbreaking design. It is better to do without
metaphors when they can mislead the user unless this "disorientation" is
one of the objectives of the system in virtual environments, gaming and/or learning in
those in which exploration plays a significant role.

The conceptual model of a software system constitutes an external abstraction that

describe using diagrams and notations with varying degrees of formality the
knowledge that a person must have about a system, knowledge that is
find stored in Long Term Memory.
Conceptual designs are divided into:
User mental model.
Designer mental model.
Final image of the system.
Mental Model.
Those ideas, which, when established in the brain, determine the beliefs of the being.
human and influence their actions. A good design is one that faithfully interprets the
user mental models. They are formed through experience, training and
instruction.

Psychology of HCI.
Just as in business activity, it started with a clearly defined orientation.
productive, and throughout the last century and what we have of this one, this has been changing.
orientation to focus on the client as the first and last objective of it, the design
the development of software programs has evolved from its initial conception to the
problem solving, rarely taking into account the very problem of using
such programs, towards improving the user experience, through application of
guidelines in interface design.

But once again, just like in the business environment, this is not always the case, and it is not
It is mainly due to the lack of focus of the people who make up the team. So
Well, the computer scientist usually focuses their objectives on robust, efficient, effective design...
even Machiavellian in its programs, that is to say, it often focuses mainly on the
technical, and not on the user to whom it is directed. On the other hand, the training of designers.
it addresses technical aspects such as color theory, digital photography, the combination of
styles, guidelines and standards, or in subjective aspects such as models of
graphic communication, always with the aim of pleasing and even conveying something to the
user, but rarely thinking that he is going to be a participant in this.
In summary, the computer scientist seeks for their program to have great functionality with a
great technique and the designer that is beautiful and attractive above all. And it is not always
They combine both objectives to give the user what they really want or need. And
this even in large projects with great success, such as Facebook.
But it is also true that interface design is becoming more professionalized every day.
of research in such varied but related fields as psychology
cognitive, the psychology of communication, linguistics, information theory, the
accessibility and usability, artificial intelligence, usage mining or interfaces
adaptive, from which currently eight generic golden rules emerge in the
interface design.
Consistency: One of the most important aspects to consider in design
interfaces is to achieve its consistency throughout it, but it is also one of
the rules that are most often broken. Consistency means a composition of color,
homogeneous styles and fonts throughout the interface, but also a use of language and
the terminology, some methods of assistance, a way of error recovery and even
a way to react to program actions consistently throughout the
same.

Universal usability: In this blog, we already addressed this aspect when we talked about the
Center of Universal Design or the Build for All project. In any case, usability
universal refers to both the different socio-cultural aspects in the case of
global applications, such as web applications, as well as aspects
psychological and learning aspects, such as age ranges, disabilities, or the
differentiation in general between the beginner and the expert in the use of applications of
desk.
Informative feedback: At all times, the user must know the status of
system and its actions, for which it is necessary that the same interface offers a
rich feedback but without overwhelming the user with information, making use of
principles of universal design to show feedback to a greater or lesser extent
based on the user's capabilities.

Conducting tasks: The interface is a means of communication between the user who wishes
perform a task with the system and the system that carries it out. The system will be
organized to carry out tasks in one way or another, and the interface must facilitate the path
the user from the beginning of it until its completion, guiding the process in
at all times, taking the opportunity to efficiently feedback and to apply
universal design principles that allow for the construction of shortcuts or free from
overload of confirmations for the advanced user, of course always maintaining the
consistency in the modes of use.

Prevent mistakes: As Sigmund Freud inscribed in his portrait, "There is no medicine

against death and against error, no rule has been found, since an error
It can appear at any moment, it should be avoided as much as possible from the design of the
interface where the user can make mistakes in data entry, in the stages
resolving tasks and in general in everything that may compromise the
system consistency. In case of errors, it must allow a
system recovery, either automatically or by correctly informing the
user, indicating the error that occurred, the reasons and the means to resolve it, and for
assuming, being consistent throughout the entire application in this task.

Undo actions: There is nothing that gives greater control than security, and security
It occurs especially when there is no fear of making mistakes. One way to not be afraid of the error.
The error is to allow easily undoing actions that have led to a mistake.
If an undesirable situation occurs and the user has the ability to handle it
simple to reverse that situation, will give you greater security about the realization of the
task and therefore will enhance their learning and improve their user experience. This is
possible in certain applications, for example, an erroneous entry in a processor of
text is easily restorable, on the other hand an incorrect entry in a process of
the loading of accounting entries is not that much. A commitment should be reached, but in
In any case, the possibilities of restoring safe system states are
positive for both the system and the user of it.

Provide support to the internal locus of control: It means making users 'initiators of
actions that gain control of the system, so that they are the ones who dominate and command
the actions and the system respond to them, all based on the user interface. For
Hello, tedious data input sequences must be eliminated, the difficulty in
to obtain the necessary information by requiring excessive information or excessive steps, the
difficulty in carrying out certain actions... The simplest example is usually the
bank interfaces, where each action normally requires an input data
linked to a previous action, but without continuity between them.
User Interface Design Patterns

When creating new digital products, we will always look for common ground. This has
what to see with the confidence that our platform will convey, since there are basic actions
of users who must be born by instinct. In this sense, there will always be patterns
common and not necessarily, new elements.

Learning to live with them and use them positively will depend on us and the vision.
strategic of our project. That's why today, I help you understand what its
functionality and why they are "inevitable".

What are design patterns?

As its name indicates, they are elements or components that we observe repeatedly.
in the digital products we use. These provide us with recurring solutions to
common design problems.

As constant consumers of information, we are accustomed to certain

visual components function in a specific way. For example, the 'Tabs' are
used to solve certain contents where the user does not need to change from
page. In them, the problem or context requires that the content be separated into
sections. The tabs allow access to the different parts through an area of
unique content that does not refresh the page when clicking on each section.

Examples of Tabs

From experience and habit, we recognize a visual structure that we have already seen.
before. Therefore, the user may perceive that if they click on an object in the interface,
this will give you a response. Trying to break these mental schemes or innovate
too much in them can cause users to become frustrated. In these cases, the
Expectation about the expected response is a great indication.
What are design patterns used for?
Although design patterns originated from architect Christopher Alexander to be
later introduced to software development, they are used in different
disciplines. Its essence lies in the fact that a pattern is a solution to a recurring problem
of design. From this point of view, for a solution to be considered a pattern
Its usefulness must be verified. This means its effectiveness must be confirmed.
solving similar problems in other digital contexts. Therefore, each pattern must
be reusable.
Patterns allow the creation of components that provide effective solutions. With them, the
work teams will not have to spend hours trying to reinvent the wheel, but rather
adapt it for a specific use, streamlining the development processes in general.
The use of design patterns can be easily seen, as they help to
notably improve the user experience. As I mentioned earlier, the
users have behavior habits regarding digital devices, therefore,
we can anticipate these behaviors to create less friction at the moment when
they use digital products.
Common design patterns
These are some examples of patterns that are frequently used on sites and
applications and that you can surely identify them.

Carousels:
Cards:

Notifications:

User interface modeling:

The user interface is composed of intuitive and appealing elements, designed to

provide a smooth experience for users. At the top, there is a bar
navigation with clearly identified options, allowing users
easily access different sections of the application or website.
In the center of the interface, there is the main content area, where it
they present the data and relevant information. Depending on the nature of the
application, there may be cards, lists, or interactive panels that display the elements
main. A clean and spaced design can be used to highlight the information
more important and facilitate readability.
Additional panels can be included on the side or at the bottom of the interface.
such as drop-down menus, filters, or search tools, so that users
they can personalize their experience and quickly find what they are looking for.
The user interface may also include interactive elements, such as buttons, icons.
or links, which allow users to perform specific actions, such as sending
forms, log in or share content on social media.
Additionally, it is important to consider accessibility when designing the user interface.
ensuring that the text has adequate contrast, that labels are used
descriptive for interactive elements and that there are accessibility options for
users with visual or motor disabilities.
In summary, the user interface design aims to facilitate navigation, highlight the
relevant information and provide a pleasant and functional experience for the
users.