Category Archives: Usability

How to Conduct Library Website Usability Studies for Free

Posted on by

cardsortWe’re currently redesigning our website at The New York Law Institute library and we our goal has been to create a user-centered design with lots of input from our actual members and users. We started out by conducting a complete heuristic evaluation of our website interface and structure to identify problems and pain points. We also performed a content audit in which we created and analyzed a complete content inventory of our site. See below for some helpful how-to guides to get started with these types of exercises. These were great starting points because we were able to identify and analyze what we currently had to offer as far as our website experience. A redesign doesn’t mean that you throw everything out and start from scratch, so we wanted to leverage what we had that was working but also think about new ways to provide a better user experience. We decided to re-write quite a bit of our content before even starting to build the new redesign and that was an easy and manageable first step.

Guides to Conducting Heuristic Evaluations

 

Guides to Conducting Content Audits

 

After we analyzed our current website structure and content, we came up with a strategy for how we wanted to improve it. We came up with improvements such as making our design responsive so that it would adapt to any size screen for our mobile users, drop-down menus for navigation, a site-wide search that would also allow for catalog and federated search options, an improved events calendar, etc. Next we wanted to use language and navigation that our members would find the most natural. To this end we conducted card sorts, both online and live, face-to-face.

Card Sorting is a method or technique for discovering how website users categorize information so that you can design your information structure in a way which is navigable and findable by your users. The method involves asking participants to sort sets of cards which have items, names, pages, or sections of your website printed on them into groups that make sense to them, and sometimes to assign labels to those groups. This type of usability study can be conducted in person and/or completely online. I have a workshop with step-by-step instructions for implementing a card sort available here. This workshop will also walk you through how to analyze the data you collect from your sort. And please see below for some free online card sorting tools.

 

Free Online Card Sorting Software

The results of the card sort usability tests that we ran were invaluable. We not only gained insight into how our members would prefer our navigational structure to be designed, but we also found out that our members weren’t understanding the way that we worded the names of certain pages. This gave us a chance to rename several parts of our website and see if those page names did any better in the following studies. Card sorts are also a great way to test out a page name that one person on the staff may want, but others disagree on it – it eliminates internal arguments because the results of what users want speak for themselves!

 

Read the full post How to Conduct Library Website Usability Studies for Free on OEDB.org.

LegalTech: Bolstering KM Through User Experience Design

Posted on by

The Advanced IT track at the LegalTech New York 2014 conference discussed the use of UX (user experience) design in law firms.

The panel included Andrew Baker, Director of Legal Technology Innovations Office at Seyfarth Shaw LLP, Tom Baldwin, Chief Knowledge Officer at Reed Smith LLP, Patrick DiDomenico, Director of Knowledge Management at  Ogletree, Deakins, Nash, Smoak & Stewart, P.C., and Kate Simpson at Tangledom Inc.

Kate Simpson set the tone by discussing UX as a profession, a practice, and a process, explaining that it’s about people, not devices.  She mentioned Steve Krug’s “Don’t Make Me Think” which is one of my favorites in this arena.

Tom Baldwin discussed “Driving Adoption Through UI and Gamification” and talked about what new initiatives they’ve been developing at Reed Smith. The most interesting was the matter profiling app they designed which uses leaderboards spotlighting the top profilers as incentive.  They also improved upon their last app by illustrating that the user need only go through a 2-step process in order to successfully complete the matter profile.  By using this new reward system, they’ve seen an increase to 300 matters profiled per month over the 130 with the old app.  They’ve used leaderboards in their other custom applications as well as transforming their firm directory into a LinkedIn-like interface, and switched their display of financial reporting to using data visualizations for easier digestion.

Read the full post LegalTech: Bolstering KM Through User Experience Design on OEDB.org.

The Ultimate, Mega, Essential Website Design Guide – 115 Tools and Resources

Posted on by

web_design

