The Brief for Website

Continuing with the subject of reefs, the new brief requires me to present the information accumulated for an E-pub book on a responsive website. The term, responsive, is a key term that suggest that the site must be accessible on phone, graphics tablet and desktop. Although this is another project, the website should have the same overreaching theme as the Ibook. 

The technical specification of this task includes structuring the page using HTML5 and CSS3 in either Text Wrangler or NotePad ++. Creating the interactive elements and some aspects of the navigation system would involved using Jquery. A framework has been given to produce a website for the audience to get information about nature. 

Planning is a key aspect for this task. It requires the following points:

• Plan your time and the different phases of the project with a detailed production schedule 
• Find and analyse examples of ‘Responsive’ web design including examples of different Navigation Design Patterns currently used in industry
• Visual research, which contributes to devising the look and feel that is consistent to all of your finished output.
• Design the graphical style, interactivity and elements of visual language that will be consistent to all of your finished output.
• Undertake design and technology research into developing content for responsive websites.
• You will produce evidence that the html and css for your website pass validation tests from W3C
• You will produce evidence that your website passes accessibility checks

All of these phrases have to be completed in meet the standards of the brief. 

To respond to these requirements, the blog and post will include content that demonstrates the task listed below.

• Time management
• Conduct thorough research into websites, technology and theoretical work
• Planning, including defining the audience, device and problem
• sketching layouts, diagrams and storyboards
• User testing
• Logging the coding and production
• There is other task to perform as well

Time management

Let's talk about the production schedule. This charts shows a logical sequence of the steps I have made. The first thing that was immediately done was doing the sketch book work, subject and visual research. As mentioned in the evaluation, this process was done first in order to allow me to explore the possibilities.  When it came to the existing technical and design research, I performed the task before the presentation.

At the same , I was preparing my presentation in order to present my idea. I gave myself enough time to produce a few mock ups so that I can get my ideas conveyed. Overall majority of the subjuct research was complete by then.

I then immediately focus on creating and structuring my Ibook. I used Illustrator to produce my background and other graphical assets. The remaining part of the project was making sure that everything was referenced and the book design was captivating.

User testing changes and reflection

One of the key things about this subject was user testing. I generally thought there was not enough constructive feedback to help me improve the product. As mentioned on the blog, I have done 2 user testing sessions in Brighton, Cafe Moska. Although the experience of hearing critical criticism from outside sources, I thought this information given was more useful. I also tested the product on my best friend Jason and my sister.

FG 1

This originally had signs that had identical designs. All 3 users at the first testing suggests that the navigation for the pop overs were not clear enough. After this, I produced 3 retro designed icons that are big enough for the user to touch and get the information with ease.

Many peers 

The 2 of the 4 peers at the second testing thought that there needed a short documentation that helped the user to interact with the video. A decision was made to  include pop overs to ensure the books does not feature another page.  When I tested this on the class, they thought that the signs was clear. 

A couple of users from both tests stated that the headings needed an element that enables them to be at the top level of the hierarchy. I decided to include the signs developed for the buttons next to the text. These icons stand out, making the heading one of the main focal points 

Many users had issues with the home button. They praised the clarity of the colour and text, the font size was not large enough for their fingers to interact. In response to this, the font's scale was increased to 36pt. 

Review about the animation 

Overall, the animation used for the roll over effect are good in Ibooks Author. On preview, the image bounces when touched. I like this attribute because alerts the user that the pop up menu has been activated. Another great animation is the full screen mode. An elegant and quick transition occurs when preview enters full screen mode. It prevents the interface feeling sluggish. 

There have been a lot of changes due to the user feedback. The page design was very bad at making. With the home button, I decided to lower the opacity of the box to ensure the design does not come across as clunky and unprofessional. To enhance the user experience, I have included many presentations that features summaries, facts and galleries. This was done because many of the users thought that some pages were too text heavy.

Fig 1, 2, 3, 

These are the changes made in response from user feedback. 

Evaluation

Brief

The 'wonders of nature' assignment required us to produce an Ibook about nature. The class were given a wide range of topics but only 1 subject can be selected by each class member.  I had to conduct research into many facts and contextual information about the subject. W To meet the breif's standards, I have to create animation, interactive elements, such as video, to enhance the user experience. 

Chosen topic 

The chosen topics was the coral reefs. When I received the subject, I was nervous because the topic offers a wide scope, making it impossible for me to cover all of the aspects about coral reefs. However, the subject turned out to be very interesting. 

Initial idea

Before I started the research, I brainstormed the most relevant areas of coral reefs. I concluded that an interesting book should contain content about the reefs, corals, fishes, tourism, threats, case studies and famous reefs. Using the brainstorm as a guide, I split the topic in chapters and sections. 

I concluded that this book should have 4 chapters. The first chapter focuses on introducing the subject to the user. The sections would  include were overview, kinds of reefs, corals and terms and facts. 

 The 2nd chapter reveals information about the famous reefs, ranging from the Great Barrier Reef to the New Caledonia Reef.  Presenting information about the fishes found in these specific reefs were included to make the chapter look interesting. Chapter 3 is the most emotional part because offers content about the threats to the reefs. This section includes human threats, natural threats and a couple of case studies. Overall this was going to be the longest chapter. The last and the least important chapter  cover tourism. The information included covers kinds of tourism, famous tourist destinations and the local economies.

