User Interface Design (revisited)

I have designed 3 UI's for the iphone. They are all based on a question/answer game using different navigation to see how I can get student of a different ages to engage with UI for learning that they don't see as a task.

This UI uses a simple touch option to select the answer. Simple, easy to use.

This is based on the same question/answer game however I have used a different navigation that gets the audience to interact with the interface a bit more. This is a typical technique used by apple.
I have added a new element into this interface to engage the audience in a simple game- guess the answer to the question before the water level goes down. The quicker the audience does this the more life they keep.

I think that the challenge now is to make sure that the game is suitable for the Usher art gallery.

Art App Development of ideas

I have tried my previous idea with an iphone interface. I am having slight problems with the adjusting to the size of the screen from designing for web, in terms of navigation. I have to be very careful where the navigation is positioned in order not to clutter up the page and ruin the UI as the audience won't be able to see the full UI to see what the game looks like.

Story Boarding for Art Museum App

The idea of this art/game app is to get children more involved with the art work in museums. Through gaming they learn about the pieces of art work through acceding through the levels to win art tools as prizes before they run out of life. The game is quite simple so will attract most ages as they won't see if as a task they have to do.

They gain more points/tools by guessing the answer to the question before the water level is at its lowest point. I still intend to design this based on the Lincolnshire Usher art gallery exhibit.

At the final stage the 'prize' is to create a drawing with the tools that have been won. My aim to to inspire children through this art app to use techniques and expand their ideas through absorbing ideas from masters of the discipline that they have gained knowledge about by playing the game.

App Map

This is a map of how my app will be navigated, what functions it will have and how people will engage with it between each interface....Now for the game plan and design.

Example pic

This is one of the photos that we are using in the multimedia catalogue for 2011. (sorry Sam your voted as the 'example'). It'd be great if everyone could get the raw file version and the jpg version. Cheers!

UI IOS Navigation

The iphone is very restrictive, it is very small, doesn't have a keyboards and few buttons so I have to be thoughtful when it comes to navigating such a small screen. It needs a navigation that doesn't clutter up the UI.

Navigation on an iPhone generally allows you to-

• explore all of the level of the flow diagram and get to where you want to be easily
• switch between main functionality systems without loosing your place within the app
• edit and adjust info without loosing your place
• display a list of info or choices

This is a tableview controller. It uses a tab list that is scrollable. Each option provides another list once tapped. This allows for a clean design that is easy to navigate. Easy to understand as items of a similar nature are generally listed in the same category/section.

This is a tab bar controller. It is designed to save space on the screen once you choose the option to hide the main screen. Each button has a menu that pops out individually that you can hide easily.
This is an example of flattened navigation hierarchy. It is usually used in information rich apps. It works by having a single type of main view with multiple option within each of them.
The 2 app navigational systems below aren't standard navigation systems but they focus around one interaction point. The first app uses a ticker wheel that is designed by weightbot. It has a mechanical spinning wheel for selecting items.
This navigation is used mainly for musicians but is a different version of the tab controller as it is placed in the middle of the screen instead.

User Interface Design Tips

http://www.ambysoft.com/essays/userInterfaceDesign.html

• User need to know how to work the UI that you designed for them so keep the UI consistant throughout the design.
• Use a interface flow diagram.

E.g.

The flow diagrams used is to form the architecture of the app and how the user can move through the stages. It can also be used to form the behavior of the user. It gives me the chance as a designer to see if the system of the app will work. The main purpose of the UI flow diagram is to see if the UI is useable.

• Design the navigation left to right, top-bottom as in western cultures this is the format that we read in. It will seems more natural.
• Colour should be used appropriately. If you use it as a highlighter make sure that you use something else to highlight it as well as people might be colour blind. Also use it sparingly so as to not overwhelm people.
• Use the contrast blue e.g blue on white is easy to read, red on blue isn't
• Align the fields. Left justify so make all the fields line up in a straight line. MAke the other fields right aligned so that it is organised. Make it is visually appealing and efficient.

Constantine and Lockwood have a set of principles that guide UI design

1. The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.

2. The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

3. The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.

4. The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

5. The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.

6. The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

   
   

IOS UI Revisted

http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/AppDesign/AppDesign.html%23//apple_ref/doc/uid/TP40006556-CH19-SW1

I have visited this website at the start of producing the artefacts. It is really helpful as it provides a lot of information about how to create an IOS app. I have gone through the basic structure of how to plan my app in order to see how my plans have developed a few artefacts on.

Potential features users might be interested in:

• Creating artwork
• earning points
• Socialising through earning points (international/local scoreboards)
• gaining art knowledge
• throwing paint game
• exploring different art games

What is most important to the users

• They are artists
• want to learn about art in a fun, game experience

3 characteristics that app buyers have

