I Think I've Finished...

I think I have FINALLY (!) finished my iBook! Here's a few screenshots of what it looks like and some of my favourite pages and final developments.

I really love the graphics on this page. If I had more time I'd like to implement more interactivity to it, as at this time there is none, but I'm really happy with the graphics. I think they really fit the visual style of the iBook and they easily explain and demonstrate the different types of volcano. I've tried to keep this visual style throughout the entire iBook, and I think it's successful. When I did some testing of my iBook and asked for a general opinion,  I was complemented on this. 

Also, in the final stages of the creation of my iBook I made the decision to feature proper images at a low opacity in the background. The decision to do this was based on my feeling that the pages of information (e.g. not the title pages or chapter beginnings) were looking quite blank. Text was sitting against pure green background (with the slight alternation of shades) and each page was looking dull and not very inviting. The images are relevant to the chapter that it's in, and help tie all of the pages within that chapter together. I was careful not to set them at too high of an opacity so as not to reduce readability of the page.

I like this page as it's simple, fun and has a good level of interactivity. I think the graphics I've included here are great, and overall I think the graphics in my iBook are one of it's strengths. Below are some examples of them.

Whilst I did experiment with textures (and you can see that in particular on the front cover of the iBook and in the Table of Contents) I made the decision to lay off of them on the smaller graphics. I felt it would detract too much and take the design either further from its Flat UI inspired roots. Instead I experimented with lighter shaded shapes above the original (e.g. to represent light) and this is particularly obvious in the 'glass of water' and 'soft drink' examples above. 

Another feature I decided to implement whilst finishing up my iBook was something I refer to as the 'yellow info bar'.

These sit in the top left hand corner of the page of a lot of pages, and on the designated chapters will run throughout the entire thing. They're designed to look like they're attached to the main 'Ribbon' title, so end behind it but do not run through the entire back (where it would be visible). I decided to have them as I was aware that my chosen Red & Yellow went well together, and I needed somewhere to put Sub-titles. They work well and are in a position that allows me to consistently put them in the same spot as they will never detract from the content on the page. 

Above is an example of my efforts to really simplify what the end user is seeing on the screen. When creating these, I tried to consider the target audience. Yes, asking a question does not make it 'specific' to 16 year olds, but the design is rather candid and basic but gets straight to the point. The added slightly wonky arrow adds a small sense of quirkiness and I like the look that it gives. These are shown at the start of selected Sections within my iBook, and aim to give the user an immediate understanding of what's going to be covered in the section - the answer to that question.

Overcoming Software Restrictions

Designing my iBook through live editing that consistently updates on the iPad to allow me to check all new elements and make decisions based on the appearance of the iBook on it. 

I just wanted to give a quick update of where I am in the project.

I'm currently building my iBook in iBooks Author. I have chosen a design that I want to settle on, so am loading those into the software and overcoming problems with sizing and the restrictions that iBooks Author has.

I understand that iBooks Author is designed to be as easy and essentially fool-proof for anyone to use, you just replace their content with yours and tah-da! there's your iBook, but when I'm trying to design something a bit more complex it's near impossible. I've had to simplify my design and reconsider how the book shall read.

A restriction that I've found is with the 'Table of Contents'. If I had it my way, I would remove it. It's annoying and just doesn't feel very user friendly for someone who is new to using iBooks. My initial plan was to have just the one contents page, with links to each of the 4 chapters incorporated into the design, which can then be navigated back to from anywhere within the iBook. This, however, has not worked out.

My initial plan for the design of my one contents page

iBooks author requires that you have a separate contents page for each chapter, which you are presented with at the beginning of the iBook. Like below.

Chapter 1                                                                                       Chapter 2

In order to overcome this, I needed to overhaul the way my iBook navigated and redesign the pages that navigate to each chapter. I went back to my sketchbook and sketched some ideas, and then attempted the following design.

One of the first problems I came across was the way the contents page for each chapter displays a preview of all of the pages in that chapter along the bottom of the page, so it obstructed the design of the page and I did not like the look of it.

So, I then had to re-shift the border of the page so that it appeared above and around that area where the thumbnails would appear. I just preferred the look of it and it provided a clearer backing for the thumbnails to stand against. Also, there's nothing in my design that overlays anything else, so by having a relatively transparent rectangle laying over the top of it it did not match the design style.

This meant reducing the amount of the volcano that was visible, but I'm not too bothered by this as I think the lava that I have drawn that comes out of the top of it makes it clear enough that it's a volcano. 

Back to the re-design design of the Contents pages. I was aiming for an alternate left-right-left-right on the content links as I felt it would break up the continuous repeat of having each page designed exactly the same. So, I designed the following pages.

So, I imported this and then started formatting the titles that would appear on each page and positioning them where I thought correct. Whilst doing this I discovered that if you move one thing on one page, e.g. the Chapter title, it moves it on all of the other contents pages too. This meant I couldn't have alternating positions on each page and would need to settle for a design that was the same on each page. I stuck with having the text on the right hand side and the volcano on the left and decided on alternating the colours on each page instead. 

