Personas

Personas are pretty difficult to complete with my target audience due to their age, and restrictions that poses on me. Therefore it is important to note that these personas are based on questions asked by teacher and parents and passed on to me.

While important, the childs persona isn’t the only relevant one in this situation as parents are also revelant personas as they are the ones who will allow their child to use technology, or purchase products for their child.

The mother works hard to earn a living to support her family, she likes to see her daughter happy and will do what she can to keep her entertained. That said, she wants to make sure her child is doing something reasonably productive, even if it is while she is playing a game. You can see the persona for the mother here;

persona-mother.jpg

The daughters persona is much different, as while she works hard at school to impress her parents, and for her own benifit, she much more appreciates her down time. She wants to relax and have fun, anything like learning doesn’t seem like a great use of her down time. As she has no/little sense of the value of money, she relies no her mother to provide her toys and luxuries. You can see the persona for the daughter here;

persona-daughter.jpg

Wireframes & User Journey

The User Journey is very important, once the wire frames have been completed it is vital to make sure that every user action has been accounted for. Below is the user journey for the museum experience.

1; The first stage allows the user select the language they pick – accessibility is vital here

2; The second stage allows the user to pick the difficulty of the information provided – this is important because it allows the user to decide what type of experience they want.

3; Select gender & age- data collect for the government budgets would be a great resource the in app service can provide to allow the budget to be spent more wisely. This is something my research suggests the government currently struggle with.

4; This page allows the user to pic specifically what topic they learn about within the museum

5; The captain is introduced to the user, the above wireframe was to show the captain on the left with a speech bubble on the right. I decided against this because it was too much to read and should instead be an audio track played into headphones of the user with a subtitles option for the deaf.

6; This is the main user interface that has all the basic functions of the experience, the camera icon takes you to the camera function where the user will see everything in black and white but have interactive objects appearing in colour. The map icon guides the user along their route within the museum experience, and finally there is the captain who will answer any of the user’s questions as they travel around the exhibition. You can see both of the wireframes at 7 & 8.

9-11; The first interactive element that the user would see is the boats section, you can see below the different wireframes that show the sleeping quarters of the boat and where the different staff slept, along with information on the lengths of trips the boats take.

12-15; This section shows the user the two most important weapons used when capturing a whale, what they look like, how they work and how they were used.

16-18; The second interactive section is of the right whale skeleton featured in the centre of the exhibition, it shows the user information on the scale of the animal, dietary needs, and al;so allows the user to see the different layers within the whale itself bones, organs, muscles and skin.

19; The selfie section allows the user to take a photograph in the costumes of classic whalers, the captain and the seamen.  Once one has been take the user can see the pictures taken by other visitors.

20-22; This section of the exhibition is dedicated to the polar bears and and the eating habits and timeline of population

23-25; This section allows the user to relax in the 3D room with the ability to learn more on the iPad, play a game and also an art board to allow people to draw artwork that get gets submitted to the collection.

26; The second to last section of the website shows the user different ways to get involved with saving whales

24; The final section of the website shows the user a video of whales that is being projected on the wall of the final room and also on the outside of the building, this videos frames can be edited by a user much like the video found in my research

 

Two things noting are;

The social network login;

This is something that I have considered but decided against. The reasons for having social network login was to allow the museum to collect data on it’s visitors- something that my research suggested that the government struggles to collect.  While it is important to collect data on the visitor – there are other ways of doing this that I have shown new wireframe below to collect the gender and age of the user.

The OLD menu;

Wireframe8.png

I decided that the menu did not require a social feed as it looked clunky and would be unnecessary.

wireframesfinal.png

UI & UX Research

“Good Artists Copy; Great Artists Steal” – Steve Jobs, while I don’t plan to steal other peoples work, I think it is very important for me to take inspiration from design trends to create the best website possible, below are great inspiration for ideas for my own website. I have ensured I have created the best design simply by starting at the mobile and working up to the desktop computer. This allows me to create with the experience in the forefront of my mind. The design should be understood from one platform to the next, therefore the design inspiration I have taken into consideration here, effects the various different platforms in different ways.

Taking advantage of screen estate and the advantages of the different types of device is essential. The hover feature on the desktop and the touch feature on tablets allow for different experiences, therefore I can use the same layouts with different abilities on each.

