Professional Documents
Culture Documents
UI-UX Final
UI-UX Final
Information Architecture is the combination of organization, labeling and navigation schemes. In other words,
Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile
applications, and social media software.A good IA helps users to easily find products, information, and functions.
If customers cannot find what they want, they will leave (loss of sales)
If employees can not find what they need, time will be lost. (loss of productivity). In Content site- “Search” should be
provided.
The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience
needs because IA puts user satisfaction as a priority.
. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If
the users face first bad interaction, they may not give the second chance to your product.
1. By Topic
2. By User
3. By product or service
4. By Task
5. By store or Department
Most large sites are hybrids which allow different ways of entering the site.Intermixing multiple schemes makes it
difficult for the user to form a consistent mental model. It creates a memory load for the user.
These are the groups or the categories in which the information is divided. Such system helps users to predict where
they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and
Matrix.
Hierarchical - its main goal is to present content on the carrier, be it a book page or poster, web page or mobile
screen, in such a way that users can understand the level of importance for each element. It activates the ability of
the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.
Sequential - This structure creates some kind of a path for the users. They go step-by-step through content to
accomplish the task they needed. This type is often used for the retail websites or apps, where people have to go
from one task to another to make the purchase.
Matrix - This type is a bit more complicated for the users since they choose the way of navigation on their own.
Users are given choices of content organization. For example, they can navigate through content which is ordered
according to date, or some may prefer navigation along the topic.
1. Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for the
users.
4. Audience schemes. The type of content organization for separate groups of users.
1. Shallower
Easy to access
2.Deeper
Easy to learn
Accurate
Labeling systems
This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of
information can confuse users. That’s why designers create the labels which represent loads of data in few words.
1. Users must be able to discriminate among choices. EX: Menu should not have two labels “Medicine Cabinet &
Pharmacy” which confuses the user when ordering medicines.
2. Good Labeling systems, Mimic user’s vocabulary and map those terms to expect meanings. EX: Starbucks has
coffee cup size labels as “Tall, Grande, Venti & Trenta”. The user will be confused if wanted a small cup of coffee.
3. Be consistent with web practices. EX: website menu should always follow standard menu labels like: Home |
Contact Us | About <your company>
Card sorting
Card sorting is a method used to help design or evaluate information architecture. In a typical card sorting session,
participants organize topics into categories that make sense to them and group them accordingly. To conduct a card
sort, you can use actual cards, pieces of paper, or one of several online card-sorting software tools.
Open — In open card sorting, each participant is given a stack of cards.The participants are then asked to group
those cards together in any way they want. Then they create labels for the groups that they chose. This method is
commonly used for new/existing information architectures (IA) or organizing products on a site.
Closed — In a closed card sorting, the researchers create the labels for their respective groups. Participants are given
a stack of cards and are asked to put each card into a group. This method is normally used when adding new content
to an existing site or gaining a second round of insights after an open card sort.
Easy & Cheap , Quick to execute , Established , Involves users , Provides a good foundation , Provides a good insight
Elements of UCD
1. In user-centered design, the user knows best and is the only guide to the designer; the designer's role is to
translate the users’ needs and goals into a design solution.
2. Activity-centered design focuses on the behavior surrounding particular tasks. Users still play a significant role but
it is their behavior rather than their goals and needs that are important.
3. Systems design is a structured, rigorous, and holistic design approach that focuses on context and is particularly
appropriate for complex problems. In systems design it is the system that are the center of attention while the
users’ role is to set the goals of the system.
4. genius design is different from the other three approaches because it relies solely on the experience and creative
flair of a designer. ’ In this approach the users’ role is to validate ideas generated by the designer, and users are not
involved during the design process itself.
Navigation systems
1. Navigation design is the discipline of creating, analyzing and implementing ways for users to navigate through a
website or app.
2. Navigation plays an integral role in how users interact with and use your products. It is how your user can get from
point A to point B and even point C in the least frustrating way possible.
3. To make these delightful interactions, designers employ a combination of design patterns including links, labels
and other UI elements. These patterns provide relevant information and make interacting with products easier.
1. Hierarchical Drill-down - The drilldown pattern allows users to select an item from a grid to see more details in
place of the grid.
Hierarchical Drill-Down navigation is appropriate when individual tasks must be completed or terminated
before others can begin.
Used to reduce large number of high-level menu choices, removing visual and cognitive clutter.
Provides "down and back" modal access; appropriate when users do not need to jump between tasks (or
categories).
Navigation menu is transient (disappears after selection).
Can be single-level or multi-level.
2. Persistent - Web site navigation that remains persistent in location, and, for the most part, consistently displays
the same links. Persistent navigation is always available at a given navigational level. Top Navigation , List Menu ,
hamburger menu.
3. Sequential Navigation - Sequential navigation- provides structure to procedural or step- by- step tasks. Types:Non-
modal tasks, Wizards, parallax.
4. Searching systems - to help users search for the data within the digital product like a website or an app. The
searching system is effective only for the products with loads of information when the users risk getting lost there.
Simple Search, Advanced Search,Faceted Search.
Index pages, Breadcrumbs, Quick links, Secondary windows, Utility links, Footer links.
Gestalt principles
an important set of ideas for any designer to learn and their implementation can greatly improve the aesthetics of a
design as well as its functionality and user-friendliness.
Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual
characteristics—e.g., menu icons—so users can understand information easily.
Grid layouts serve as the basis for design templates and standards.
Icons
Research suggests that visually distinct icons help users scan faster
Font size, style(serif, Sans-serif), spacing( proportional, monospaced), treatments(italics, underline, Caps, etc), font
families, legibility(text on images), text alignment( left, center, right), line length(reading efficiency).
Interaction is the point where a visual design is processed (cognition) and human action(motor response) is initiated.
Input Devices
Interface
Screen flow and sequencing, UI controls, Error and feedback messaging, Response times.
Data entry- single line, multi-line, formatted and masked text box, text box labels, alignment of labels on forms,
auto-tab, auto complete
Selection- drag and drop, radio buttons, check boxes, slider, toolbar, palette window, dropdown list
Navigation- Links
1. Screen elements refer to subsets or portions of a template that support specific user tasks.
2. Common screen elements and templates ensure consistency across your designs.
What is the difference between fixed, fluid, adaptive and responsive layouts?
Fixed
It does not appear that many new websites really use this layout anymore.
Fixed (aka static) layout has a fixed width in pixels. The ‘container’ of the website is programmed to not move (that’s
where the name ‘static’ comes from). This width stays the same independently of which screen size or resolution the
viewer has. It appears that the width of 960px is the most widely used size for fixed-layout websites.
The drawback is that when viewing such layout on smaller screens you get the hideous horizontal scroll, which ruins
the overview, experience an usability.
Fluid
With fluid layout you specify sizes not in pixels, but in percentages. Meaning, if the screen size changes, the
proportion of elements will stay the same. Neat!
The drawback is that on smaller screens the columns can get really narrow. Now imagine how a block of text in a
narrow and very tall cell looks like. Or, adding some elements like images and video which should stay of a fixed size.
This combination is asking for trouble.
Adaptive
Adaptive layout means that there are several versions of the layout which are displayed based on the screen size of
the viewer. Think of it as several fixed layout designs, layout A is displayed when the screen size is within size range
N — NN.
The benefit is obviously that the designer has more certainty that the user will have an optimal experience. Another
plus point is that the website with such layout should load pretty fast, because there is not much adjustments of the
size and position of elements going on when loading it — the server sends exactly what has to be loaded.
The drawback is that every layout should be designed with care, and that takes time and effort.
Responsive
Responsive design takes the best of the two worlds of fluid and adaptive design. There are several so-called
breakpoints, which divide all possible screen sizes in ranges. The interface has slightly (or completely different)
layout depending on the screen size it’s viewed on. Also, depending on the screen size, elements will stretch or
shrink accordingly. Responsive layout provides a custom experience for whichever screen size it’s viewed on.
• Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion
input controls
Checkboxes - allow the user to select one or more options from a set.
Radio buttons - Radio buttons are used to allow users to select one item at a time
Dropdown lists- Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more
compact allowing you to save space.
List boxes - List boxes, like checkboxes, allow users to select a multiple items at a time,but are more compact and can
support a longer list of options if needed.
Buttons - A button indicates an action upon touch and is typically labeled using text, an icon, or both.
Dropdown Button - The dropdown button consists of a button that when clicked displays a drop-down list of
mutually exclusive items.
Navigational Components
Search Field - A search box allows users to enter a keyword or phrase (query) and submit it to search the index with
the intention of getting back the most relevant results.
Breadcrumb - Breadcrumbs allow users to identify their current location within the system by providing a clickable
trail of proceeding pages to navigate by.
Pagination - Pagination divides content up between pages, and allows users to skip between pages or go in
order through the content.
Icons - An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system.
Information Components
Notifications - A notification is an update message that announces something new for the user to see. Notifications
are typically used to indicate items such as, the successful completion of a task, or an error or warning message.
Progress Bars - A progress bar indicates where a user is as they advance through a series of steps in a process.
Typically, progress bars are not clickable.
Tool Tips - A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the
item.
Message Boxes - A message box is a small window that provides information to users and requires them to take an
action before they can move forward.
Modal Window (pop-up) - A modal window requires users to interact with it in some way before they can return to
the system.
Its important to determine the resolution and screen sizes for which you will be designing.
1. Target resolution
• It should work at larger or smaller resolutions, but the target is where it will work best.
3. Special considerations
• Multiple monitors?
• Landscape or portrait?
4. Is your design the primary app or is it used in less than maximized state?
Index pages
Breadcrumbs
Quick links
Secondary windows
Utility links
Footer links
Hamburger Menus
When there is insufficient space to support tabs you can use a "hamburger" menu:-
The user needs random access to a large number of options.- The user needs persistent access to multiple levels of
navigation.-
Try to use in combination with other options such as tabs, tabs more, scrollable navigation.
Usually have dropdown or left-hand side drawer open to reveal menu options.
According to Jakob Nielsen, discoverability is cut almost in half by hiding main navigation. Out of site, out of mind.
Obvious always wins. Offers no "information scent."
Cascading Menus
- Referred to as "mega menus" when options are grouped into related categories and shown in one large panel.
What Is a Prototype?
A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its
suitability; A prototype can be anything from a paper-based storyboard through to a complex piece of
software, and from a cardboard mockup to a molded or pressed piece of metal. These included screen
sketches, paper and cardboard mockups, wireframes, and many post-its.
Uses of Prototype
• Prototypes are useful when discussing or evaluating ideas with stakeholders; they are a
communication device among team members, and an effective way for designers to explore design
ideas. The activity of building prototypes encourages reflection in design, as described by Schön
(1983) and is recognized by designers from many disciplines as an important aspect of design.
• Prototypes answer questions and support designers in choosing between alternatives. Hence, they
serve a variety of purposes: for example, to test out the technical feasibility of an idea, to clarify
some vague requirements, to do some user testing and evaluation, or to check that a certain design
direction is compatible with the rest of product development.
Low-Fidelity Prototyping
A low-fidelity prototype does not look very much like the final product and does not provide the same
functionality. For example, it may use very different materials, such as paper and cardboard rather than
electronic screens and metal, it may perform only a limited set of functions, or it may only represent the
functions and not perform any of them.
Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce.
They are simple, cheap, and quick to modify so they support the exploration of alternative designs and
ideas.
Low-fidelity prototypes are not meant to be kept and integrated into the final product. They are for
exploration only.
High-Fidelity Prototyping
A high-fidelity prototype looks like the final product and/or provides more functionality than a low-fidelity
prototype.
High-fidelity prototyping is useful for selling ideas to people and for testing out technical issues.
High-fidelity prototypes can be developed by modifying and integrating existing components – both
hardware and software.
Focus on basic page design, task flow, and usability issues.
Strengths:Greater depth of design feedback
Presentation close to the real thing
Allows for greater interaction
Limitations:Development investment
Ability to make changes easily
User openness to be critical
Consistent screen elements
• Reduce Learning : Consistency limits the number of ways actions and operations are represented,
ensuring that users do not have to learn new representations for each task. Further, establishing
design norms like following platform conventions allow users to complete new tasks without having
to learn a whole new toolset.
• Eliminate Confusion: Users tend to apply rules they’ve experienced outside of your website or
product, bringing in a set of their own expectations. Knowing that, we should be mindful of
whether or not we’re causing confusion and alienation when we deviate from design standards and
conventions. Further, users should not have to spend time wondering whether different words,
interactions, or actions actually mean the same thing within the context of your product.
Designing login panels
When designing standard login panels:
• Ensure the field tab order is sequenced.
• Reduce memory loads by providing auto-fill options (remember me on this computer)
• Incorrect login fields should return blank with simple error message explaining the error.
Tables
Tables are common, so define standard table presentation and interaction.
Column alignment:
- Left align in most cases.
- Align column headers to match the data below them.
- Right align numeric fields with values that the user is comparing.
- If the data are fixed length and column header is long, center the column header.
Row appearance:
- Use alternate row background shading colors to allow for easy scanning of data.
- For large lists, consider alternating the row backgrounds in groups (3 - 5 lines)
Scrolling allows you to browse through the content in its entirety from just one single webpage. Once the
scroll bar reaches the bottom of the page, new content loads automatically, allowing for endless scrolling.
Long scrolling can be used when the users expect one continuous flow. This is especially important for
users who use mobile devices, where scrolling is more intuitive. A pagination number bar is simply too
small to properly click on mobile.
Pagination is a technique where online content is divided across several webpages instead of being
lumped together in one giant brick of content.
Pagination can be used when there are natural breaks in the information or in forms when you need to
gather additional information based on what the user has entered.
A great example of pagination is a search engine results page.
Designing Content pages
Content page elements are the design spaces within which relevant information is organized and
presented to users.
Steps to Design an UT
5. Identify usability issues to be tested, write effective usability test tasks & scenarios.
Pilot test
Once all the preparation is done, do a dry run of the complete usability test.
• Tabulate data
• Prioritize findings
• Follow up
Remote testing
Remote tests are UTs conducted with the facilitator, participant & observers in different locations or with participant
working independently.
A-B Testing
A method of market research where comparative test of two or more entirely different full page design concepts,
layouts or looks is done.
Objectives:
To determine which full page design or design elements are the “best” overall.
Navigation/header/banner
(logo) Login/sign-in
Secondary content
List menu
Supporting content
(categories)