• Love to experiment with art
• gain knowledge of art
• want to experience art in a new way

App definition statement (this is to be referred back to at any time to focus the app)

"An art knowledge tool for creative students that love the gaming experience"

The app should have classic characteristics of IOS apps.

• IOS users are accustomed to the look and feel of IOS so the buttons have got to feel like they belong to that device.
• Controls should look tappable
• App structure should be easy and clear to navigate. IOS provides the navigation bar for drilling down through hierarchical content and tab bar for displaying different peer groups of content/functionality.

User feedback for IOS: should be subtle but clear (an animation for example).

The user expects to accomplish something in an app.

Design for touch- get familiar with UI elements and patterns of IOS. Examine menus, interaction initiated by hovering and links.

If the app is a game or provides an immersive story driven by experience people expect to enter a unique world filled with rich, beautiful graphics and innovative apps.

User Interface Design

http://www.sourcebits.com/user-interface-design

I have been exploring the process of User Interface design (UI) and have come across a company that produces UI for a wide range of platforms (android, ipad, iphone, blackberry etc). The company Sourcebits are about creating beautiful, easy to understand UI design. They see the design as being very important because it is what will leave the user with a lasting opinion. They create apps for the web and mobile, making them very flexible.

Art whirled is one of their most successful art apps as it provided the audience with a simple, easy to use spinning canvas. It replicates how paint splatters in real life without the mess.

Screen shot of UI

Layout of UI (wire frames): each frame has a wire frame designed with functionality high on the list so it is easy to use

Inspiration for UI

Objects that the paintings created in the app can be transferred to.

What do art galleries need from apps?

I think it is very important that an educational art app gives the user a taste of what the art gallery is like. I think the app should encapsulate what the art gallery has to offer through its graphics, information provided, layout and purpose of the art app.

I am looking into options of creating an art app for The Usher Art Gallery in Lincoln. It is a small art gallery, not unlike The Tate. It does have a large education section http://www.lincolnshire.gov.uk/visiting/museums/the-collection/new-investigate-art-programme-at-the-usher-gallery/ that aims to give students an experimental experience of the art gallery. I want to give the students an experience through the app that they won't get in any classroom to inspire them, spark their imagination.

The Usher Art Gallery also offers an educational program called 'Investigate', which is designed to engage students in 'hands on' activity. I want to replicate this in a user interface design.

The education department holds work shops that cover many areas such as:

Ancient Egypt

Dinosaurs

Time Detectives

Vikings

Settlers

Ancient Greeks

Anglo-Saxons

Romans

Archaeology

For example the Time detective section goes through what detectives do to find out what the art work is about. I could recreate this in an art app that the students could feel like they are just playing a game. In fact they will be learning without knowing it.

The Game Theory Behind Apps

