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.

Visual Research: Flat UI

Whilst looking into existing iBooks and developing ideas for my own, I've been considering Visual Styles.

When I initially imagined my iBook, before I'd done any research, I imagined quite a simplistic, vector shape based design that reflected current design trends. I've had a browse on Pinterest to have a look at existing interfaces and general graphic design to get some more inspiration. I've noticed a lot of 'Flat UI' designs.

"Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations."

http://www.creativebloq.com/graphic-design/what-flat-design-3132112 

Examples of inspiring 'Flat UI'

Example 1                                                                Example 2

Example 1: Brilliant example of a Flat UI graph which would work well for presenting statistics in an iBook. Each graph is very easy to read and eliminates any unnecessary shapes (e.g. the x and y axis on the line graph).

Example 2: Given me inspiration on how I could incorporate icons into my iBook. If I'm going to have images enlarge upon click, is there going to be an 'X' icon to close them? Will I have a home button?

Example 3                                                                     Example 4

Example 3: From this I've started sketching out some potential layouts for the introduction/contents page and am considering how I could present information like this. It seems a good way to present everything at once, mixing in with images to break it up. Reminds me of a tumblr layout - perhaps that's an advantage being aimed at teens? 

Example 4: Another idea for the design of presenting statistics. Relevant to some of the information I need to present - where in the world is there Volcanoes? Love the minimal use of colours and sticking to one colour and using varying shades.

Example 5                                                                      Example 6

Example 5: I'm now sketching ideas for incorporating a sidebar into my iBook. Would this be too intrusive? Is it even possible in iBooks author?

Example 6: A similar style to Example 3. I like the margins between each elements. Quite a logical way of organising, but then quite confusing in some ways. Unsure how this could work in the 'Volcano' sense. 

I'm really quite interested in the idea of using a Flat UI design style. It's very current, and just from looking at the 6 examples above I can see how it's very flexible and rather unlimited on how you can use it. I particularly like the way it's been used for presenting statistics visually (see Examples 1 & 4) and can see that working in my design quite successfully. 

A Cool Resource

I found this website called www.volcanodiscovery.com  that features the current active & dormant volcanoes around the world. It has a map that marks out where they are.

There is an 'embed' option with some HTML. Through my research I discovered that iBooks Author will allow you to embed HTML from an external source into it, so I will definitely use this within either my 'What is a Volcano?' or 'Famous Volcano' chapters. 

Another really cool feature they have on this website is the ability to view live webcams of current volcanoes - whether they're erupting or not. This is something I'd also like to embed into my iBook, as it's refreshed every single day with up to date information that is reliable, and can be used to back up any points I make. E.g. does a volcano have to be spewing Lava in order to be erupting? No, it can be erupting gas, and there are plenty of Volcanoes on video that do that every single day. 

They also feature what look like very scientific diagrams...another element I could incorporate into my iBook.

http://webcams.volcanodiscovery.com/Gamalama

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.