Drupalcamp PA 2016 User Experience Morning

Drupalcamp PA, happening today (7/30/16) at the University of Pittsburgh, is a great venue for learning more about Drupal, the open-source content management system. This morning there are a number of sessions about improving the editor/author/site-builder user experience. I was most impressed about what can be done with the Paragraphs module. CKEditor plugins are another option.

Creating Reusable Pattern Libraries with Paragraphs: http://www.drupalcamppa.org/session/creating-reusable-pattern-library-paragraphs
Great session about using the Paragraphs module to create reusable pattern libraries that can be exported to other Drupal sites. The presenter setup content types for Paragraphs and was able to export them to another Drupal instance using the Bundle Copy module. He covered how Atomic Design and planning applies to setting up content types for the Paragraphs module.

CKEditor is the preferred WYSIWYG of the Drupal community and is now in D8 core. From the presentation about CKEditor Plugins I learned that pre-made layouts of varying numbers of columns may be added to the editor and other plugins can be installed to improve the user experience: http://www.drupalcamppa.org/session/bringing-editor-experience-new-level-ckeditor-custom-and-contributed-plugins
Various other contributed modules from the CKEditor community may be used to improve the site builder/editor experience and improve their productivity.

Begin at the beginning – Sketching out a full, extended web design process: the initial steps

Many times in redesigning websites there is pressure to jump straight into the visual design and programming phases but spending time & effort in initial planning can improve efficiency and help the later work go more smoothly. Some of the first steps of the planning phase include site content audits, website strategy plans, and card sorting exercises. A content audit takes an inventory of the website’s existing content. As the content is inventoried some problem areas may stand out to web team members. Heuristics and review of site analytics can be used to confirm problem areas (structure usability problems, audience marketing problems). Website strategy plans outline specific web-centric strategies to meet the organization’s goals & business objectives. These planning documents also include details about metrics to measure the success of the strategies and approaches. In the post I attempt to further describe these early steps in the web development process and suggest some resources and articles for learning more.

Phase 1: Planning – Conducting Site Content Audits:

One of the first things in a website redesign process that a web team should do is conduct a Site Content Audit of the existing site pages. “You have to know what you have before you can improve it”. A content audit and site inventory spreadsheet can be an important exercise in understanding what content is in the current site. As the content is inventoried in a Content Audit some problem areas may stand out to the team. These areas can be further analyzed through card-sorting exercises later in the phase 1 planning process. Heuristic knowledge of web design best practices and review of site analytics can be used to further confirm and analyze these problem areas later in the design process.

Conducting Site Content Audits resources & articles:

Content audit guide and template: this article includes information about why an organization should do a website content audit and how it should be performed.

Example content inventory spreadsheets

 

Phase 1: Planning – Writing Website Strategy Plans

Website Strategy Plan outlines specific web-centric strategies to address organizational goals and objectives and metrics to track the success. The website strategy document may consider and incorporate communications objectives and initiatives from the organization’s marketing department as well as business objectives from other departments. The exact scope of the strategy will depend on the client’s organization and what industry they’re in. For example a website strategy plan for higher education institutions may differ than those for commerce stores. The specific web-centric strategies to meet goals may go in-depth into technical detail as a reference to guide the web team’s work.

Metrics to measure the success of strategies can help project managers to decide if a particular approach needs improvement or is working well. Review of web analytic data on site visits may identify if approaches and strategies are working. Metrics may be more qualitative or quantitative based on the strategy statement and nature of the organization’s goals.

The Website Strategy Plan metrics definitions may describe the benchmarks for success in reaching certain target audiences. It’s good practice to define a primary audience to focus efforts on engaging. In the case of higher education institutions the primary audience may be prospective students, and organizational goals may be focused on engaging this group. The scope of work that organizations do may serve many different audiences so it’s good practice to allow think about strategies to reach secondary groups. In the case of colleges or universities secondary audiences such as alumni & donors may may identified and web-centric strategies developed to met the needs of those groups. To understand a typical person from an audience personas may be developed to sketch out their informational needs and online tasks.

Writing Website Strategy Plans resources & articles:

– Web Design for ROI:  The book has a website strategy example and template here: http://www.wd4roi.com/bonus-materials.html

– A web strategy in 10 quite simple steps: This blog post includes information about engaging stakeholder from all levels of the client’s organization.

 

Phase 1: Planning – Running Card Sorting Exercises

Card sorting exercises are used to test a verify the web team’s assumptions about the website’s information architecture, the site structure. As the content is inventoried in a Content Audit some problem areas may stand out to the team. Heuristics (web design best practices) and review of site analytics can be used to confirm usability & audience marketing problem areas in the site’s structure. For example if the analytics say that a certain area of the site is getting a high-bounce rate that may indicate that the section is confusing and site visitors are leaving. Once a problem area or section of the site is identified a Card Sorting Exercise is justified to help redevelop the structure of the section.

 

There are two forms of card sorting: open & closed. Open card sorting is for brainstorming when creating a new website from scratch or used if the whole structure of an existing site is deemed to be confusing to site visitors. Closed card sorting is used if the the site’s top-level categories are well agree upon and if the team just wants to test certain problem areas of the site. The higher-level categories are used as buckets to sort sub-page content below.

 

To confirm that top-level categories fit within norms for the client’s industry it can be useful to perform a competitive analysis of the website’s of other organizations. By comparing the competitor’s top-level categories in a competitive review spreadsheet the client & web team may grasp a better under standing of website navigation norms and section naming for that industry. Seeing top-level navigation schemes compared side by side may reveal common trends and good ideas in section naming. The results of a competitive review can inform the decide on whether to do open or closed card sorting. Site visitors may have certain expectations for using websites from a certain industry. For example, prospective students applying to a graduate program may have expectations on how they should be able apply online and what information about the school should be presented. Competitive reviews of college & university websites can help the web team get a handle on what is normal for an application process to higher education programs. Divergent areas that stand out, as compared to competitors, may be an indication that something is wrong with the existing site’s structure and justify card sorting in that area.

 

There are pros and cons to using traditional card sorting vs. software-facilitated sorting. if a sitemap outline can be automatically generated (from an outline) that’s more efficient than drawing one in Adobe Illustrator. If a spreadsheet of the website’s structure could be output from the CMS (content management system) that would help speed up a content audit.

 

Running Card Sorting Exercises resources & articles:

Card Sorting: Getting the right results: this article describes old card sorting methods vs. newer digital methods (synchronous facilitated or asynchronous).

– Using Card Sorting To Test Information Architecture: This article describes when to perform card sorting exercises and how they can be used to test the web team’s assumptions about a site’s information architecture, the structure.

Content Inventories

A content inventory is a deliverable used in the planning phase of a web design process. It’s a spreadsheet listing pages in the website by section or category. Details to inform the web team regarding frequency of updates may be included. For example if a page should be updated annually it’s noted in the entry about that page. One could consider a content inventory as a sitemap in outline format with more detail about each page. The outline may be organized by the hierarchical categories used in a website. Notes and color coding may be included to indicate the status of certain pages; whether they need improvements or updating.