I need to remember for marketability of the website it is vital that there is an overall similarity between the mobile and the desktop versions of the site. This will add to the branding of my site and the success of marketing relies on good branding.

On the desktop version for example I can use the hover feature to highlight what is to be selected as can be seen in the examples below.
1 2

On the mobile, it would be ideal to create an experience very similar of a normal application, therefore using similar styles to an app in the user interface allows the user to be instantly at ease with the experience, this can be seen as an example below. Take special note of how images can be used in the background and blurred to create depth. This is something that can be taken to the desktop

3
On of the biggest benefits of the desktop is the larger screen size and the ability to show more information, but it is also vital to realize that the information should now be crowded and that it should well spaced allow to allow the users to scan the page for information, the following examples show how this can be implemented into the design.
4 5 6

7

8

Print

Print

10
Finally creating information boxes on screen can create depth, just like in the earlier image, the boxes create a dialog for the user but the image behind amplifies the immersive experience, a great example of this is shown below.

11

UE of tablet UI

Accessibility and usability are at the forefront of importance, it is vital for a user to be able to pick up the device and start the experience without any problems. The user interface needs to be simple enough for them to be able to understand instantly but be relevant and advanced enough to make the museum experience better than it would be without the device.

A study of the main issues with tablet usability found that the most common user issues are firstly the fact that various gestures have been introduced to the tablet devices creating confusion among users, I can counter act this by describing the different swipe meanings, or simply by removing them. Instead of swipes I could replace them with on screen buttons that do the same action for them.  This resolves the next issue of accidental touch, this is when someone presses/swipes by accident and then has no way of getting back to the previous page, by having on screen buttons, there are less chance of accidental touch, and if so will create a more obvious way of returning to the previous screen for the user.

iPad-gestures-e1332937571494.jpg

It is also found that entirely flat design is a big threat to usability as the user finds it somewhat difficult to understand how to use the interface. The best way to counter act this is by having iconography to describe the different elements.

References:
http://www.sitepoint.com/apps-tablets-usability/
http://www.nngroup.com/articles/tablet-usability/
http://www.nngroup.com/reports/ipad-app-and-website-usability/
http://www.nngroup.com/reports/tablets/

http://sh.diva-portal.org/smash/get/diva2:629028/FULLTEXT01.pdf
http://www.getelastic.com/consider-use-and-usability-when-designing-tablet-apps/

OGRANISATION OF TASKS – USER CENTRED DESIGN

Following my previous projects, where I had constantly thought I was not getting enough done and that I wasn’t going to hit deadlines, I thought a vital part of this semester would be my organisational skills. Therefore I have listed every single task I wanted to complete for this project and created a timetable so that I knew what work needed to be done, and when it had to be done by. I also decided that it would be vital to sum up each section of the project after it had been completed on time, which is why you can see the schedule broken down into understandable sections. I have tried to get all the work listed accomplished with a few weeks to spare before hand in, this means that I have allowed for mistakes or extra work along the way. This is obviously even more useful when working in a group, therefore allowing everyone to clearly understand where they were and what they had to do, this should prove a useful method of tracking progress of the the group members and the overall project. I have added the initials of the person responsible for that piece of work or put all if everyone needs to do it, this has been approved by the group.

Organisation

Scrapping Pageless Design – A new start