I completed the research and then focused the quantity of pages used on the book. I aimed to create a book with reasonable amount of pages. To solve this user experience issue, I implemented many widgets from both Ibooks Author and Bookry. I mainly wanted to create a book with lots of interactivity and text that is not overwhelming. 

To ensure my visual and interactive ideas were not restricted, I decided to brainstorm the elements and search for inspirations. I created many mood boards on my sketch book and blog that enabled me to explore the most visual pleasing style.  There were 5 styles: retro, vibrant imagery, dynamic imagery, detailed illustrations with text and texture. After serious amount of consideration, I concluded to include a retro feel. There was an artist who produces art using flat colours. A discovery was made that many modern apps use flat colours, making this style relevant.  Overall I am please with the books design. 

I concluded from the research that the current books are lacking in design. Some books feature over 50 pages, making it overwhelming for the user to consume the information. There were many examples of books where they were unusable due to small text size and the lack of interactive elements. Compared to my product, I am glad with the finished product. 

The navigation is one of the book's boldest points. There is a navigation system on the home page that allows the user to access every chapter. Users are given freedom in a scenario where they intend to return back to the home page. There is a reasonable home button that is functional and very usable. The table of contents is one negative aspect of this project. When in preview the book does not present the tables of content, reducing the user experience. 

Another factor that made this product successful is the answering the why, what and how. This made me more about the needs of the user, allow me to pursuit ideas that anticipates them. 

Management of time 

Overall my time management has been very successful. A chart has been produced to enable to meet the deadline. The chart offers a logical sequence of the task performed. I allotted enough time for the user testing stage. 

Research for animation

This post explores the best practices of designing an interface and 

Designing elements

I have discovered that there many principles of design that needs to be followed whether it is on the web or an Ipad. One of the key things to bear in mind is Fits Law. Ipad does not feature a cursor that enables users to select boxes and links. There is only touch. To ensure the user does not experience any problems with unusable links, the text or hyperlinks should be large enough. There should be a case where the links should be in another colour, such as a solid blue or red, to signify that it is an interactive element. 

Another principle of designing for the web is efficiency. Ipad designs should feature shortcuts and ways of making the reading experience feel quick and learnable. The book should include features, such as presentations and videos, that reduces the learning curve, which is understanding the topic and the interface. 

Colour is an essential role with designing a product on the Ipad. RGB and Hex are the colour modes for the web. RGB reflects light, making the colours appear more vibrant and brighter on the screen.  

Contrast is another key of designing interfaces. There should be enough contrast for both text and buttons to stand out. 

Things to consider 

Provide A Home Page.

Many Ipads and Iphone apps, epecailly games, feature a home page.  Home pages are great reference point where the user can browse the book. The Brighton and Hove buses app features a home page where there is links to timetables and tickets. This is a great indication this an efficent app because users can easily enter the process of finding bus times and purchase tickets within one touch. 

Beware Of Awkward Pop-Overs

Whilst in the development stage, I developed an idea where selective images feature pop overs.  Whilst in my research, the source stated that this concept could ruin the experience if there is too much information cramped. Pop overs with loads of content ruins the flow of the book and makes the impression that all the text has positioned onto one page. 

Make Clear What’s Touchable, And Make It BIG.

The heading above is best described by Jakob Nielsen's  quote “read-tap asymmetry". This refers to making the interactive elements large enough so that the user can recognise whether they are touchable. It is alright to have large text, the most important thing is the interactive galleries, and videos are also among top level of level of hierarchy. 

Ibooks Author 

Ibooks author is an E-book publishing software developed by Mac. The software enables designers to export books to PDF and Ibooks. Ibooks is free on Mac os. 

Ibooks author was first revealed in an education based conference in New York City.  Currently there have been 2 variation of Ibooks author and is only available on Macs. 

Apple primary aim for this software was attract students, and small publishers to create their books.  When published, the author can choose whether to apply a usage fee for their books. 

This software offers users to insert widgets that enhances the user experience.  Glossaries and table of content can be implemented.  

Ipad

Ipad is among the elite graphic tablet products developed by Apple.  The first Ipad was first relised back in 2010. Recent models of this gadget are the retina Ipad Air and the Ipad Mini. The device's interface is built around touch. 

http://www.smashingmagazine.com/pdfs/sm-book-chapter1.pdf
http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/
http://en.wikipedia.org/wiki/IBooks_Author

User testing 2

I conducted another user testing on many people on Monday around Brighton. I tested 5 people to get their opinions on the interface and the design. Although the feedback was an improvement over the previous one, the navigation was the least critically praised. They suggested that the home button is too small and there was not enough contrast. They also suggested that there should name of sections where users can refer to, causing them to get lost.

Overall learning the subject was easy due to the presentations and the visual imagery. They praised that there were signs for selecting the image for information. This was great because I thought this may be problematic for many reasons.  The experience of user testing has been daunting but been a great experience.