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/)