The virtual experience

The virtual experience is the main purpose of the site, it must allow the user to experience what other cultures have to offer in the same way a normal visit to that country would in a safe and consistant manner. Once the user has selected a country they would like to visit, they will be confronted by a confirmation page. They can be seen here;

On this page there is a faded flag in the background while the country name is written a typeface traditional to their history. Once they havee selected start and began the adventure, they will be presented with a screen where it tells them some basic information about that country such as a weather forecast for that week, the time difference, popular foods and attractions. This page should also offer the user the ability ot customise their frog with items from that country.

The next section is about a touristic area within that country, and a guide can give the user random facts about that place. This part is to encourage learning about that country and important facts about it’s culture.

The next section is about encouraging socialising between users, in this area all users who are on this trip at the same time are available here. Therefore this means people are able to talk with users around the world in this section. When they are socialising, they are able to speak in a chat or play mini games with that user. There is a ‘bot’ frog who speaks in both the users language and the language of the country they are ‘visiting’ who can speak to the user and also play mini games with them, this is ideal for realibility and also while there are no other users in the chatroom.

Once the user has finished in the chatroom with the other users, they are able to progress onto a new section that gives the user a lesson in the language of that country. This is done using images that relate to words as recommended by my research.

The next section is a modern connection to people now taking selfies. The user will find a picture of their frog dressed in the way they have been customised in the scene of the country. It is a great way to reflect on what they have learn at a later time.

The next section is quite important as it allows the user to start a conversation with a resident of that country, it shows the user the other persons frog, their name and some other basic information then encourages them to send them a message to say hi.

Postcards are related to the tradition of sending a message back home to people you know with a short message about your trip. These can be sent via messages to other users and can fully customised. The screen below lists a grid of postcards available to send.

Then once selected the user has the ability to be able to edit the postcards with stamps, drawings and pictures of their frog whil also being able to add a message to the card. This encourages other users to learn about that specific place too.

It is important to note that the screens are a mixture of textured backgrounds or gradients, this is something that has been noted as requiring further work in ther development stages of these sections.

Advertisement

Platforms and Experiences

It important to note that experiences should differ from device to device in the sense that computers have a larger screen estate available with more power in comparison to the smaller devices. This means that there are things that are important for each device, and about how they should help their user, this is what this post aims to identify.

AirBnb

Airbnb a service allowing users to book holidays etc online. It is a site allowing users to browse a store like experience viewing properties to rent in the cities they want to visit.

When landing on the desktop homepage, the user is greeted with the following page. It is a page that has an infinitite scroll of content available to the user, consisting of the different experiences available to the user.

What you notice on the mobile version is very different. You see there are less options in experiences available and menu has been condensed into a drop down.

Once the user selects a place to visit (in this case Paris) they are greeted with list of places of to visit. This is the desktop version;

and the mobile version;

Again the differences are obvious. the mobile has a lot les information instantly visable, the user has to search or scroll on the mobile to discover content. It is also important to note that desktop content just doesnt have the same issues with space so it is capable of filling the screen with even more information for the user.

 

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.

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

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.

Print

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.

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.

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/

Fast, easy tips for Tablet app usability from Chris Nodder

Click to access FULLTEXT01.pdf

http://www.getelastic.com/consider-use-and-usability-when-designing-tablet-apps/

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.

Current interactive experiences

I am creating an interactive experience online for the user too learn more about the lesser known facts about war. To help me in the process of creating this I am going to research and try to understand how to best capture the user within an interactive site. Parallax scrolling is what we have been told to focus on so I will be looking for mainly interactive parallax scrolling sites but I will also look at others.

http://www.thisisnowexhibition.com is a great example of parallax scrolling being used for a an exhibition website.  It uses images with a flat colour overlay to create a texture on which text is placed upon. The texts itself is kept to a minimum and maximises the potential effect white space can have,  this creates intrigue into the content. There is a section at the bottom of the page where you can select the different designers so that you can see you can see one of their pieces of work and the option to buy it. Again this causes the user to want to see the exhibition so they can see more of the art. This is almost what is required for my brief for creating a interactive user experience, and a very good inspiration for me to start my research.

http://cyclemon.com This website is making good use of modern design techniques and that’s what makes it stand out the most. Flat colours, parallax scrolling make it simple enough to use, there are different sections which all have different bikes and colour scheme. The purpose of the site is to actually sell the artwork which they feature on the site, and this isn’t actually obvious when you are looking at the homepage, it’s only when you click on the shop i con you realise they’re for purchase.

http://www.beatboxacademy.ca/ Is a brilliant sales site for basically a box of stuff to help you learn beatboxing. The entire site can be navigated with the keyboard as it is also parallax scrolling. It’s main interactive feature is the one which you are greeted with as soon as you land on the site, a virtual set of beatbox noises which are linked up to an image of the instrument they represent and they can be clicked on or there is also a keyboard button that represents them. The target audience would be captured by this experience because as a music lover they would be able make the beats themselves with the keyboard and then if they are sold can go and buy the DVD.

http://graphicnovel-hybrid4.peugeot.com/start.html Is another excellent site that tells a story to it’s users with video, sound and parallax scrolling. Story makes the daily lives of many much more interesting finishing at the office and driving home, but instead it’s a spy mission to steal some documents from an office and get home safely.  It’s a completely immersive experience that allows the user to actually get lost in a story rather then just viewing the webpage, it’s a clever sales technique that helps to connect emotions with a product which is what Sigmund Freud started back in the 50’s.

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