Carolina's Community of Digital Creators and Communicators

Category: Developers Exchange (Page 2 of 5)

December 2016 – Web Usability (part 2), Usability Testing at UNC

Our December meeting was a follow up to our November meeting about web usability testing. In this meeting we learned how two different groups at UNC gather input from their users to improve usability.

We heard from Chad Haefele and Sarah Arnold from UNC Libraries who discussed several different types of user research tools they are currently using. We also heard from Michael Newton from the Digital Innovation Lab and learned how he uses focus groups composed of key stakeholders to drive design decisions. The presentations were followed by a discussion among meeting attendees of the best uses of the techniques demonstrated.

See the presentation slides below:

 

Accessibility Links (Follow up to 2016 CTC Retreat roundtable)

Example Guideline Document for Staff:

Accessibility Resources:

University Resources:

Tools

April 2016 – Google Analytics Fundamentals

Please join us on April 7 @ 2:00PM  to learn more about Google Analytics Fundamentals. Rachell Underhill will lead this session and cover the basics of Google Analytics, from setting it up on your site to pulling and effectively using the data it provides. This meeting will be aimed at a broad audience – no technical skills required.

  • Location: Graduate Student Center
  • Date: Thursday, April 7, 2016
  • Time: 2:00 – 3:00 PM (room reserved until 3:30 for follow-up discussion)

If you have questions about Google Analytics or if there are specific topics that you would like to be addressed in this discussion,  please feel free to email them to Rachell (runderhill@unc.edu).


Media and documents from the presentation:


Associated Resources:

Using CSS For Attribute Selectors

An important part of creating a web page or site is crafting a good user experience. One thing I see too often is a missed opportunity for ease of use – no styling of attributes (or worse, no attribute use at all).

Styling attribute selectors can be done in your .css file, which means you can set it up once and then never worry about it again (or until your next re-design, anyway…).

By using the rel attribute on an HTML link, we’re giving it a way for the CSS to identify it. Take the following list of links, for example. Without any styling applied, it will look (more or less) like this:

Now, you can see that if it weren’t for the wording, you’d never be able to tell what the intent of the link is, and that is bad in terms of user experience.

So let’s see what happens when we use CSS and style these rel attributes!
1. Let’s remove the default bullet elements:

ul, ol {
list-style: none;
}

2. Then, let’s give our list elements some room to breathe.

  ul { display: block;}
li { padding: 5px 0; }

3. Then we’ll remove default styling for the links and put in the styles we want to have.

  a {
text-decoration: none;
font-weight: bold;
}
a:link {color: #1C5c89;}
a:visited {color: #21238E;}
a:hover {color: #1A8D59;}

4. Now comes the fun part. For internal links, we’ll give it a dotted underline:

  a[rel="internal"] {
border-bottom: 1px dotted #1A8D59;
}

5. Next, we’ll use the :after pseudo-element to help identify what kind of icon should be associated with each rel attribute. Note: If I don’t know what the baseline ems are for the site I’m working on, I’ll put my padding in px; but when you’re writing your own CSS, you’ll want to use ems or % instead of px!

  a[rel="external"]:after {
content: url("link to my external icon");
padding-left: 5px;
}
a[rel="redirect"]:after {
content: url("link to my redirect icon");
padding-left: 5px;
}
a[rel="email"]:after{
content: url("link to my email icon");
padding-left: 5px;
}
a[rel="pdf"]:after{
content: url("link to my pdf icon");
padding-left: 5px;
}
a[rel="doc"]:after{
content: url("link to my doc icon");
padding-left: 5px;
}

Here’s a screenshot of what the same list looks like after these css rules are applied:

styled-links-css

Much different! Once you’ve established the style for your site, your users will be much happier, since they will get a visual idea of your intent immediately.

 

You can also see this demonstrated on codepen and try it out for yourself:  http://codepen.io/melsumner/pen/igAFb

December 2011 – Decision-Making Using Web Analytics

Do you make website related decisions using analytics and usage data?   The December 1 Webmasters meeting will be about how analytics can help drive decision-making and help you understand more about your users.  This meeting will be aimed at a broad audience – no technical skills required.

Rachell Underhill at the Graduate School and Anita Crescenzi at the Health Sciences Library will share how they use data to drive decision-making (using Google Analytics).  Some questions they will address include:

  • What is the top used content?
  • What content should have more prominence on the site?
  • Which of two design alternatives has better usage?
  • What is the best time of day for website outages?
  • Which browser/operating systems/mobile devices should be supported?
  • Where are site visitors coming from?

If you use analytics or want to learn, come join us December 1 from 2-3:30pm in the Grad Student Center.  If you have questions, please feel free to contact Billy Hylton (billy_hylton@unc.edu), Rachell Underhill (runderhill@unc.edu) or Anita Crescenzi (amcc@email.unc.edu).

« Older posts Newer posts »

© 2024 Web Professionals

Theme by Anders NorenUp ↑