Whether you’re building your first website or re-designing an existing one for your organization, this all-in-one guide will get you started with tools and resources for creating today’s modern websites.

    Website Tools – Content Management Systems

    There are many tools available to today’s website designers ranging from simple html to robust content management systems. These CMS systems all have the ability to create, store, and display large quantities of information as well as syndicate content throughout the your website and beyond.

    Articles & Resources

  1. Top 12 Free Content Management Systems
  2. Top 10 Most Usable Content Management Systems
  3. Examples of Libraries Using Content Management Systems

    4.  

    Tools

  4. Drupal – This popular application is an open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world.
  5. WordPress – This free open-source content management system and blogging platform has become one of the most used software products for designing websites with over 60 million installations.  Both the iLibrarian blog and my professional website are powered by WordPress.
  6. Joomla – This is also a free and very popular open source content management system with over 35 million dowloads to date.
  7. Expression Engine – This Content Delivery Platform,has been around for over a decade and this popular content management system powers sites such as Disney, Apple, and Adobe.  It’s built on an open source PHP framework.

    8.  

    Information Design & Navigation

    Web users spend an average of 8–10 seconds and three clicks on your Web site looking for what they need before they get frustrated and click away. Whether you are developing a new Web site or redesigning an existing one, it is imperative to determine an intuitive and usable navigational structure and taxonomy for your user community.  These articles and tools will help you do just that.

    Articles & Resources

  8. Guide to Website Navigation Design Patterns
  9. Do You Make These 7 Website Navigation Design Mistakes
  10. 50+ Gorgeous Navigation Menus
  11. 21 Examples of Excellent Navigation Menus in Web Design

    12.  

    Tools – Boilerplates

  12. HTML5 Boilerplate – A boilerplate template for HTML5 apps or sites.  Comes with optimized Google Analytics snippet; placeholder touch-device icons; and docs covering dozens of extra tips and tricks as well as jQuery and Modernizr libraries.
  13. 960 Grid – The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  14. Bootstrap – A sleek, intuitive, and powerful front-end framework for faster and easier web development. Includes responsive CSS as well.
  15. Less Framework 4 – A CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
  16. Foundation – The most advanced responsive front-end framework in the world – and it’s free!

    17.  

    Graphic Design

    Graphic designers need to think about things like color theory and usage, optimal image placement, layout design and much more.  These articles and tools on graphic design theory will help you get a handle on how you can best design an aesthetically pleasing website.

    Articles & Resources

  17. 50 Totally Free Lessons in Graphic Design Theory
  18. Graphic Design Theory: 50 Resources and Articles
  19. 20 Vital Techniques & Best Practices For Effective Web Design

    20.  

    Tools

  20. Adobe Photoshop – One of the most popular graphics editing software programs on the market, Adobe Photoshop enables you to do just about anything with images and has a vast array of tools for creating graphics.
  21. Gimp – (GNU Image Manipulation Program) – This is a free open source alternative to Adobe Photoshop.  Similar to Photoshop, it has tools for image editing and creating original graphics.
  22. Adobe Kuler – upload, create, and edit color schemes
  23. Pixel Dropr – create sets of icons, illustrations, photos, buttons etc. that you can drag and drop into any photoshop image.
  24. PLTTS – easily create and find color palettes based on hex #’s
  25. Pictaculous – Upload an image and it will produce a color palette instantly.
  26. Dribble – Get graphic design inspiration and search by color.

    27.  

    CSS

    CSS or Cascading Style Sheets is a language that’s used to describe the presentation of a Web page.  It includes elements such as fonts, layout, and colors and allows designers to specify very granular rules about formatting and presentation for each.  Here are some resources to get you started creating your own CSS style sheets.

    Articles & Resources

  27. 30 CSS Best Practices for Beginners – Net Tuts
  28. CSS Tutorial – W3Schools.com
  29. A List Apart – Articles specifically on CSS.
  30. CSS-Tricks – Forums, articles, videos, and tutorials on CSS

    31.  

    Tools

  31. CSS Beautifier – Type or paste in unformatted CSS and have it beautified automatically so that it’s consistent and easy to read.
  32. Reset CSS
  33. CSS3 Click Chart – This is a fantastic reference tool for CSS3 attributes with code examples, descriptions, links, tutorials, polyfills, tools, and browser support info for all new CSS3 features.
  34. Patternizer – An easy to use online tool which enables you to generate CSS3 stripes in an online interface, allowing you to customize the space in between each stripe and then provides the code.
  35. Sprite Box – A WYSIWYG tool to help Web designers quickly and easily create CSS classes and ID’s from a single sprite image.
  36. Primer – Paste in your HTML and Primer will pull out all of your classes and id’s and placing them into a starter stylesheet
  37. Mincss – Clears the junk out of your CSS by comparing each and every selector in the CSS to find out which ones aren’t being used.
  38. CSSCSS – CSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

    39.  

    Social Media Integration

    Social media websites such as Facebook and Twitter are used by millions of people worldwide which is why it’s essential to strive to incorporate those sites’ functionality into your own.  Here are some articles and tools to help you best leverage the power of social media sites within your own website.

    Articles & Resources

  39. 3 Ways to Integrate Social Media into Your Website – Web Ascender
  40. How to easily integrate Social Media into your website – 1st Web Designer
  41. 9 Tips for Integrating Social Media on Your Website -  Social Media Examiner

    42.  

    Tools

  42. Add This – Easily create “Share This” and “Follow” buttons for over 300+ social media services (Facebook, Twitter and more)
  43. ShareThis -  Quickly create “Share” buttons for your website with this easy-to-use tool.
  44. Facebook Comments Box – The Comments box is a social plugin that enables people to comment on your site. Features include moderation tools and distribution.
  45. Facebook Like Button – The Like button is a simple plugin that lets people quickly share content on Facebook.
  46. Gigya Activity Feed – The Activity Feed plugin allows users to see the latest actions on a site, according to who performed the actions.

    47.  

    Coding Tools

    There are a lot of excellent tools and resources available to assist website designers in creating and editing their sites as well as adding new functionality.  Here are a few to get you going:

    Articles & Resources

  47. Best Free HTML Editors    Gizmo’s Freeware
  48. HTML TOOLBOX: 30+ HTML Tools and Tutorials – Mashable
  49. SuperheroJs – A collection of the best articles, videos and presentations on the topic of creating, testing and maintaining a large JavaScript code base.

    50.  

    Tools – jQuery & JavaScript

  50. JQuery Mention Input – This plugin will give your website the ability to mention out to friends by tagging them with @.
  51. Chardin.js – Add overlay instructions to your apps with this jQuery plugin.
  52. JSFiddle – This web-based editor allows you to create JavaScript, HTML, and CSS and see the results in real-time.
  53. FitText.js – A jQuery plugin for inflating web type and also making font-sizes flexible and responsive.
  54. JSLint – Created by Douglas Crockford, JSLint checks JavaScript code against best coding conventions for quality assurance.

    55.  

    Tools -HTML Editors

  55. Adobe Dreamweaver – This is my preferred HTML editor.  It has a streamlined user interface, connected tools, and new visual CSS editing tools that let you code efficiently and intuitively.
  56. Adobe Brackets – Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript.
  57. CodePen – An HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write.

    58.  

    Tools -Misc

  58. Site Validator – This service lets you validate HTML5 and CSS3 on your whole site with a single click.

    59.  

    Responsive Website Design

    Responsive Web Design (RWD) is, in a nutshell, all about designing your website so that it can be optimally viewed on a wide range of devices such as tablets, smartphones, laptops, etc. The idea is to design and maintain one website that can be viewed on all.  Here are tools and resources to help you do just that:

    Articles & Resources

  59. 85 Top Responsive Web Design Tools
  60. 16 Top Tools for Responsive Web Design
  61. 50 Useful Responsive Web Design Tools For Designers

    62.  

    Tools

  62. Responsive Nav – A tiny JavaScript plugin which helps you to create a toggled navigation for small screens.
  63. Gridset – Enables Web designers to design and build responsive grid-based layouts and offers a selection of presets.
  64. Respond.js – A javascript snippet of code which allows media queries to be compatible with older versions of browsers that lack support for them.
  65. Responsive Tables – A simple JS/CSS combo that will let your tables adapt to small device screens “without everything going to hell”.
  66. Adaptive Images – Detect your visitor’s screen size then automatically creates, caches and delivers device-appropriate re-scaled versions of your HTML images.

    67.  

    UX/Usability

    Usability tests, card sorts, focus groups, and more are all used by website designers in an effort to create user-driven designs and deliver an engaging user experience to their visitors. Learn how to use these inexpensive techniques to understand how your users think about your Web site and its content.

    Articles & Resources

  67. Best books on usability and web interface design
  68. UX Magazine
  69. Usability 101: Introduction to Usability -Jakob Nielsen
  70. Smashing Magazine – UX Category
  71. Card Sorting from A–Z – iLibrarian Series
  72. 18 Usability Resources for Librarians – iLibrarian

    73.  

    Tools- Wireframing & Mockups

  73. Microsoft Visio Professional – This is my favorite wire-framing tool, Visio is a powerful diagramming platform with a rich set of built-in stencils that lets you create wireframes, maps, and many other types of charts and diagrams.
  74. Mockingbird – an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
  75. Mockup Builder – A prototyping application that helps you design software or websites by making it easy to create mockups of the finished project.
  76. Balsamiq Mockups – Online wireframing tool with 75 built-in user interface components and 187 icons.
  77. Moqups – a nifty HTML5 App used to create wireframes, mockups or UI concepts, and prototypes.
  78. Mockflow is a super-easy wireframing tool that enables you to design and collaborate on user interface concepts for your software and websites.

    79.  

    Tools – Usability Testing

  79. Websort – Card sorting application
  80. OptimalSort – Card sorting application
  81. Feedback Army – Set up usability tests in as little as 2 minutes for $20.
  82. UserTesting.com – Set up a usability test and submit it for review from a user base of over 1 million participants.
  83. Silverback 2.0 – Guerrilla usability testing software for designers and developers.

    84.  

    SEO

    SEO or search engine optimization is all about improving or “optimizing” your ranking in search engine results in an effort to increase traffic to your website.  Techniques for accomplishing this vary according to individual search engine.  Here are some helpful resources to improve your website’s rank.

    Articles & Resources

  84. What Is SEO / Search Engine Optimization? – SearchEngineLand
  85. Search Engine Optimization Guide – Google
  86. The Beginner’s Guide to SEO – Moz
  87. Advanced Guide to SEO – QuickSprout/ Neil Patel
  88. SEO Book’s Search Engine Optimization Tools Directory

    89.  

    Tools

  89. Google Rich Snippets – Customize and preview the way your website will display in Google search results.  Rich snippets offer  markup help to enhance your search results listings.
  90. GetListed – Claim your local U.S. business listings on Google+ Local, Bing Local, Yelp, and other prominent local search engines.
  91. Google Website Optimizer – Website testing and optimization tool that allows you to increase the value of your existing websites and traffic without spending a cent -  now a part of Google Analytics.
  92. Meta Tag Generator – Instantly create meta tags that can be pasted into your site by entering the page title and description with this quick tool.
  93. Spider Test Tool – This is a search engine indexing simulator tool that shows the source code of a page, all outbound links on the page, and common words and phrases found in the page copy.
  94. Google AdWords Keyword Tool – This is a great way to get keyword ideas and find the best text for your audience. Identify what words or phrases will drive the most traffic to your site.

    95.  

    Accessibility

    Designing an accessible website includes accomodating visually impaired visitors, visitors that utilize voice reading devices, and visitors that turn off images.  Here are some excellent resources to help you design an accessible website.

    Articles & Resources

  95. Web Content Accessibility Guidelines (WCAG) 2.0
  96. Web Content Accessibility Guidelines (WCAG) Overview – Web Accessibility Initiative
  97. Section 508 Standards
  98. State Accessibility Laws, Policies, Standards and Other Resources (U.S.)
  99. Improve Your Website’s Accessibility With the W3C’s ‘Guide to Using ARIA’ – Webmonkey

    100.  

    Tools

  100. Browser Emulator – See what your site looks like on many ancient browsers.
  101. 38 Mobile Browser Emulators
  102. IE Tester – Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10
  103. Colorblind Web Page Filter -  See what your website looks like for the colorblind.
  104. Wave Accessibility Evaluation Tool
  105. HiSoftware CynthiaSays™ Portal – A joint education and outreach project of HiSoftware, ICDRI, and the Internet Society Disability and Special Needs Chapter. Cynthia Says educates users in the concepts behind website accessibility.
  106. Accessibility Evaluation Toolbar 1.5.7.1 for Firefox- Supports web developers in testing web resources for accessibility features.
  107. Fangs Screen Reader Emulator 1.0.8 for Firefox – Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.

    108.  

    Analytics

    Analytics tools are an invaluable way to show the ROI of marketing campaigns, popularity and usability of website content, value of blog posts, social media influence, and much more.

    Articles & Resources

  108. Web analytics -  Wikipedia
  109. Web Analytics Tools – SEOBook
  110. Web Analytics Category – Mashable
  111. 4 Analytics Tools Librarians Should Know About -  iLibrarian
  112. Google Analytics for Libraries by Joe Morgan – 50 page book on using GAnalytics in Libraries.

    113.  

    Tools

  113. Google Analytics – Free tool that lets you access robust reports indicating the total number of visitors to your website, their demographic, browser, and engagement information.
  114. SiteMeter – Similar to Google Analytics, this free tool provides a quick snapshot of traffic to your website.
  115. Open Web Analytics – An open source web analytics software that you can use to track and analyze how people use your websites and applications.

 

 

The post The Ultimate, Mega, Essential Website Design Guide – 115 Tools and Resources appeared first on OEDB.org.