UIT Communications

user experience Design

Brian Young

brianyoung@stanford.edu

Front End Developer

University IT Communications, Stanford University

agenda

Highlight the user experience design services of UIT Communications
Discuss opportunities for improving the user experience in UIT web projects

UIT communications

Some of the many services we provide:

Communication planning and strategy
Content development and delivery
Internal communication
Creative services

COMMUNICATION PLANNING AND STRATEGY, content development and Delivery

internal communications

UIT Community newsletter

Creative services: videography, graphic design

Did you know?

We also do the following:

Web design, development, and maintenance
- User Interface (UI) Design
- User Experience (UX)
- Web accessibility
- Help documentation
Stanford identity management

User interface (UI)

This is a conduit between human and computer interaction – the space where a user will interact with a computer or machine to complete tasks.

Axess

Oracle Financials

Stanford Services

StanfordWho

Zoom

SeRA

My Devices

Virtual Host

Network Registration

Sponsorship

Stanford Login

IT Metrics

Tools

Workgroup

ID Card Photo

Software

Authority Manager

WebAFS

Mailman

CAD Drawings

Voicemail

Monitoring

Form Builder

Accounts

UI Consistency

state of web application UI in UIT

Inconsistent application of Stanford Identity
Long application update cycles
No common front end design framework across web applications

User Experience (UX)

This encompasses all aspects of the end-user's interaction with the company, its services, and its products.

state of Web application UX in UIT

Fragmented
- UX design processes and expertise vary greatly across different UIT workgroups
Not always prioritized
- Small window of opportunity to make an impact
Ad Hoc
- Without standardization, there is little opportunity for reuse

great user experience

why is this important

=

fewer help tickets

increased trust and confidence

poor user experience

conversely...

more help tickets

inaccessible features

=

Applying the Stanford Identity

identity.stanford.edu

Stanford IDENTITY TOOLKIT

stanford.zoom.us

Stanford Zoom landing page

bomgar-uit.stanford.edu

stanford bomgar landing Page

web Accessibility

Web Accessibility is a way to make everyone including the disabled to have access to the web and internet in whole.

What is web accessibility?

medium.com/fbdevclagos/why-web-accessibility-is-important-and-how-you-can-accomplish-it-4f59fda7859c

Web accessibility means that people with disabilities can use the Web.

www.insidehighered.com/news/2018/12/10/fifty-colleges-sued-barrage-ada-lawsuits-over-web-accessibility

National Association of the Deaf (NAD) v. Harvard & MIT
Dudley v. Miami University
Disability Rights Advocates (DRA) v. UC Berkeley
National Federation of the Blind (NFB) v. Penn State

Accessibility Lawsuits

www.3playmedia.com/2018/09/20/accessibility-lawsuits/

soap.stanford.edu/make-accessible

Stanford Online Accessibility Program (SOAP)
Web Content Accessibility Guidelines (WCAG) 2.0 Level AA Conformance:
- Using proper HTML tags like <h2> for headings and <p> for paragraphs
- Including alternate text for non-decorative images
- Videos need to be captioned
- Users are able to complete essential tasks with keyboard only

What does it mean for Developers?

u it.stanford.edu/hardware

ess .stanford.edu

dynamic elements on page

uit.stanford.edu/service/accounts/passwords/quickguide

infographics: Include text version

<div class="element-invisible">
    <p>Question: Which characters are <strong>required</strong> in my password?</p>
    <p>Answer: That depends on how long it is. The shorter it is, the more restrictions there are. Here are the specific requirements:</p>
    <table>
        <tbody>
            <tr>
                <th>Number of characters</th>
                <th>Requirements</th>
            </tr>
            <tr>
                <td>8-11</td>
                <td>mixed case letters, numbers, and symbols</td>
            </tr>
            <tr>
                <td>12-15</td>
                <td>mixed case letters and numbers</td>
            </tr>
            <tr>
                <td>16-19</td>
                <td>mixed case letters</td>
            </tr>
            <tr>
                <td>20 or more</td>
                <td>Any characters you like!</td>
            </tr>
        </tbody>
    </table>
    <p>Stanford recommends a password 16 or more characters long.</p>
    <p>Longer passwords are inherently more secure because it takes hackers longer to guess them when employing a brute force method. So make your password 16 characters or longer!</p>
    <p>Because they only require upper and lower case letters, passwords that are 16 characters or longer are much easier to type on a mobile device.</p>
    <p>You may be thinking “How on earth can I come up with a password that long?!” It’s easy! Just select 4 random words. For example: orange eagle key shoe. That’s 21 characters including the spaces.</p>
    <p>Now go forth and create your own awesome passwords and keep your account secure!</p>
    <p>For more information, visit <a href="https://uit.stanford.edu/service/accounts/passwords">the SUNetID Passwords page</a>.</p>
</div>