ExampleSiteEvaluationJustification

1 | P a g e
Example UI/UX/IA Recommendations
Example Document
UI/IA/UX RECOMMENDATIONS
PREPARED BY : DESARAE VEIT
DESARAE.VEIT@GDIT.COM
Table of Contents
1 Update CSS: Optimize, Remove Redundant Code, and Minify 4
1.1 Problem Summary 4
1.2 Example 4
1.2.1 Current 4
1.2.2 Recommendation 4
1.3 Solution and Usage 5
2 Layout 5
2.2 Example 5
2.4 Rationale 6
3 Workflow and Wizards 7
3.2 Example 7
3.4 Rationale 7
4 Alerts, Tips, and Messages 7
4.2 Example 8
4.2.1 Current 8
4.2.2 Recommendation 8
4.4 Rationale 9
5 Global Styles and Consistency 9

2 | P a g e
5.2 Example 9
5.4 Rationale 9
6 Forgiving Formats 10
6.2 Example 10
6.4 Rationale 10
7 Keyboard Shortcuts 10
7.2 Example 10
7.4 Rationale 11
8 Notifications 11
8.2 Example 11
8.4 Rationale 11
9 Discoverable Controls 11
9.2 Example 11
9.4 Rationale 12
10 Breadcrumbs 12
10.2 Example 12
12
10.4 Rationale 12
11 Navigation 12
11.2 Example 12
12

3 | P a g e
11.4 Rationale 13
12 Relogin 13
12.2 Example 13
13 Additional Recommendations & Questions 14
14 Resources 15
14.1 Glossary 15
14.2 Images and Figures 16

