The AZARDI User Interface

Overview

As mentioned in the Unit introduction, I don't like skeuomorphic paper book imitation in digital content readers. It traps the brain and creates a "go-to" navigation mentality instead of a "come-here" content engagement experience. It's incredibly limiting as has been seen in iBooks and various PDF readers.

Most readers tend to follow the iBooks paper model. Readium is a good example. All of this appeals to print book designers and Adobe. But the time and space dimensions that are natural with digital content are neglected.

I have to say right here AZARDI is specifically NOT designed for the linear novel reader. There are plenty of options for the "I want Widows and Orphans" nonsense band. Our focus is improved interactive engagement without device limitation warnings. Therefore we develop for the desktop and translate to devices as web-apps. If they can't handle it, so be it. We have just been through five years of dumb down for iBooks, dumb down for ADE and dumb down for Kindle.

AZARDI is different by design. It has been called "quirky". It is not. It is about putting content reading experiences first and leaving paper book or other branding looks behind. It is about not having to design and produce content to the interface, but allow the interface adapt to the reader and content.

This article discusses the decision making process that went into the AZARDI reflowable interface, and the whys behind the various UI experiences.

In this article reader means the human engaging with the content, reading system is an application.

UI Guiding Principles

Digital content is about engaging with the content. To create a new and unique digital content reading system we had to establish a set of  steering guidelines.

After analysing all the things we didn't like about other reading systems we can up with a small set of guiding principles to test our design decisions against.

First Guiding Principle. Reader Control. With reflowable content the reader must be in control of every possible aspect of their reading experience.

Second Guiding Principle. Reading Experience. The reading experience comes from content, transitions and tools. There are no visual UI ornaments.

Third Guiding Principle. Seamless Engagement. The reader should not have to disengage with the reading experience to do something.

Fourth Guiding Principle. Seamless Navigation. Sequential and link Navigation should come to the user where possible. 

Fifth Guiding Principle. Content Neutrality. The reading system must not impose any rules that affect content production.

The nice thing about have a set of guidelines is that it is easy to test implementation decisions in an empirical manner.

Customizing the Reading Experience

If you only have an iPad, all problems look like a 1024px 4:3 aspect ratio paper problem!

If a reader is to address a wide range of monitors, devices, windows and viewports the rules change. Developers have two choices:

1. Create a fixed reading region in which the application controls most of the content flow rules with a few user options. Put in a bit of decorative chrome to fill up the space.
2. Create an interface which allows the reader to control all of the flow rules and let the content dominate the available viewport.

The first approach is predominant in available readers. It is based on the assumption that most content is linear reading, standard trade content and needs some form of pagination so people think they are reading "a book".

AZARDI takes the second approach because we want the reading system to be usable on all platforms and devices and we want the reading experience to be as consistent as possible across platforms.

With reflowable content the user must be in total control of the content presentation experience for they type of content they are reading,  their platform screen size and aspect,  to deliver a consistent and valuable content engagement experience.

We started off with a button settings panel where the user can change their preferences just like every other reader out there. This results in awkward "too and fro" seesawing in the interface. It was the lazy approach. The separation of set-up from content just was not working and violated our guidelines.

We ditched the menus and pop-up dialogues and came up with the Reading Preferences personalization overlay. The most important benefit of this was the user can instantly see their changes on the content as they make their reading preference decisions. This was a new and unique reading system feature. With most readers you have to go to settings, make an abstract choice from a set of predefined options and hope for the best.

Importantly individual reading preferences are transparently saved for each book, including window size on the desktop version.

Font size

Font size adjustment is essential for accessibility, but also a major contributor to reading comfort and speed. This is probably the single most important adjustment available due to differences in monitor resolution and screen size. An example is the appearance of font size differences in iPad and iPad mini for this very reason.

There were a number of false starts with sets of predefined font-size options. In our reading tests we found subtlety of adjustment was essential across a range of monitor sizes and resolutions. Five or 10 predefined steps just doesn't cut it. We had to break the "always too small / too large" syndrome that font size adjustments seem to deliver in every reading system. 

AZARDI allows font adjustments from as small as you like to as large as you like in fractional em steps. We didn't feel there was a requirement to place a maximum or minimum font size restriction as we are assuming readers are wanting to optimize their reading experience. If a book uses pixel sizes the font size will not be applied.

The readers font-size settings are saved for each book.

Margins

Margin control is essential for good linear reading. AZARDI allows adjustment from no margins to any size. Adjusting margin equally all round created a strange looking page which is unpleasant to read, so in the final implementation the top and bottom margins adjust at half the size of the left and right margins. This creates a consistent reading experience for a wide range of content from novels to reference works. It's a compromise, but the option was tools to adjust left/right and top/bottom margins which came across as a negative experience in testing.

Line spacing

This was a difficult area to get right, but it has significant effect on the fast linear or scan reading experience. The interesting effect with this adjustment is that as line spacing is closed the increasing blackness and deteriorating readability of the page can be seen instantly for a given font size.

