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.

User Testing

I user tested my iBook on a 16 year old today and got their response.

First I asked them to open the iBook and to navigate to the table of contents. This is not something that I can really control as iBooks Author presets how everything is navigated, but they did it with ease none the less. They commented on the graphics and how much they liked them and this is positive.

I asked them if they could click on the chapter that they would like to read, and they worked this out with no problems either.

Once within the chapter, they started to interact with it. They noted that in some places it was hard to know whether something was interactive or not, and perhaps I should add more "click here" signs to make it clearer. With the interactive maps featured in Chapter 3, Section three, they said that initially they did not understand what they were supposed to do, but after using a bit of intuition they worked it out rather quickly and all 3 maps were easy to use.

The user commented on the quizzes at the end of several of the sections and said that whilst the first one was unexpected, it did make them feel as if they should be trying to read every piece of information in the build up; 'just in case'. They liked how you could not only swipe between each question on the quiz, but there was arrows to move on too.

There are several image galleries in my iBook, and these were navigated with ease. A comment that made me smile was "oh, but when I click on an image I expect..." (clicks on the image) "oh! it does do that! I was going to say that I expected it to enlarge, and it did!". I am happy that my iBook response in ways that are native and natural to the user.

My user testing went well, and there are some more notes in my sketchbook on it.

Schedule Update

A quick update of where I am in the project

It's 4 days before the deadline, and so far I am relatively on top of my project.

Tasks Completed:

• Analyse the brief
• Brainstorming
• Research
• Gathering Content
• Decided Chapters
• Decided Sections
• Initial Sketches
• Wireframes
• Presented my idea
• Begun my iBook

I'm still adding graphics to my iBook and importing content, as in some places I have drastically reduced the amount of content on the page and I have tried to experiment with different layouts and backgrounds to avoid a dull continuation throughout the book.

Example of experimentation with layout and colours.

I'll be User Testing too in order to get feedback from a member of my target audience and to make appropriate changes. Up to the deadline I will continue to add and develop interactive elements in my iBook to make it as fun and engaging as possible, and in response to the feedback I got from my crit on Wednesday.

Some Completed Pages

Below are some screen shots and explanation of some pages that I have completed so far.

These pages follow a slightly different layout to others that I have. I decided to go with a large map taking up the entire background as I needed a way to communicate the location of the volcanoes. I had a map widget that I created with Bookry, but wasn't happy with it as it's state before it was clicked on was just the Google maps Logo. I had the option of uploading a 'preview' image to it - an image that would give the user an idea what they would see when they clicked on it. But I thought that was pointless, as the preview image would have to be of a map, and they would see a map she they clicked on it, so what's the point of the widget? They wouldn't be able to interact any further than that. This is a case of something I read from an article on Creativebloq.

http://www.creativebloq.com/infographic/8-pro-tips-creating-interactive-infographics-11133560

8 Pro Tips for Creating interactive info graphics

"Before you make your interactive info graphic, it's worth considering why you're making it interactive"

So, I changed the background to an image of the map itself, and then worked content around it. On the first example there is additional interactive content - a photo gallery - which eliminates the need to have a grid of 6 photos on the screen, but in the 2nd I decided to stick with purely 2 images, which was not worth turning into something interactive.

Creating Graphics for Interaction

I have created a series of graphics that I am using in my iBook, and they are all of a similar style.

These are all and will be featured throughout my entire iBook, and a lot of them as part of 'Pop- overs'. A pop over is when you click on an image and then a text box appears above it containing information. I have found these particularly useful as they allow me to bring the text off of the main page and feature in the necessary areas, but not so that it's overwhelming, which a large paragraph of text can be to teenagers. 

Using Pop Overs on the Volcanic Gases page has allowed me to completely remove any text from the page and apply a simple but attractive 6 square grid of these sorts of graphics. 

I've applied the same technique here. I drew out the 4 stages of a typical volcano being formed, removed the majority of the text on the page and allowed the user to 'discover' more information via clicking on the graphic. There is a text box at the top of the page instructing the user to do so. By focusing the users initial attention solely on the graphics, it engages them more and is less likely to put them up. Some will understand the point purely from looking at the graphics, and some will explore for more information. In a way, it makes additional information optional.

Getting Some Feedback

I presented my iBook to the class today and got a little bit of feedback, the main being that I need to condense my content down. The response to the overhaul of the design was good, but the general consensus was that I had far too much text and that it needed to be reduced, so this is something that I am now working on.

Looking into Bookry.

I've started to plan out where the widgets in my iBook will specifically appear;
- Videos to explain complicated concepts (Plate tectonics, Ring of Fire, The Formation of Volcanoes)
- Quiz at the end of every chapter as a run through of what has been learnt.
- Pop over images to represent statistics (About specific Volcanoes e.g. Yellowstone, to explain types of lava)

