Improve usability of your Profile Box in LibGuides by linking outside the box.
The standard implementation of the LibGuides profile box asks you to supply your title and avatar, your contact information, your social- and professional media accounts.
As with most Springshare designs, it’s a pretty solid user experience out-of-the-box. But it’s not perfect and with a little HTML—and a little revolutionary thinking and linking outside the standard boxes—you can hack your profile to provide even better usability for patrons.
If I fit all the information in the correctly assigned fields (e.g., title, avatar, email, address, phone, LinkedIn URL, etc.) my profile box looks like this. More than decent…but looking closely, we see a few usability problems.
- No email listed—Entering your email into the Email Address field produces this light blue button. It’s a good affordance and we can keep that. But for those who use browser-based email such as GMail (and most users of public library computers must), that email button is likely to try to open a non-configured local client, such as MS Outlook, which users then have to spend time shutting down. If they want to know the actual email address, they must know to right-click the ‘Email Me’ button and copy the URL. This puts the cognitive load on the user and is not best practice.
- Non-standard Web page/blog icon—The bookmark icon, while acceptable for indicating a general URL in many contexts, is not specific enough to denote a personal Web page. Better might be the standard globe icon.
- Only a single field for both Web page and blog—In my case, I have two distinct Web sites with two distinct URLs—a static Web site and a WordPress blog. Addresses for both of these should be delineated for patrons, in such a case.
To set up the Profile Box for maximum usability, then, I recommend the following:
- Under the Title and Image panel, enter your title in the Box Title field, and upload a professional picture or avatar for your Profile Image. Unless you have privacy objections, patrons will appreciate knowing your title and what you look like.
- Under the Social Media, Social Cataloging, and Widgets panels, enter the URLs for any services you think will enhance the usability of your profile. Each of the various social media icons have provide brand recognition and these will be listed in a horizontal line below your Contact Info.
- Now, in the Contact Info panel I recommend leaving every field blank, excepting:
- Email Address: Enter your email address in this field if you wish to have a big blue Email button. Leaving the field blank will suppress the button.
- Address Field: Paste all of the the code below into the Address field—substituting your own information, of course.
1234 Address University of Notre Dame Notre Dame, IN 46556 <i class="fa fa-phone" style="color:#2954d1;"></i> <a href="tel:1234567899">(123) 456-7899</a> <i class="fa fa-envelope" style="color:#2954d1;"></i> <a href="mailto:email@example.com">firstname.lastname@example.org</a> <i class="fa fa-globe" style="color:#2954d1;"></i> <a href="http://www.superkaratemonkey.com" target="_blank">SuperKarateMonkey.com</a> <i class="fa fa-wordpress" style="color:#2954d1;"></i> <a href="http://www.superkaratemonkey.com/blog" target="_blank">Karate Monkey Blog</a>
When I enter my own information into these two fields, it generates the following Profile Box, which is much improved by affordances for a range of users, and with information that is nicely chunked and easily parsed by users.