Instructional materials for guiding students in the analysis of site user interfaces and user eXperience.

1. Open Hack Night
UI Design and User eXperience Analysis

2. Overview
● User Interface (UI) Design
o The Components of a Site
o Interfaces and Users
o Aesthetics and Design Philosophy
● User eXperience (UX) Analysis
o Capturing and analyzing user behavior
 How should the site behave?
● Deliverables and Work Products

3. UI Design
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Twitter Bootstrap
● Responsive framework
o Serves desktop, tablet, and smartphone devices
● Open Source
o JavaScript widgets and CSS rules can be extended
o Site Features

4. UI Design
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
o Site Features
 Collection and Item Discovery
● Searching for materials within the digital collections
● Browsing the digital collections
 Viewing Digitized Images
● OpenSeadragon
 Viewing Digitized Texts
● PDF.js

5. UI Design: Drupal Theme
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Suggested Forms of Analysis
● Practical
o Use Case Analysis
 Identify individual tasks which a student or
researcher would undertake using this site
o Click Paths
 As an end-user, identify the paths you follow in
browsing site pages and collections

6. UI Design: Drupal Theme
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Suggested Forms of Analysis
● Practical
● Theoretical
o Nielsen’s Heuristics
o Tognazzini’s First Principles

7. UI Design: Drupal Theme
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Suggested Forms of Analysis
● Theoretical
o Nielsen’s Heuristics
 Recall and Recognition
● Do you recall how to access certain resources?
 Help and Documentation
● How does terminology facilitate navigation?
 Please see the the entire set of heuristics.

8. UI Design: Drupal Theme
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Suggested Forms of Analysis
● Theoretical
o Tognazzini’s First Principles
 Learnability
● Identify aspects and mechanisms of the theme
which impact familiarization with the site
 Readability
 Please refer to all other principles

9. UI Design: Drupal Theme
● Site Components and User Interfaces
o The Drupal Theme (i. e. the site layout)
 Suggested Forms of Analysis
● Theoretical
o Tognazzini’s First Principles
 Learnability
 Readability
● Isolate and detail styling rules which affect the
ability to read and comprehend site content
 Please refer to all other principles

10. UI Design: Discovery
● Site Components and User Interfaces
o Collection and Item Discovery
 Suggested Forms of Analysis
● Theoretical
o Nielsen’s Heuristics
 [Matching] between [the] system and the real world
● Do terms in the UI resemble those used in
guides for browsing physical library collections?
 Please see the the entire set of heuristics.
o Tognazzini’s First Principles

11. UI Design: Discovery
● Site Components and User Interfaces
o Collection and Item Discovery
 Suggested Forms of Analysis
● Theoretical
o Tognazzini’s First Principles
 Explorable Interfaces
● Identify aspects of the discovery interface which
shape the user’s path
o e. g. Search token behavior
 Please refer to all other principles

12. UI Design: Viewing Images
● Site Components and User Interfaces
o Viewing Images (OpenSeadragon)
 Suggested Forms of Analysis
● Practical
o How does the layout of the interface shape user
interaction with the material?
o What are the limitations of the existing image operations
(e. g. zooming and panning)?

13. UI Design: Viewing Texts
● Site Components and User Interfaces
o Viewing Texts (PDF.js)
 Suggested Forms of Analysis
● Practical
o Are there more complex cases for page navigation which
can be captured (e. g. beyond first and last pages)?
o Item details (descriptive metadata) beneath texts is not
integrated with PDF.js. Could an improved interface
integrate this information with the text itself?

14. UI Design: Deliverables
● Deliverables and Work Products
o Outlining conceptual solutions using the GitHub Wiki
o Drafting and publishing a GitHub Pages site
o Publishing wireframes
 Drawings on Google Drive?
 Adobe Photoshop?
 LucidChart? (https://www.lucidchart.com/)