Testing | 1st test

As part of my website testing I have asked a few of my friends and family to test my website. I did the first one over skype hence why I'm in the bottom left giving instructions of what to scroll to. I found that my website didn't work nearly as well on this size screen (17" widescreen monitor). As you can see my girlfriend had to go to the normal scroll bar on the side before the actual navigation popped out, but as soon as it did she noticed it and began to use it. She commented about the smooth scroll feature and the navigation being very obvious even after some issues to start with. She faultlessly found all the things I was looking for and didn't get confused. This has increased my confidence in the usability of my website, but I am fairly disappointed with how the website responded at this size. 

For the next week I will be working on getting my website to work at this size as well as mobile size as it's currently not responding as i'd like. 

Organisation | Asset Register pt.2

Here is my second asset register that holds links and descriptions as to where all my content is sourced from. I used a total of 4 sources as you can see below in the spreadsheet. The most helpful was the BBC natural world source, and it was by far the most reliable too due to being broadcast by The BBC. 

Below is the final part of my asset register. It holds information about where i got my jquery scripts from for my website. I used smooth scroll effect on my navigation and a responsive image gallery in the first section of my website, both of which are documented in this document. There's also the fixing script i used on my scroll script to smooth it out. 

Organisation | Asset Register

Throughout this project I've been adding to my asset register. It is used to keep a record of where I get my images from and what they're used for. Below are numerous screenshots of my video/images asset register, it features 44 elements, with URL's and descriptions to support. I also have a text and jQuery code one which I will upload in due course.

Evidence of interactive design | Web + iBook

One of the main learning outcomes of this project was designing something interactive, taking into considerations interactive design principles and practices. Below are a few videos of the interactive elements that can be found in my iBook and website.

The following interactive elements can be found in my iBook:
- Scroll box
- Interactive images
- Pop-up boxes
- Google Maps widget
- YouTube widget
- Multiple answer quiz


And below are the interactive elements found on my website:
- Click button start with rollover
- jQuery image gallery
- Smooth scroll navigation
- Sticky horizontal navigation bar with interactive hover (opacity/position change)
- Hover sensitive images (rotate/size decrease)

Issues | Jumping scroll fixed!

After two hours looking for a problem in my jquery I started searching the internet for new bits of code to add to my jquery. After trying a few I came across this fix:



Try changing this line:

$(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
  location.hash = target;
});
To:

 $(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {    
    if(history.pushState) {
        history.pushState(null, null, target);
    }
    else {
        location.hash = target;
    }
});


(Link: http://stackoverflow.com/questions/11007929/jquery-smooth-scroll-jumps-upon-first-load-i-with-fixed-side-bar)

It's completely sorted the jumping during a smooth scroll. I knew it was something to do with the .animate line but i couldn't understand what I was mean't to change it too. Below is a video of the fixed smooth scroll!

Issues | Design and Technical

I've been having problems positioning 6 images next to each other in a single row for my gallery half way down my page. The fact I had id's for every single image made my code a nightmare and to make it was responsive was going to be horrific. I  have now realised I can use column count and its sorted out my problem completely. I've applied column count and it now works really well. You can see a screenshot of my code below!

I then went on to develop this idea further and add some interactivity. I set a hover state using a pseudo class. That means that on hover the image gets smaller. Its something very small but I think it adds a playful and fun element. Again you can see this below in the screenshot.

Here's a video of the final product!

Development | Final iBook section

I've added in a Google Maps widget that links straight to the Himalayas. This is the final page of my iBook. I think it works well because of the breathtaking background and option to discover the Himalayas through the Google Maps widget. I've added a shadow to the maps widget and to the sign above it. This makes it pop out of the page and give it a 3d feel that I think works really well. 

I've added this title page to the start of the final section. I've used an old style compass graphic and then altitude/air pressure chapter identifiers to give a consistent feel. I think the background graphic gives a feel of adventure and discovery to this final section which I really like, and it gives the user a visual que for what is coming up. 

Development | iBook 3

Today I made changes to my iBook that were listed in my feedback post. As you can see above I have added in chapter identifiers to the pages that they were missing from. I've also enlarged the content boxes and removed the faded edge from my second page. The final change that I needed to make was to the content pages as these were completely blank and so I added text to describe the chapter and the mountain graphic as this adds consistency between my iBook and website.

Next I plan on adding to the Fold Mountains section as this is currently quite bland. I plan to add a Google Maps widget, a title page and a background texture to the page saturated in text.

Issues | Design and Technical 2

As you can see here my website has all the content and navigation working finally. I decided I wanted to make the page scroll smoothly instead of jumping up or down to a specific element. To do this I used a jQuery script which makes the page scroll smoothy up and down as you click on the different buttons. It has however been a real pain recently and I cannot seem to solve it. As you've seen in the video the scroll starts smoothly, but just before arriving at its target it jumps causing a very jarring experience for the user. Another issue is that the element is meant to be in the centre of the page once the scroll has stopped, but as you can see it is currently stopping right at the top of the page. This has something to do with the margins applied to different elements as the element targeted in my first section has a large top margin, causing the scroll to think this is the top of the visual element.  Hopefully i'll be able to solve this soon changing some of the parameters in the script.

Feedback | Critique

I thought the feedback from crit today was very helpful. There was a positive reaction to my site's overall design and my classmates commented upon the sense of drama created by the background image at the top, as well as the way it blended into the rest of the site really well. The feedback for my iBook was pretty much the same. I have used vibrant, full screen backgrounds for my pages to make the most of the iPad display. This stirred up mostly positive reactions, but some people felt they were a bit overpowering and that I should make my content elements slightly larger to take up more of the viewers attention.

From looking at other people's products I realised I'd missed out something very key that could add something extra to the users experience - The Google Maps widget. This would be great interactivity and would help people to learn where the Himalayas are in the world.

To do:

- Enlarge content elements
- Content page needed
- Chapter Identifiers need to be consistent
- Add Google Map widget

Development | iBook 2

I'm still not completely sure of what I want the iBook to graphically look like. I know from reading the brief that it needed to be more interactive than the website, i figured this is due to its lack of technical difficulty in comparison to the website.

I have been toying about with ideas and finally settled with doing full page background images for the majority of the pages in my iBook. This reflects part of my website design, but the rest of it will be very different as consistency wasn't a compulsory element of our products. I will be going for a more contemporary style with my iBook. I think the use of full page background images will take advantage of the fantastic screen the iPad has. Small pop-over buttons and other interactive elements will go over the top of these backgrounds for users' to click upon for more information.

Here's an example of one my pages so far for the first section of my iBook:

Development | iBook 1

At the beginning of my design for both my website and iBook I thought I'd come up with a really great concept and something I'd not seen before. I wanted to create a website on top of a huge scrolling background image of a mountain. This turned out to be an issue as it wouldn't repsond correctly and the information would be too small to see after a while, as well as the background being far too small for have any impact.

With this in mind I thought I could go into my iBook and replicate this idea. I wanted a vertical scroll to give the user a feeling of going up and down the mountain, but there isn't support for this even in the portait only templates. I have now decided to completely avoid this original idea and go with something new. My next post about my iBook will detail these new ideas. 

An example of what I wanted my website/iBook to look like:

Source: http://news-by-design.com/wp-content/uploads
/2013/04/land-and-sea-MAHOOSIVE.jpg