I also have plans to design some short animations that demonstrate the strength of volcanoes in Chapter 2 - e.g. an animation of a soft drinks can being shaken and then opened with the liquid bursting everywhere.

I want to reduce the amount of text on the page as much as possible, but don't want to reduce the educational quality of the iBook at the same time. This is a balance I'm going to have to get right, but only through experimentation.

So I started to look into the Website 'Bookry' for help with the creation of the widgets I will feature in my iBook.

Bookry is a website that allows you to create your own widgets (from those that they provide) that you an download and then embed into your iBook. It's options include: Maps, Image Gallerys, YouTube Video's, Mix & Match quizzes, Vimeo Videos, Calculators, Charts, integration of Instagram and a 360 degree image viewer. 

I particularly want to use Bookry to embed videos as I have several videos that I'd like to include in my iBook. 

To create a widget on Bookry you 'add' one, and select the type. If you select 'YouTube', this is what will appear.

You give your widget a title, paste in the link and then if you'd like, add a start time and end time. Click save, and then download.

To embed into your iBook, move the .wdgt file you have downloaded into your project folder, and then select 'HTML' from iBooks inbuilt widget library. Navigate to your .wdgt file and upload it. That's it. I like how easy this website is, as I can look at a list of types of widgets and decide what would be appropriate for the subject I'm covering. 

A Design Upheaval, Colour & Fonts

I have completely redesigned my iBook! I was getting stuck in rut. I wasn't totally happy with the design I had and felt I needed to choose a better colour scheme. I had a range of colour schemes that I had chosen off of images that I have seen and from research into Flat UI and the colours used, so I decided to explore further with those.

To start off my redesign, I designed the following.

I felt that these more accurately represented the 'Flat UI' style that I was initially going for, but I still wasn't happy.

I disliked the colours and the restriction that it would give me. There is set spaces for images, quotes and main body text and I felt like this would create a real sense of continuation throughout the iBook, but not necessarily in a good way. I wanted a design that gave me the freedom to experiment with a number of different layouts and would allow me to have any images on the page - not just ones that didn't clash with the super specific colour scheme

So, I designed this. 

I made several design decisions when creating this;

The Volcano

This is the same volcano from my original design. I love the jagged, uneven look and felt it worked as a main feature graphic, so kept it.

Smoke/Lava:

Again, the same as the previous design. They look fun and engaging and much more interesting than a standard picture of a volcano which everyone has already seen.

The Title

My original design featured the word 'Volcanoes' in the centre amongst the smoke/lava of the volcano, as if it was part of it. I decided to remove this as I felt it lacked immediate legibility and took the jagged/rough design a bit too far. It was mimicked in the Chapter number titles too and I felt it was making the design look too childish. I wanted to adhere further towards my target audience of 16 year olds, and whilst some may say they would appreciate simplified designs, I feel my previous design was too childish by their standards.

After sketching some ways that I could incorporate a title into my design in an interesting way, I came across a Facebook post advertising a set of free 'ribbons'. I downloaded them, and straight away saw how I could incorporate a current design trend into my design - the ribbon would wrap around the volcano, simple. I could then take this ribbon and use it to symbolise the 'title' on each and every page, and at the start of every chapter.

Colours

I decided to keep the red from my previous design and turn it into more of an 'accent'. It complements the dark blue of the volcano but also the green of the background (which visually is the most overpowering colour), so I liked it. Alongside the red I also have the option of using the yellow (featured in the smoke cloud of the volcano) as an accent too. The plain green background, which is not overly pure, gave me scope to experiment with text colours (for body text) against it, although for know I'm going to be using black.

This redesign has made me excited to continue with the project, as it's a design I am happy with. Sometimes it's easy to develop a bad relationship with a project simply because you know that the design isn't as good as it could be, so I feel I've definitely improved the feel of my iBook through doing this. 

Fonts

I've chosen a font that I'm going to use to represent Titles and perhaps Sub Titles too - 'Chinese Rocks'. It's fun, only displays Uppercase letters and slightly mimics the new, rougher edge design that I'm perusing. It will not be used for body text - for that I'm leaning towards plain Helvetica (a mixture of Regular & Bold). If not, I will experiment further with body text, as the main thing is that it is as readable and legible as possible.

Content & Graphics

I've pretty much finished gathering my content. I'm slightly concerned that I may have written too much and that I will have to start condensing it within my iBook.

I'm keeping up with my schedule. So far I have presented my idea and completed some initial sketches developed a design that I am happy with on Illustrator, and the next step for me is to start loading in my content into my iBook and to create some graphics to go along with them. As you can see in my previous post I have been testing how the frame of my iBook appears on an iPad.

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.