I've now started to import all of my content into my iBook.

An Inspirational iBook

A while ago I was browsing www.kickstarter.com and came across a project called 'Chineasy'. I read the article, watched the promotional video and thought that the idea was absolutely brilliant. Then, thinking no more of it, I closed the page and haven't looked much into it since.

Today whilst having a quick browse through the iBooks online Library via the iBooks app, I saw that the creators of 'Chineasy' released the iBook version of their book. Knowing that it contained, what some consider, a "revolutionary" way to learn a language, I downloaded the free sample to have a look. 

I'd like to analyse it quickly, whilst I'm in the midst of my project, as I am currently in the middle of trying to workout layouts through constantly drawing wireframes. I find the layout of this book really inspiring and a brilliant platform for someone to learn from. 

There is a very consistent design style. It's very current, very engaging and very aesthetically pleasing.

Example 1: Chineasy: The New Way to Read Chinese

Comparing the above and below examples, there is not a consistent colour scheme but rather a consistent colour style - very, very slightly muted. Some pages are coloured through a set of shades of a colour (e.g. above, with orang/red), whereas others work with contrasting colours, and offsetting a darker shade against a lighter one. 

The use of the full, portrait image on the left compared to the smaller, 4-piece grid offsets the page and prevents the need to have a page of 4 images on the left as well. It reminds me a of a magazine - the advertisement, then the magazine content.

Example 2: Chineasy: The New Way to Read Chinese

The layouts vary from page to page, but general stick to a grid system. Example one features a clear 2up - 2down grid, whereas example 2 has a column of imagery and then matching information on the outer edge of the page, leaving breathing space within the central column. I think this is a brilliant way to present information - break it into small chunks and arrange it in a way that makes logical sense. The way Example 2 is organised is similar to what I've seen in a lot of magazines, and even shopping catalogues - the way icons are used to match up with the information that is in a seperate area on the page. 

Example 3: Chineasy: The New Way to Read Chinese

The use of dramatic comparisons, using imagery that we recognise, seems to be a good way to enable someone to learn something easily. My dad always told me that if I ever needed to remember a set of numbers to turn them into something visual in my mind based on what they looked like (e.g. number 2 = swans) and then make a short one sentence story containing all of those things. This is a similar thing, associating the information with something very visual and recognisable, increasing the chance of the reader being able to remember it. 

Another Analysis

Whilst sifting through some real questionable material on the iBook store, I came across a really cool and interesting Enhanced iBook called "The Senses".

The iBook is made up of a series of pages that contain a lot of interactive images and pop-ups. You work it by reading the text and then clicking on the various X's and circles dotted over the imagery. Clicking upon these brings up additional pages (pop ups) which allow you to interact further and find out more information. If you look the example below, you can see a clickable point on the males cheek. It stands out enough so that you know you're supposed to click it.

Clicking upon this brings up another page that contains an interactive diagram on the same image that we saw on the previous page. There's a good sense of continuity and it highlights what the user needs to do to interact once they see the additional features overlaid onto the original image.

When you click on the small plus by the eye, a small animation starts that visual explains the points made in the accompanying text. I like the way they have chosen to animate what some would just leave as imagery. It creates a stronger, more visual way of the user learning and is more likely to be successful.

I also like the continuity between chronological pages. As you can see above, they've used the either side of the males face to continue to the next page of the same chapter. This keeps a similar layout that the user has already understood from the first page but changes it slightly to avoid blatant, identical pages each time which can get boring. 

Another good example of using animation to explain what could just be a diagram is the following (images below). The idea is that you click the X's and it visually demonstrates what it means by our eyes running to opposite sides of our brains. 

I think this is a really successful way of demonstrating a point, especially by giving them their own pages that are optional to click on. These interactive diagrams are placed, generally, centrally on the page against a very clear (sleek looking) background and, unlike other iBooks, the surrounding is not cluttered by text. They're of a nice design style that fits within the overall style of the book.

Decisive Chapters, Sections & Headings

As I've been doing general research into the topic of 'Volcanoes', I've been trying to work out a way of arranging all of that information into specific chapters, sections & headings.

To start it all off, I brainstormed everything I had researched on the topic, any questions I wanted to ask etc.

Digitalisation of my existing Hand-drawn Brainstorm

This covered a lot, so I started to break it down into specific categories. I want to aim towards having at least 4 chapters, so I created 4 questions. I can add more later if I see fit.

▸  What is a Volcano?

This question gives me room to explore the varying types of volcanoes, as we'll as move towards a more 'science' route in the explanation of how they're formed.

▸  Why do they erupt?

Again, from this question I can delve deeper into scientific explanations. There's room for me to use a lot of diagrams and interactions (e.g. animations) that will help explain why they erupt, as well as scope for me to link Volcanoes to other Natural Hazards (Natural Hazards = A subject covered by A-Level students).

▸  What damage do they cause?

Good opportunity for interesting demographics and statistics, as well as animations and videos/interviews from previous explosions and/or peoples experiences.