I started creating a pageless design due to reasons that can be found here (https://akbrodie.wordpress.com/2014/10/02/the-future-of-web-design/)having looked at the future of the web and the potential it has. As I was going along the process of creating it | realised that there were actually quite a few negatives. First, the amount of people that reach the bottom of the page after visiting the page is very minimal. You can easily understand the need for less text by reading this except from “The Psychology of Public Speaking” (http://www.mrmediatraining.com/2012/08/23/how-many-minutes-is-the-audiences-attention-span/)

“A website that contains less than 111 words the user will read 49% of the text on average, this is a moderately small amount of text in comparison to the average webpage that contains about 600 words on average, the user usually only then read about 28% of the text and then spend a further 4 seconds for 100 words on a page”

When all the data is on one index file, the file sizes end up being much larger than the average webpage, this means loading times will be longer, this isn’t good for two reasons. One, the user might just get bored of waiting and leave the site to the next one they can find and secondly, Google’s rules;

“Speeding up websites is important — not just to site owners, but to all Internet users.         Faster sites create happy users and we’ve seen in our internal studies that when a site         responds slowly, visitors spend less time there. But faster sites don’t just improve user         experience; recent data shows that improving site speed also reduces operating costs.         Like us, our users place a lot of value in speed — that’s why we’ve decided to take site         speed into account in our search rankings. We use a variety of sources to determine the         speed of a site relative to other sites”

now specify that speed is considered when ranking your website, therefore a pageless design would get a lower rank because it takes longer to load.

Another reason having no pages effects the seo results is the fact there is only one title tag within the index file. An ideal title tag is under 65 characters and is a sentence consisting of keywords. Having multiple pages means you can have more title tags, therefore capturing a larger audience. Google also loves content, the more content you have the better the ranking you will get.

Given what I have just discussed, I have scrapped the scrolling page and begin research into SEO to implement into my new, multi-page website.

References:

http://firstresponsive.com/pageless-design-future-web-design/
http://googlewebmastercentral.blogspot.co.uk/2010/04/using-site-speed-in-web-search-ranking.html
https://developers.google.com/speed/pagespeed/insights/
(upload pageless design to FTP) run speed test.

The future of Web Design

A website is designed to be a centre of information for businesses, indivuals and marketing purposes. Mostly websites are there top create action from the user, whether thats to purchase, share information, visit their pysical store or even use the service they provide. It must become easier for users to understand how a website works and how to use it. This will be done by making sites like their print counterparts by using full advantage of the technology that is available. Becoming interactive, using sharing for easy marketing and pageless designs for simplistic use. Many people try to second guess what the market is doing but given I am studying a three year course not only do I need to stay current and research what media is doing now, but by the time I finish my course some of the design elements will be dated and looked down upon. Therefore it is vital that I constantly try and work out where the Internet is heading, and use that to my advantage to create work that incomparable to anything else that is available at the moment. Audiences loose interest very easily and the average attention span is on average 7-10 minutes, online users spend a lot less time and will simple move on to the next site if they do not find the information they are looking for. People do not want to spend time reading a lot of information of a website and a 2013 study carried out by The National Center for Biotechnology Information, U.S. National Library of Medicine, The Associated Press discovered that users won’t read all the text regardless how many words A website that contains less than 111 words the user will read 49% of the text on average, this is a moderately small ammount of text in comparison to the average webpage that contains about 600 words on average, the user usually only then read about 28% of the text and then spend a further 4 seconds for 100 words on a page. This indicates that webites are doing themselves a disservice by creating a page with lots of text. Through other research I have conducted tht is available on my blog, white space with less text is key. While our attention span last for about 7-10 minutes on average, you can guve users a ‘break’ from your content, allowing their attention span to ‘reset’. While you don’t want users to take a break from your site, it might be easier and more intuitive to include a form of break on the site. In terms of being in a presentation where you address your audience pysically, you can ask questions, do something interactive, tell stories or move on to a new topic. While some of this is an alien concept to using a website, I think that taking advantage of the information I have just researched and implementing it in a site in a new, user-friendl way may capture the audiences attention for longer periods of time. Another interesting and key factor in creating a website would be to allow users to understand the website as soon as they visit the site without scrolling or clicking anything, ‘Above tthe fold’ is a phrase used for the area that users see before they scroll. Jakob Neilsen noted in 2006 that 77% of users do not scroll on a website and only 22% actually reach the bottom, this means something is going wrong with current design of websites. It would be considered important, given the facts, that summary of the page and its contents is provided above the fold. Benifits of pageless websites are that they can created with responsive or adaptive formatting meaning they’re much easier to use on a range of different devices. They are less common and leave a better impression on the user, making it something thy will want to share through word of mouth. Tell a story,, following a timeline down of a ficticious character that needs his/her roof fixing. water drop starts leaking through the roof, follow the waterdrop through the house, following the steps as you go, explaining the services. A visual journey that takes the user from the problem to the solution.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://www.statisticbrain.com/attention-span-statistics/

http://www.mrmediatraining.com/2012/08/23/how-many-minutes-is-the-audiences-attention-span/

http://en.wikipedia.org/wiki/Above_the_fold http://firstresponsive.com/pageless-design-future-web-design/

http://www.google.com/nexus/5/ http://www.sequence.co.uk/media/278589/fowd.jpg