examplesiteevaluationjustification

Example DocumentUI/IA/UX RECOMMENDATIONS

PREPARED BY : DESARAE VEIT

[email protected]

Table of Contents1 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 6


2.4 Rationale 8

3 Workflow and Wizards 8


3.2 Example 8


3.4 Rationale 9

4 Alerts, Tips, and Messages 9


4.2 Example 9

4.2.1 Current 9

4.2.2 Recommendation 10


4.4 Rationale 11

5 Global Styles and Consistency 11


5.2 Example 11


5.4 Rationale 11

1 | P a g eExample UI/UX/IA Recommendations

6 Forgiving Formats 11


6.2 Example 11


6.4 Rationale 12

7 Keyboard Shortcuts 12


7.2 Example 12


7.4 Rationale 12

8 Notifications 12


8.2 Example 13


8.4 Rationale 13

9 Discoverable Controls 13


9.2 Example 13


9.4 Rationale 13

10 Breadcrumbs 13


10.2 Example 13


10.4 Rationale 14

11 Navigation 14


11.2 Example 14


11.4 Rationale 14

12 Relogin 14


12.2 Example 15



13 Additional Recommendations & Questions 16

14 Resources 16

14.1 Glossary 16

14.2 Images and Figures 17


1 Update CSS: Optimize, Remove Redundant Code, and Minify1.1 Problem SummaryExample Site’s stylesheet is disorganized with excess lines, in-line styles, and formatting that is not web standards compliant. Some CSS is in the stylesheet multiple times.

1.2 Example1.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 Recommendation1.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;


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 UsageThis 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

finding styles 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 Layout2.1 Problem SummaryThe 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, with 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


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

2.3 Solution and UsageA 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 CSSo 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 RationaleResponsive 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, 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 minimum for UI/UX design best practices.


Navigation is partially off screen

3 Workflow and Wizards3.1 Problem SummaryGuiding 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 useful resources

3.2 ExampleWEBSITE SCREENSHOT GOES HERE

FIGURE 3 REPROT INPUT FORM AS A QUESTION QIZARD

See also QIES Redesign

3.3 Solution and UsageStrip away any menu items, links, or excess content to tunnel users toward goals. Close off detours from desired 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 RationaleTunneling makes it easier to go through complicated processes. Tunneling controls what the 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 Messages4.1 Problem SummaryImprove 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.

4.2 ExampleThe 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 Recommendation4.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)

4.3 Solution and UsageRemove help link from main 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 tool tips. 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 them to 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 RationaleN/A

5 Global Styles and Consistency5.1 Problem SummaryInconsistent 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 Example5.3 Solution and Usage

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 RationaleRecognition 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 form layout inconvenient.

It is easier to click and choose from option than it is to write out a list of options from memory. Recognition tasks provide memory cues that facilitate memory recall and improve effectiveness.

6 Forgiving Formats6.1 Problem SummaryUser wants to enter data without worrying about formats

6.2 Example5555555555 vs. 555-555-5555


http://www.smashingmagazine.com/2014/09/15/making-modal-windows-better-for-everyone/

6.3 Solution and Usage Accept multiple formats and variations. Make the system interpret complicated logic rather than the user.

Time Estimate: TBD

Importance: Low

6.4 RationaleN/A

7 Keyboard Shortcuts7.1 Problem SummaryUser wants to quickly complete certain tasks

7.2 ExampleDropbox, ASANA

7.3 Solution and UsageKeyboard shortcuts are not just for accessibility. They come in handy for repetitive tasks, navigation, walk through tours, and generally increase the usability of the application.

Add shortcuts and hotkeys to the app that allow users to perform certain actions quickly instead of navigating

Skip Navigation On page mapping Help documentation Include keyboard shortcuts popover Include walk through tour and quick tips

Time Estimate: TBD

Importance: Low

7.4 RationaleN/A


8 Notifications8.1 Problem SummaryUser 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 ExampleN/A

8.3 Solution and Usage 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 RationaleN/A

9 Discoverable Controls9.1 Problem SummaryUser wants quick access to controls that are secondary or only relevant to specific sections.

9.2 ExamplePinterest hovers (invisible controls)

9.3 Solution and UsageUsers can usually access invisible controls by either tabbing, hovering over content, or scrolling through a site. 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

9.4 RationaleN/A

10 Breadcrumbs10.1 Problem SummaryUser 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

10.3 Solution and UsageShow 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 RationaleBreadcrumbs 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 Navigation11.1 Problem SummaryUser needs to navigate among sections of a website while having a clear indication of what section they are currently looking at.

11.2 Example

11.3 Solution and UsageIt 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 RationaleN/A


12 Relogin12.1 Problem SummaryWhen 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

WEBSITE SCREENSHOT GOES HEREIf No is selected:http://example...

12.3 Solution and Usage Remove target=”_blank” tags from all links. Remove target=”_blank” tags from navigation 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


13Additional 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. 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, signed in as, and links to management pages to upper right hand corner

14 Resources14.1 Glossary

BBootstrap framework:

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http; //getbootstrap.com/, 6

HHTML5: HTML5 is a W3C

specification that defines the fifth major revision of the Hypertext Markup Language (HTML). One of the major changes in HTML5 is in respect to how HTML addresses Web applications., 9

Iinline validation: The inline

validation is about delegating model validation to a dedicated service. The current 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

Mmobile-first design. See

Responsive Design

Ppopup: 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

Rresponsive 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

Ssecurity questions: A

security question is used as an authenticator., 15

Ttitle tag: The title 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

VValidated: Finds errors and

potential problems in Cascading Style Sheets.. See validator.w3.org

14.2 Images and FiguresFigure 1 Screenshot of Analysis Report At 1440px Width..................................................................................6Figure 2 Dashboard at 1250px Width................................................................................................................7Figure 3 Reprot Input Form as a question qizard...............................................................................................8Figure 4 Example site - Popup Error Messages..................................................................................................9Figure 5 Help Navigation....................................................................................................................................9Figure 6ToolTip Icon As a Link..........................................................................................................................10Figure 7 Inline Validation.................................................................................................................................10Figure 8 CSS Tool Tip with link to Help Documenation from APII.....................................................................10Figure 9 Inline CSS Tool Tips From APII (See also CQRS, QIES, CCW, NPPES, NHS)..........................................10


examplesiteevaluationjustification

Documents