▸  Are there any famous Volcanoes or Eruptions?

There are a ton of documentaries on Volcanoes, so this will allow me to go in depth on several well known Volcanoes (e.g. Yellowstone National Park) and bring in content from external sources that monitor current active Volcanoes. Good scope for me to explore the history of Volcanic Eruptions and how they've shaped the planet we live on today.

I felt as if these questions gave me a good opportunity to create an iBook that was well rounded and covered a lot of ground within the subject of Volcanoes. If I decided to use these as my Chapter's, after an Introduction chapter and ending with a Conclusive chapter, I then needed to decide the subjects within and start to consider headings & article names. 

Digitalisation of my existing expansion on chapters

Above you can see how I have expanded on each chapter. There looks like a lot, but there's an average of around 5 sections within each Chapter. Each of these sections can now have their own page (or 2....or 3...) and will form my iBook. 

Then I turned all of these chapters and sections into documents, divided by folder by chapter name to make it easy for me to access and import information. As I fill each document with information I will build the content of my iBook page by page. Within these documents I can also apply styles to the text to differentiate between Headings and Subheadings etc. 

Each folder is numbered by the order I'd like it to appear in the iBook, as well as each section within those (see image below). Part of the brief is to create a narrative, and the questions that I initially came up with before I expanded into these sections are designed to run on from each other - a natural progression. They're also titled so they can be skipped to straight away - it's not necessary to read the entire iBook in order for a section to make sense. What I'd like to do, also, is have one page in one chapter (e.g. "What else erupts from Volcanoes?") link to a page from another (e.g. "Volcanic Ash"), to direct the user to a different page in order to find out more information.

Analysing iBooks

To do some more research, I'm going to analyse some existing 'enhanced' and regular iBooks. This should help me gain some understanding on what makes a successful iBook and what doesn't, as well as further identify any conventions and patterns throughout them. I viewed them on my iPad, to see the full experience the iBook gives. Screenshots are direct from the iPad.

'Our Wild Planet'
The first iBook I analysed was one that was not enhanced, but very similar to what I've been asked to do. It's an information book about different types of animals, with different chapters explaining different animals that fall into different categories within each.

Our Wild Planet - Nature Through The Eyes of a Project Noah Community

This is the very first page you see when you open the iBook. You can see that the bottom of the screen contains a row of dots. Each of those dots represent a chapter, and then within that chapter there additional sections with their own pages. In the above image you can see I am in Chapter 1, Page 1. Below you can see how when you scroll through the different chapters, each row of images (previews of what's on that page) changes. 

Once I had delved into one of the chapters, I noticed an obvious recurring theme about all of the pages containing content - they're all pretty much the same! There seems to be very little difference between each information page, no matter what category it may be in - a page in the 'birds' category is the same as a page in the 'mammals' and then the same as one in the 'anthropods' category.

The above screen caps are from the 'mammals' and 'birds' categories. They both contain a portrait image on either the far left or right, with specific styles for the heading, subtitle and body text. To me, this is quite a dull way of presenting information. It does not look that interesting. The black font against the stark white background is too text-book-like and despite the small chunks of information, I don't think this provides an easy way to learn. 

There are points, though, randomly throughout the iBook where there is good positioning of text around images. The images are large and cover the entire page, forcing the text to work around it. In some areas it works, some not so much, but I think it's a much more successful way of laying out the information. 

Example 1                                                                             Example 2

Example 1: Relatively successful. Good use of a large image, and the darker text works well with the green. 

Example 2: Excellent use of space around the main subject of the image & well coloured text that is very readable against the green background. Your eyes travel around the entire page.

There is no interaction in this iBook, it's purely for reference. You can easily skip to and from chapters, and using the iBook app you can take notes along the way and view an outline of the entire book. You can see below the toolbar you use the navigate, and the notes/summary page.

--------------------------------------------------------------------------------------------------------------------------

'Visual Dictionary - 11 Languages'

Next up is this pure interaction based iBook. It's an iBook that teaches foreign languages and, in the same, the words for different items in an airport. There are only two types of interaction - swiping from page to page, and sound upon selection of images. I recorded a short video of how you interact with the iBook.

I think the lack of varied interaction works in this iBook. Whilst I only download the sample version so I haven't seen the entire thing, I do think perhaps a small bit of more information could be included. Either an introduction screen or a small piece of text on each page.

Compared to my previous analysis, this iBook is much more reliant on the users common sense and whether they understand that they can click on an image and it will play a sound. Small sound icons may help to ensure that people get the full experience from it.

The graphics are very simple and easy to understand. The title of the book contains the word 'symbols', so the iBook itself uses very recognisable 'symbols' that are generally understood as signs worldwide. 

As you can see above, no matter which page or chapter you're on, or which language you're trying to learn, the page layout stays exactly the same. This provides great sense of continuity and makes it extremely easy to navigate, but does look a bit dull after a while. Perhaps an inclusion of the countries flags somewhere? May help.