4 | P a g e
1 Update CSS: Optimize, Remove RedundantCode, and Minify
1.1 Problem Summary
Example Site’s stylesheet is disorganized with excess lines, in-line styles, and formattingthat is not web standards compliant.
Some CSS is in the stylesheet multiple times.
1.2 Example
1.2.1 Current
body {
margin: 0;
}
body .ui-tooltip { border-width: 2px; }
.catalystgrid-align-right {
text-align: right !important;
}
.catalystgrid-align-left {
text-align: left !important;
}
.catalystgrid-align-center {
text-align: center !important;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.428571429;
color: #333333;
background-color: #662624;
}
Note: excess spaces and repetitive use of classes (REAL CODE CURRENTLY IN USE)
1.2.2 Recommendation
1.2.2.1 Recommendation SASS (before processing)
.right {
text-align: right !important;
}
.left {
text-align: left !important;
}
.center {
text-align: center !important;
}
body {
margin: 0;

5 | P a g e
font: 12px Arial, Helvetica, sans-serif;
line-height: 1.428571429;
color: #333333;
background: #662624;
.ui-tooltip {
border-width: 2px;
}
}
1.2.2.2 Recommendation CSS (After processing)
.right { text-align: right !important;}.left {text-align: left !important;}.center
{text-align: center !important;} body {margin: 0;font: Arial, Helvetica, sans-serif
12px;line-height: 1.428571429;color: #333333;background-color: #662624;}body .ui-
tooltip { border-width: 2px;}
1.3 Solution and Usage
This is a real example of existing code and recommendations for fixing it. While it is only a sample of a larger body of code ,
hundreds of lines need to be tested and updated. Due to the vast number of code and scope of time it would take to record
every line of code only a sample has been provided. Please note, that SASS may be written exactly like CSS, but also has a
variety of time-saving solutions including being able to indent child classes, an example is provided above. Minifying CSS,
reducing redundant names, spaces, and files will increase page load time.
Time Estimate: 2 hours
Importance: High
 Layout CSS in a logical order with layout comments to make finding styles faster.
 Write a style guide and build a pattern library to offer future designers and developers a resource for findingstyles
quickly, this is default for most HCSD App Dev projects.
 Remove all in-line styles throughout the website and only use CSS. Implement CSS styles in place of in-line styles.
 Use SASS to manage CSS, compress stylesheet, and implement sprites. SASS is a preprocessor that can automate
compression of stylesheets, merge stylesheets, do math, create mixins, create sprites, and remove comments.
2 Layout
2.1 Problem Summary
The current Example Site’s design has a fixed minimum body width of 1200px. Responsive user-centered design allows a
website’s layout to be structured in a way that is both web standards compliant, easily visible in all browsers, wit h a structure
that all of the content, images, and structure remains usable on any device or viewport (screen) size. Currently the site is only
easily usable with a viewport width of 1200px at 100% resolution. The current design may not be accessibility-friendly for
users who need higher screen resolutions, have smaller browsers, who minimize their browser, or require zoomed viewports.
2.2 Example

6 | P a g e
body {
position: relative;
margin: 10px;
min-width: 1200px;
}
WEBSITE SCREENSHOT GOES HERE
FIGURE 1 SCREENSHOT OF ANALYSIS REPORT AT 1440PX WIDTH
FIGURE 2 DASHBOARD AT 1250PX WIDTH
A responsive design involves structuring the current design layout so that all of the content, images, and structure remain
the same or similar on any device or viewport width. When the user retracts the browser the website would adjust to the
screen size allotted without horizontal scrolling.
Recommendations:
 Bootstrap framework
o Some bootstrap elements are already being used throughout the site, but have been randomly added to
the main CSS, these should be removed from the main CSS
o Bootstrap offers SASS integration
 Remove the minimum body width
 Create a responsive style sheet
 Responsive/Semantic/Validated Web Design is more efficient for screen readers, bots, and data loading
Time Estimate for removing the body width: Less than 10 minutes (the shortest time estimate provided is 10 minutes
even if it takes less time)
Importance: Medium
Time Estimate for Responsive Design: 10-80 hours
Importance: High
2.4 Rationale
Responsive design is commonly referred to as mobile-first design; While the Example Site may not have users who require a
website that is mobile friendly responsive design caters to desktop users who need to squish the browser to a smaller size,
Navigation is
partially off
screen

7 | P a g e
smaller display screens (minimum commonly used is 850px), and allows for users with vision impairments to adjust the
screen to larger sizes. Responsive design is not an enhancement, it is a standard minimumfor UI/UX design best practices.
3 Workflow and Wizards
3.1 Problem Summary
Guiding users through common processes to provide a pattern that will allow the user to quickly complete tasks. Including
in-line recommendations, tool tips, and links to usefulresources
3.2 Example
FIGURE 3 REPROT INPUT FORM AS A QUESTION QIZARD
See also QIES Redesign
Strip away any menu items, links, or excess content to tunnel users toward goals. Close off detours fromdesired behavior,
record in IA/UI/UX documentation common use cases and intended behavior, and implement analytics. Tunnel users
through a decision process by removing all unnecessary functionality that can hinder completing a process flow.
 Completeness meters provide users with a visual representation of their progress toward completing a goal.
 Anticipate frequently selected items and make data easy to enter with default or previously entered data.
 Analytics provide valuable data about bottle necks, detours, and drop off points.
 IA/UI/UX documentation provides designers and developers with valuable information regarding standardized
code and requirements for design on a project.
Lead users through a predetermined sequence of actions,step by step.
Time Estimate: TBD
Importance: Medium
3.4 Rationale
Tunneling makes it easier to go through complicated processes. Tunneling controls whatthe user experiences including
content, pathways,and the nature of activities. In a controlled tunnel, such as a wizard, users may or may not be provided
with the number of steps it takes to complete the process. Tunneling is effective because it provides the user with
consistency.
4 Alerts, Tips, and Messages
4.1 Problem Summary
Improve goal completion by providing on-site feedback like in-line validation,tool tips, title tags, required fields markers,
recommendations, and links to useful resources per page. The user wants immediate feedback about entered data.

8 | P a g e
4.2 Example
The user doesn’t know what kind of data to enter in an input field.
4.2.1 Current
FIGURE 4 EXAMPLE SITE - POPUP ERROR MESSAGES
FIGURE 5 HELP NAVIGATION
FIGURE 6TOOLTIP ICON AS A LINK
4.2.2 Recommendation
4.2.2.1 Inline Validation
FIGURE 7 INLINE VALIDATION
FIGURE 8 CSS TOOL TIP WITH LINK TO HELP DOCUMENATION FROM APII
FIGURE 9 INLINE CSS TOOL TIPS FROM APII (SEE ALSO CQRS, QIES, CCW, NPPES, NHS)

9 | P a g e
Remove help link frommain navigation next to on page help tool tip icon. Make tooltip icon a CSS title tag popup with
options to go to various recommended sections of the help documentation based on the page. Change all popup messages
to persistent on-page messages with classes: informational, warning,or error. Offer inline validation and tooltips. Show
instructions,examples, or hints to help users figure out what they need to enter into fields. Consider using a conversational
pattern. HTML5 allows easy implementation of inline text that can appear as placeholders inside of the input field.
Alternatively, hints may be provided as title tag tool tips or as explanations in plain text above/below the input fields.
 Inspect and validate user input as it is entered, rather than waiting for themto hit the submit button.
 Remove modal messages or edit them. Move content on-page. Reference:
http://www.smashingmagazine.com/2014/09/15/making-modal-windows-better-for-everyone/
Time Estimate: TBD
Importance: High
4.4 Rationale
N/A
5 Global Styles and Consistency
5.1 Problem Summary
Inconsistent layouts and flow make it hard for users to recognize objects, patterns, and layouts.Application does not always
follow a consistent pattern for itself or compared to common uses online. Reduce complex behavior to simple tasks.
5.2 Example
 Minimize the amount of cognitive energy spent by users inputting data.
 Instead of asking users to recall data from memory, present a list of items such as a category of data or recently
used data.
 Minimize the need to recall information by memory.
 Use accessible menus, multiple choice options, auto-complete suggestions, or visual imagery to aid decisions.
 Remove redundant material and buttons to clear up real estate and make it easier to navigate pages (multiple
buttons).
Time Estimate: TBD
Importance: Medium
5.4 Rationale
Recognition is triggered by context. Consider an address field, standard practice is to layout addresses in web forms like it
would appear on a post-letter. When an address appears in line or out of order users may struggle or find the formlayout
inconvenient.
It is easier to click and choose from option than it is to write out a list of options frommemory. Recognition tasks provide
memory cues that facilitate memory recall and improve effectiveness.

10 | P a g e
6 Forgiving Formats
6.1 Problem Summary
User wants to enter data without worrying aboutformats
6.2 Example
5555555555 vs. 555-555-5555
 Accept multiple formats and variations.
 Make the system interpret complicated logic rather than the user.
Time Estimate: TBD
Importance: Low
6.4 Rationale
N/A
7 Keyboard Shortcuts
7.1 Problem Summary
User wants to quickly complete certain tasks
7.2 Example
Dropbox, ASANA
Keyboard shortcuts are not just for accessibility. They come in handy for repetitive tasks, navigation, walk through tours, a nd
generally increase the usability of the application.
 Add shortcuts and hotkeys to the app that allow users to performcertain actions quickly instead of navigating
 Skip Navigation
 On page mapping
 Help documentation
 Include keyboard shortcuts popover

11 | P a g e
 Include walk through tour and quick tips
Time Estimate: TBD
Importance: Low
7.4 Rationale
N/A
8 Notifications
8.1 Problem Summary
User wants to know when reports have completed or new activity/actions are ready. User has to wait to do something while
one action completes.
8.2 Example
N/A
 Allow some processes to complete in the background.
 Highlight recent activity by visually marking new content.
 Provide notifications at top of page as a banner or numbered badge in the menu. This can also be used to list
recent system updates.
Time Estimate: TBD
Importance: Low
8.4 Rationale
N/A
9 Discoverable Controls
9.1 Problem Summary
User wants quick access to controls that are secondary or only relevant to specific sections.
9.2 Example
Pinterest hovers (invisible controls)
Users can usually access invisible controls by either tabbing, hovering over content, or scrolling through a sit e. This allows
certain actions to stay off-screen and saves real estate by offering a cleaner interface.
 Clear up clutter and let users discover actions when they need them.
Time Estimate: TBD
Importance: Low

12 | P a g e
9.4 Rationale
N/A
10 Breadcrumbs
10.1 Problem Summary
User needs to know the location on the website’s hierarchical structure in order to possibly browse back to a higher level in
the hierarchy.
10.2 Example
Show the labels of the sections in the hierarchical path that leads to the viewed page. Each label has links to their respective
paths.
 The current page is not a hyperlink.
 Separated characters are not links.
 The labels match the titles of that section identically.
Time Estimate: TBD
Importance: Low
10.4 Rationale
Breadcrumbs show the users where they are in relation to the site’s hierarchy. This allows the user to quickly familiarize and
map the site internally. Understanding how information is structured allows the website to be more easily understood.
Breadcrumbs may not be used by everyone, but they take up minimal space.
11 Navigation
User needs to navigate among sections of a website while having a clear indication of what section they are currently looking
at.
11.2 Example

13 | P a g e
It is usually easier for a user to navigate a menu that is wider with more sections than to use multiple sub-categorized links.
Highlighting the active page in the navigation or including breadcrumbs allows the user to quickly visualize which page they
are on. A horizontal bar may contain different parent sections or categories, while each sub-section may be represented by
tabs or clickable links. Icons may help separate multiple links and highlight important material.
Time Estimate: TBD
Importance: Low
11.4 Rationale
N/A
12 Relogin
When logged in, the system will redirect user to login screen. Once authentication has passed user is directed to a question
screen saying they are already logged in. When one page is closed, multiple are closed and user is forced to logout of the
system.
12.2 Example
If No is selected:
http://example...

14 | P a g e
 Remove target=”_blank” tags fromall links.
 Remove target=”_blank” tags fromnavigation menu.
 Maintain the same session on all open pages within the browser.
 Do not question a user about ending a prior session within the same browser, or force them to log back in.
Time Estimate: TBD
Importance: High
13 Additional Recommendations & Questions
 What will go on the dashboard?
 In the subset list default to view all.
 Why does the report section have empty tabs?
 Why is the view report tab visible but disabled?
 What does the summary analysis details button do?
 Add descriptions for general items.
 What is the operations tab for? If it is an admin only feature, apply appropriate roles and hide for all other users.
What is “count unique values”?
 Remove as many popup modals as possible when they are unnecessary.
 Remove Help > About Drop down link. Move this information to footer.

15 | P a g e
 Any time pages are referenced, offer direct links and breadcrumbs based on navigational hierarchy. This is
especially important in help documentation.
 Discuss and update navigational hierarchy.
 Make login screens match dashboard.
 Save/Export is an on-page action, why is it in the navigation?
o Recommend removing all close buttons and moving file actions to each page.
 Can the disclaimer text be added to the login screen?
 Where do users go to manage their profile, security questions, and password?
o Recommend moving Exit button, signedin as, and links to management pages to upper right hand
corner
14 Resources
14.1 Glossary
B
Bootstrap framework: Bootstrap
is the most popular HTML, CSS,
and JS framework for
developing responsive, mobile
first projects on the web. http;
//getbootstrap.com/, 6
H
HTML5: HTML5is a W3C
specification that defines the
fifth majorrevision of the
Hypertext Markup Language
(HTML). Oneof the major
changes in HTML5is in respect
to how HTML addresses Web
applications., 9
I
inline validation: The inline
validation is about delegating
model validation to a
dedicated service. Thecurrent
validation implementation
built in the Symfony2
framework is very powerful as
it allows to declare validation
on a; class, field and getter.
However these declarations
can take a while to code for
complex rules., 9
M
mobile-first design. See
Responsive Design
P
popup: A modal dialog is a
window that forces the user to
interact with it before they can
go back to using the parent
application. A great example
of this would be a prompt for
saving, or the "open file"
dialog. They are often used
when a user is forced to make
an important decision., 9
R
responsive design: A responsive
design involves structuring the
current design layout so that
all of the content, images, and
structure remain the same or
similar on any device or
viewport width. When the user
retracts the browser the
website would adjust to the
screen size allotted without
horizontal scrolling., 6, 7
S
security questions: A security
question is used as an
authenticator., 15
T
title tag: Thetitle tag is an HTML
title element critical to both
SEO and user experience that
is used to briefly and
accurately describes the topic
and theme of an online
document, 9
tool tip: a message that appears
when a cursor is positioned
over an icon, image, hyperlink,
or other element in a graphical
user interface., 9

16 | P a g e
V Validated: Finds errors and
potential problems in
Cascading Style Sheets.. See
validator.w3.org
14.2 Images and Figures
Figure 1 Screenshot of Analysis Report At 1440px Width................................................................................................................ 6
Figure 2 Dashboard at 1250px Width ............................................................................................................................................... 6
Figure 3 Reprot Input Form as a question qizard............................................................................................................................. 7
Figure 4 Example site - Popup Error Messages................................................................................................................................ 8
Figure 5 Help Navigation................................................................................................................................................................... 8
Figure 6ToolTip Icon As a Link........................................................................................................................................................... 8
Figure 7 Inline Validation ................................................................................................................................................................... 8
Figure 8 CSS Tool Tip with link to Help Documenation from APII................................................................................................... 8
Figure 9 Inline CSS Tool Tips From APII (See also CQRS, QIES, CCW, NPPES, NHS) ....................................................................... 8

ExampleSiteEvaluationJustification

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to ExampleSiteEvaluationJustification

Similar to ExampleSiteEvaluationJustification (20)

More from Desarae Veit

More from Desarae Veit (14)

ExampleSiteEvaluationJustification