Like font size we kept the change steps subtle so fine reading preference adjustments can be made. Again the five or ten step adjustment just doesn't cut it. 

Justify and Hyphenate

The user can modify justification and hyphenation on or off in any combination for their interface to their preferences. For example in four-column mode with column rule on and a relatively small font size, ragged right with justification turned off can be a good reading experience for appropriate content.

Because hyphenation uses the underlying rendering engine AZARDI has no control over the hyphenation specifics. The experience will be different in various browsers and languages. It is a start.

My own monitor recreational reading preference is justified with hyphens off and the font-size/column width/margin combination adjusted for pleasant word spacing.

Paging and Flow

Locking pagination to two columns and imitation paper spreads was never going to happen for a lot of reasons. Beside the fact that paper chrome on digital content is plain idiotic, if you have a 1440px X 900px monitor, and you want to use the entire reading surface it just doesn't work. If you want multiple columns a gutter shadow in all columns starts looking even more stupid.

All of our content flow decisions were made with a wide range of text, image, trade, academic, education and reference content. Heavily linked content was a significant issue as well. (Hint: if your content is really heavily linked use scrolling mode. The links come to the top every time.)

it was a given that we had to have both flow (vertical scrolling) and horizontal column controlled navigation. The only real variable was the number of columns that could be set on a large monitor. The arbitrary decision was four based on maximum current monitor size and sensible column reading widths.

With a dozen research papers to read and a 21 inch monitor, four columns and a readable font size allows a serious and fast reading content engagement experience.

Linear Document Navigation

Linked with this subject is document navigation. Because there is a Side TOC inter-section navigation is easy and fast.

Page navigation in the browser or desktop versions is done with the buttons on the interface, The PgUp and PgDn keys, the Left and Right arrow keys, and clickable navigation areas on the left and right of the page which can be seen with a cursor change.

In the mobile versions the navigation buttons are available and page changing is with the normal swipe actions.

Section navigation uses the same keyboard combinations while holding the Shift key.

Column Rule

The optional column rule is available for turning on or off. With dense content with a lot of images and charts this can assist the line eye scan.

There is no gutter shadow. There is no page flipping. There never will be. Buy a print book. They nearly all have these features. 

Referenced Content Details

Images. We incorporated pop-up images with zoom and scroll but made the mistake of having it as a size locked window. In the next release this will be able to be expanded to the full screen so it can be more easily used in a classroom mode.

Window zoom only works for images that are in the HTML and not CSS background images. There does not seem a real case to make background images accessible so this will remain unless someone convinces us of a compelling case to change it.

Tables. Large tables are also potentially problematic. Some solutions (Kindle) say make the table an images but that is a poor compromise.

Currently AZARDI addresses very large tables by recommending switching to flow mode and then adjusting the screen size. This not optimal.

In the next release double-clicking table will also open it in an independent zooming, scrolling window with fit to width/height options for those awkward tables.

Tables and Lists of Content

Navigation is one area where the ePub3 specification has done a reasonably good job. Again most readers make back-and-forth page flipping more important that good navigation.

However it is not enough just to have navigation components, we also need good navigation experiences.

Expanding Side TOC

Interactive navigation is a key benefit of digital content. Especially if it is non-linear in nature or use. The dominant readers available all make TOC navigation components difficult to use with a TOC to content back and forth seesaw interaction.

Navigation had to be easy and direct. Not only in the TOC, but also the List-of structures, page-number navigation and custom content or digital book navigation. We invented the expanding Side-TOC which makes all content structures instantly available.

The expanding TOC is designed to allow non-linear reading content to be navigated quickly without having to go backwards and forwards to a TOC page (which you can still do). For example it allows a reader to navigate through a journal and read all the article abstracts without any backward and forward navigation.

Unfortunately the mobile version doesn't have the side-TOC luxury and the TOC to content seesaw is required.

Landmarks

The optional landmarks content, like the ePub2 guide before is a bit of an orphan structure. It shouldn't be. There is a significant list of epub:type properties that can lead the user through the content in a different way. Obviously this does not apply to the novel, but reference and education material with complex section structures do benefit from a well constructed Landmarks page.

AZARDI supports and displays landmarks.

Fixed Layout Differences

When implementing fixed layout content control changes from the reader to the publisher/designer. However we still have to address the issue of any monitor size interactively.

While the user cannot change the content features there are addition tools to help them view fixed layout content optimally and comfortably.

General viewing and accessibility tools

Window Resizing. The window can be resized from postage-stamp to full screen to address optimal reading experiences on an monitor.

Window Zooming. The window can be zoomed up to 200% to allow for

Aspect Easing. The viewport can be adjust for optimum presentation or fill the viewport.

Mixed Fixed and Flow Layout

AZARDI has a unique feature that it can display reflowable content in a fixed-layout page. This has obvious benefits for many types of content and take ePub3 into the content app area.

When reflowable content is displayed in a spread of any type it is under the publisher/designer controls, or controls that are inserted with the page. The standard reflowable customization tools are not applied.