Game Theory: The Basics (http://herselfsai.com/2007/03/game-theory.html)

Game theory is the study of how people make decisions and how people will react during these processes. According to the Nash Equilibrium many of peoples actions can be predicted as it is assumed that they will go for the rational choice. Rational choice is defined by 'the action chosen by a decision maker is at least as good as every other available action'. (Jon Von Neumann). To me this suggests that one action my be preferred over another because it is seen as being benifical to them (e.g. they gain more points by choosing option 'A' over 'B').

Nash Equilibrium is when a player can do no better than one another no matter what the other person decides to do.

iPhone Gaming (http://gametheoryonline.com/2011/02/16/app-store-video-games-disposable/), (http://www.appolicious.com/articles/1958-game-theory-q-a-with-joe-wee-of-chillingo)

iPhone gaming has created a new trend of 'the disposable game'. For instance people like angry birds for its experience without making a commitment to it through its cheap price. It has also changed the way that game are distributed, bringing gaming further into the distribution digitally. Also gaming through the iPhone adds a more socially focused element to gaming through global scoreboards that keep people coming back for more to top the score boards. Apple have landed on a money making scheme through peoples need for social integration. gaming apps fill the market for those of us that will only go on social networking sites before feeling a bit 'stalkerish'. Gaming apps are a perfect opportunity to fill your time and still interact with other on a different level.

The Usher Art Gallery

The direction of my research project has gradually become more focused towards User interfaces. After experimenting with a few art/game app ideas that aren't based on particular exhibits I thought it'd be a good idea to base one on a current art exhibit. I have chosen the Usher Art Gallery in Lincolnshire as in is a small gallery with a growing educational sector. Although the educational development officer was interested, they want to see the product after I have completed the research project.

The pieces of artwork below are from different exhibits within The Usher Art Gallery. I choose these as I think that they represent the art gallery and I want to create a User Interface that encapsulates the atmosphere of the gallery.

Validation Process

I have validated all of the main pages of the website. It document type is XHTML so it is a bit stricter than standard HTML.

The errors that arose are below.

One of them was that that some browsers don't support the cursor hand but only supports pointer. This just refers to the type of icon used to show that it is a clickable image.
Next error= Z index

The Z index signifies the stack order of an element. This means that the Z index only works when the positions of elements are set to fixed, relative or absolute.
This is one of the problems caused by the tags in the ditto call, connected with the Hpfeatured and HpfeaturedTPL

This means that script language is wrong it should be script type instead

This error is referring to the border "0" being referenced constantly so should be set in the CSS as a div class to create cleaner code.

Result- Homepage validated!

Validating the 'About Us' page

Extra div in the foot section

To have HTML5 or not to have

My original plan was to explore HTML5 intensively throughout the duration of the client project but I had to adapt to the clients requirements. The most important element that changed my mind was that they needed to be able to constantly update their website so I had to learn a content management system. This would allow the client to be more flexible with the content and be able to update the website whenever needed. This will keep more people interested in the website for longer and ensure repeat visitors as they will come back for updates on events etc.

One of the main issues of HTML5 is that I would've had to make two websites as HTML5 isn't compatible with older browsers. Originally I didn't realise how long learning the content management system would take so thought I could still complete both learning a new content management system (Modx) and do HTML5. I have finished slightly early so I am exploring the basics of HTML5 and its potential.

http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ The first thing that I have noticed is that HTML5 is structured differently with tags such as

All of these sections, particularly

are used to function more like classes. The main overall difference these ids make is providing a stricter structure, that will be easier to follow.

Another element that I have been recommended to explore my a fellow website designer is a HTML5 boilerplate.http://html5boilerplate.com/

The Footer

Although this section isn't seen as the most important part of any website it is a detail that I think can make or break a website. It is a standard area of a website that people expect to be there and hold additional details. In the case of charities they are usually social widgets or some type, charity details, address and contact details.

My original problem with the footer is that it doesn't seem to go with the design of the rest of the page. It seems separated by the line created by the div box. The client wants the footer to include the charity details-contact, legal details (charity number etc). Also through talking to ibrow media, the website designer has recommended that putting a second navigation in the footer is good practice as it means people don't have to scroll to find where they are therefore making it easily to navigate.

When you wish upon a star have requested that their Twitter account and Facebook account be added to the footer to make the charity have a stronger online presence. This will give the target audience more options to keep updated with what the charity does.

Original Mock-up=small footer can't fit all of the charity information in.

Footer 2= bigger to fit in all of the information in, green to integrate it into the colour scheme of the rest of the website. Facebook icon needs the CSS altering to move it into the middle.

Final Footer

I have used the hand drawn line from the hills illustration to integrate the footer with the main website. Centralized the widgets to give the footer some symmetry. Changed the colour of the footer from green to a mid blue to give the website some balance with the colour scheme and so it goes with the sky and charity colours. Overall I am very happy with the footer design I think that it brings the website together. It makes a simple block of information interesting to look for a wide range of people.

To create a footer with an uneven line presented me with a few problems so I had to create an extra div to provide me with the space to add padding so that the green line would overlap the faded white background instead of being covered by it.

Within Modx I created a div id called widgets and set the width and height to 50 along with setting the image to source to the hand drawn facebook logo. I made sure the border was 0 aswell.

Sponsorship Page

The sponsorship page has always been a bit of a task for me as it is a lot of information and logos to display on one page. The challenge is how to get people interested in a series of logos that may not necessarily interest them. Also it is important that I take into account the companies that take priority as they have contributed substantial amounts of money as well as the smaller companies/individuals. So I have decided to create a image that will contain the logos and constantly be changing so that each sponsor will have equal amounts of time at the top. This will be at the top of a series of 3 logos that will change, at random each time the page is refreshed that way no company is seen to be preferred.

Also by formatting it this way it means that the page won't 'grow' too big with each logo that is added therefore making the audience scroll too far and get bored.

Below is a basic diagram of how the page is structured. I have created it using the same code as the news ticker on the homepage, except in Modx I changed it to the marquee settings so it flickers in and out rather than scrolling up and down.

Creating the sponsorship pages in Modx

I had to create an individual page for each logo/sponsorship so that the audience can interact (if they wish) with each sponsor equally and find out more information about them. This ensures that each sponsor gets equal coverage. Also creating each page helps to connect the logos with the fading in and out logo.

To ensure that all of the logos are presented well and load quickly I saved them for web to a 72 res. I saved them all in a supporters folder so that the client can choose which logos are presented from a folder.

I made sure the page is published in Modx so that it can be viewed as part of the live website.

Click icon to browse folder of uploaded images that I had altered in photoshop.

Take away the image size so the image doesn't pixilate. If i kept the dimensions in the logo would automatically try to format itself to those dimensions.