Client Project: Mockup feedback and development

This email encompasses the feedback and suggested improvements I should make to improve my client website for Sonic machines based on my latest design.

Revised web-mockup design

"Hello Owen,
I have uploaded both versions of the new layout design onto the shared drop box. :)

I got feedback from my Shaun Belcher today. I’m going to summarise what he said here so I do apologise for the long email. 

He really liked the texture and the feel of the website and it looked more interesting than my first design, personally he preferred the blue version. I personally like the blue one too, but it’s your website so it’s your decision. Feel free to let me know anytime when you decide which one you prefer. Some of his suggestions for improvements was to try a different font for the main body text, such as “times new roman”. Or another “Serif font” that might fit into the theme of analogue objects.  I could do this and then show you the result and you can see which one you prefer? 

He also wondered if it would look nice if the constellation decorations on each webpage (portfolio, blog, contact) could vary slightly to give it some subtle variety. 

He also suggested the possibility of creating a “splash page”. A splash page is an visual introductionary webpage to your website, that doesn't provide the actual content, but offers visitors some kind of intuition or background information for what the site is about. It’s designed to intrigue the viewer and lure them into the website. Splash pages are used as an additional form of advertising.

I think Shaun tried to explain to you what it would look like. Basically, you know those constellations that are on the design that I showed you on Tuesday? Those were based on real constellations (that have names). Shaun said what could be really inventive and interesting to do would be make up a constellation graphic for each of your audio pieces as “icons”. For example the metronome music piece would be in a triangle shape constellation, and the washing machine in a square shaped constellation and vice versa. All these icons will be put onto one page against a textural background and right in the middle there will be a big logo “sonic machines” hyperlink that you click on to enter the main website. This page is separate from the main home page. Hope you aren’t confused?

I guess it could be hard to imagine without seeing it visually so I’l throw up a mock up visual to show you what I mean and you could tell me if you like it or not, is that okay with you?

Please let me know when you decide how much background textual information you want on your website? I suggested that if you wish I could create a separate “about me” page that would elaborate further from the initial basic description of yourself on the main home page but it's what ever suits you. :)

Thanks
Wilson Chiu"

Inspiration Sources


constellation patterns
washing machine technical drawing

Vinyl player vector
chequered racing car flag
good layout for portfolio by four tet
Owl slideshow

Research Project: further reading sources

To inform my project I have began starting to read "Interaction Design, beyond human-computer interaction". Here are my notes so far in a spider diagram:

Also I've watched Dan Donald's Flux & Flexibility talk which was also held locally at Antenna Nottingham 2nd wednesdays. The main points are as follows:

Artefact 2: 300 word Evaluation

Q. To what extent does interactive presentation of information provide an enhanced user experience compared to online static communication methods?


I am going to evaluate my artefact 2 results in relation to how it answers the main question.

Interactive information (aesthetic websites) trades off usability therefore it hinders user experience because the user feels more frustrated and confused with the website.

Dan Donald believes the web is becoming more like Graphic design with its rigid, gridded styles. E.g. twitter bootstrap websites following the rules of the F-shape.

Where is web design going outside the boundaries of semi interactive sites like "creative with a K"? In other words, where are we at currently with interactive presentation? Are we seeing fully interactive elements such as "Virtual environments" being introduced to the web? Can and do they provide a enhanced user experience?

From artefact 2 my findings are that you need to compromise website aesthetics with usability. Does this apply with VE? What is the limit, how far can you push it until it becomes unusable or dysfunctional? (dysfunctional as in like watching a film, not operating for the user.) Radiohead is a good example of this, it is for entertainment purposes but it is not functional.

Possible ideas for artefact 3:

• Create a website navigation, a VE one (with html5 and canvas, games) and a graphic design one (painfully usable, gridded style) Is it possible for VE to be able to used to enhance user experience.
• Do the rules of balancing aesthetics/usability apply to V.E within the web.
• Chapter 2 webdesign about models (Virtual enviroments) sound very relevant to this now!

Client Project: Layout mockup development

I've just had  a client meeting with Owen Baxter to show him my new mock-up designs.
My idea has been influenced by Origami Biro with their use of texture. My client liked the background with the interesting brush strokes and the interesting bits of rust scattered around. He could see the triangles represent his object oriented approach and the metronome.

Overall he was happy with the design and he thought it represented him and his work well.
I came up with two colour variations, one with a grainy brown texture and the other a sleek painted blue texture. He likes both and is going to consider which one he likes.

We compared this design to my first minimalist layout. I've tried to retain some of the simplicity from my previous design while livening it up with more interesting earthy tones.

In regards to the text he wants on the main page he’s unsure how much to put on because a scrollbar may breakup the design. I suggested that if he wished I could create a separate “about me” page that would elaborate further from the initial basic description of himself on the home page.

Client Project: Further initial ideas

Texture, abstract geometrical shapes/patterns

I'm looking at alternative ideas to the modern layout I've come up with for Owen Baxter, Sonic Machines. My lecturer said it looks too simplistic.

A good source of inspiration was Origami Biro, their use of textures create a good atmospheric look and appeal. An idea would be to incorporate some sort of textural quality to the logo to make it more interesting but keeping it looking exactly the way it is. At the moment the colour is just plain black.If there was an installation for Biro, there would be different materials you could feel and touch. Biro’s image are very earthy and natural looking.

Some other great examples of texture and pattern are: Sourced from: [image]

Also this artists Gemma Anderson use of texture is very interesting:

Antique, victorian and steampunk instruments are very nice and fits into the theme:

Sourced from: [image], [image], [image]

I think abstract geometric shapes are a good idea, like star constellations. The texture and feel of them look very interesting, especially when put on a grainy brown paper surface texture or a painted texture. Notably, the font on the last image looks very victorian, analogue like!

Sourced from: [image], [image], [image]

 Geometric shapes might work for the navigation, this reminds me of Pink Floyd's work with the Triangles on their album cover. The Triangle kind of represents the metronome that Owen used for one of his pieces.

Client Project: Logo Development

The latest design:

Owen liked the lower case version of the logo but he wanted all the letters to be lower case to make it look equal height. (balanced composition) He thinks it looks modern. He likes how I’ve kept the parts of the logo that he did like and not overcomplicating the logo by having too many symbols. (e.g. the starting “S” letter is not a symbol)

He looked at the upper case but he didn't like it as much.

He looked at the S.M. Initials design but he didn't like it because the s becomes a bit difficult to distinguish. When it is at the end of the logo it becomes more obvious what it is.

Research project: Artefact 2 Results

My findings from my Artefact 2 results:

On a scale from 1 to 10, where 1 was very diffciuit and 10 very easy, rate how easy each website was to use? (navigating the site)
Creative with a K: 5.28
Trade me: 7.28

On a scale from 1 to 10, where 1 is very slow and 10 very quick, rate how long it took to work out what to do on each website?
Creative with a K: 5.12
Trade me: 8.48

On a scale from 1 to 10, where 1 is feeling happy and 10 is feeling very annoyed, rate how frustrating did each website make you feel?
Creative with a K: 5.68
Trade me: 4.36

On a scale from 1 to 10, where 1 is excellent and 10 is poor, rate how visually appealing each website was?
Creative with a K: 5.04
Trade me: 5.16

Overall which website did you prefer to use over the other?
Creative with a K: 10
Trade me: 15

In the previous question why did you prefer the website over the other one?
Easier to use: 14
Looks more interesting : 11

User feedback 

"Creative K has an unique navigation and layout design, during in my attention as a user. With Trade me, the navigation and layout is a lot clearer, however it is a very bland website."

"Too many things going on within the Creative With a K website."

"Creative with a K made me want to vomit. It was a really cool idea but it was way too busy, cluttered and it hurt my eyes. Trade me wasn't really a better website it was just less nasciating to stare at."

"Hard to compare as websites have different purpose. Although creative with a K looks unique without hovering over things there is no clear direction for navigation."

"The website (trade me) is self explanatory and I immediately new how to use. Where as the (Creative AK) site was confusing, and wasn't sure what it was and the navigation and usability is very poor."

Expected results

• The trade me website was easier and faster to work out what to do.
• The creative K website was more visually appealing but more frustrating and irritable to use.
• For users to prefer Creative K website more because it was different and exciting concept that people will enjoy discovering. 

Actual findings

• More people found the trade me website easier to use and it took a shorter amount of time for them to grasp what to do.
• A lot more people found the Creative K website to be more frustrating to use. Also they got irritated faster by the Creative K website.
• To my surprise, users thought both websites were equally visually appealing. This shows aesthetics can be subjective.
• More people thought that the trade me website was more preferable than the other. Easier to use was outweighed by looking more interesting as the reason why users liked the website over the other.

Conclusions

Q. Does the novelty (interactive fun elements) make it more memorable or does functionality?
Functionality. My questions did not ask about did they enjoy the interactive elements but I have asked this in a way because Interactive elements can be broken down to: usability and aesthetics. This is even better because it's broken it down. People prefer interactive elements that are easy to use.

Q.  Does beauty destroy the concept?
Yes and no. Some people liked the beautiful website (40%). Others liked the usable website. (60%) Both are important UX considerations when designing a website. You need to compromise website aesthetics with usability.

Research Project: Artefact 2 Preparation

In this artefact I’m trying to find out what’s more important website usability or website aesthetics.

The user looks at two websites and fill out a short questionnaire about which website you prefer. The scale is 1 to 10 so there is more comparison of results than lets say from 1-3 options (bad, neutral, good.) The important question is WHY a user prefers one design over the other, is it because of design or usability? The other questions are to gauge if the unusable beautiful website is unusable and vice versa. I expect these results reflect this. The interesting part is "how quickly" the user becomes frustrated.

Trade me was chosen over Amazon because users pre-existing knowledge won't create a bias when comparing the two sites.

www.trademe.co.nz

www.creativewithak.com

Questions

Q. On a scale from 1 to 10, where 1 was very diffciuit and 10 very easy, rate how easy each website was to use? (navigating the site)

Q. On a scale from 1 to 10, where 1 is very slow and 10 very quick, rate how long it took to work out what to do on each website?

Q. On a scale from 1 to 10, where 1 is feeling happy and 10 is feeling very annoyed, rate how frustrating did each website make you feel?

Q. On a scale from 1 to 10, where 1 is very slow and 10 very quick, rate how quickly did each website make you feel annoyed or frustrated?

Q. On a scale from 1 to 10, where 1 is excellent and 10 is poor, rate how visually appealing each website was?

Q. Overall which website did you prefer to use over the other?

Q. In the previous question why did you prefer the website over the other one?

This question is to pick apart WHY something else is preferred, to be more precise. In previous artefact, one was more memorable than the other but the reason behind this isn't specific?

Research Project: Artefact 1 further reading

History of the web

This reading is intended to inform my own research.

Websites were originally meant for communication, to transfer information easily with a hyperlink. They were designed to work across a platform of devices ranging from being able to handle varying amounts of rendering. The font size and style relied on the machines to interpret the information and render it on the screen. All the website had was the text, and the way it was rendered across different machines varied. This is the opposite to front end designers. They design things expecting it to look exactly the way it was designed across all platforms (positioning, the look of it, aesthetics everything.) You could say the first webpage was about functionality (purpose) of communicating rather than transferring designs from print onto screen.

The reason that websites change is to fit the purpose.
People update the looks of their website to refresh their brand or identity. Or perhaps their brand has change and they need to freshen their website look to make it look recent.

This is an article about the history of the web and why I was invented.

http://www.w3.org/People/Raggett/book4/ch02.html 

Great example of a old website

http://web.archive.org/web/20040419144541/http://www.pgmd.man.ac.uk/ 

Examples of usable websites that don't look aesthetic

http://www.1stwebdesigner.com/design/well-designed-usable-sites/

Beautiful but unusable websites

http://www.smashingmagazine.com/2010/11/25/showcase-of-beautiful-but-unusable-websites/

"Form versus Function"
http://thenextweb.com/dd/2011/07/10/function-is-nothing-without-beauty-10-sites-doing-it-right/
http://www.smashingmagazine.com/2010/03/23/does-form-follow-function/

Banking websites- form vs function
http://thefinancialbrand.com/28070/50-of-the-most-spectacular-website-designs-in-banking/

Research Project: Artefact 1 Evaluation

This is an Evaluation of my Artefact 1 results

Revised Question

Q. To what extent does interactive presentation of information provide an enhanced user experience compared to  online static communication methods?

Artefact 1 aims

Q. I am testing does interactivity aid or improve user experience/usability? Does interactivity help engage the user?
Does website structures (linear) versus (non-linear) narratives affect user experience and usability?

To further inform my research I think it will be useful to read about the history of the web. What was possible in the old days on a website, lets say 10 years ago (before javascript and html5 and new possibilities) -> What has been enhanced since then? 

It is difficult to define a traditional website, in my a first artefact the interface (non linear) would be considered “traditional” 10 years ago. And the slider interface would now be considered “traditional” now. What seems to be ‘traditional’ to people changes over time. Basically a traditional website is the translation from paper to screen; it is print based stuff put onto the monitor.

In my first artefact, people thought the nonlinear website as less interesting. Why do people find “basic” websites boring? Is it because we are used to the interactive features these days. (with tablets and touch screens) So is the novelty behind it? In my first artefact, the users said the interactive slider is more memorable. Is this because of the novelty features (interactivity) or is it because it’s more functional? (user experience) 

David questioned, do more people find it engaging/interesting because of website structure (linear vs non linear) or is because of aesthetics/design of the website. The slider had a better design because of the big image and the nice text etc as opposed to the menu. 

On one end the scale you have an fully interactive website that breaks the UX design conventions, a website that is experimental and adventurous. = A new concept. It’s good because it’s a novelty, all these new wacky ideas that people haven’t seen before. However it’s not very usable because people don’t know how to use it. People who, challenge UX conventions and push forward the next generation of user interfaces?

On the other end of the scale, there is very functional websites that are very plain, simple and boring. Perhaps something with just 4 links. This is very boring to look at but may be easy to use for people.

In the middle of these two extremes is the web. The question is, where do you draw the line between interactive but unusable, or usable and boring. Compromising usability for beauty? If you break the meta, and be adventurous will you always lose usability? Does beauty destroy the concept?

Next Steps

In your first artefact, you’ve tested two interfaces that is in-between the two. Maybe push these to the extreme. Make a website that is very experimental and adventurous but that isn’t necessarily obvious what to do. Does the novelty (interactive fun elements) make it more memorable or does functionality? Does beauty destroy the concept? If you break the meta and be adventures, will you lose usability? 

• Test two websites with opposite extremes,
• Measure which one was quicker at getting them annoyed/frustrated
• Measure which one they found more confusing
• Or took them longer to work out what they were doing
• David suggests you need to do both at the same time because it’s necessary to have results that are comparative to something.

David says there is a theory (UI) that if a interface is aesthetically pleasing people are more forgiving of the functionality of the website.

Client Project: Initial designs & ideas

Minimalism

Owen really likes the minimalism idea because there is a focus on the webpage. It feels a lot less cluttered.
He prefers this over the black design because it looks more sparse and modern.
The dark color scheme one probably doesn't work as well because the white on black is harder to read. And you need good strong bright images for this sort of thing. (inspiration from the exhibition interface)
An example of minimalism that he likes is how the software “FXpansion” has changed (the program that he creates his music on.) The interface has gone for a cleaner and more simple user interface look. It’s a lot less cluttered but there is still a way to expand the toolkit for more advanced features. Whereas, with the old interface it was always really large and cluttered looking.

Textured 

He thinks the Biro textured idea is nice. If there was an installation for Biro, there would be different materials you could feel and touch. Biro’s image are very earthy and natural looking. A possible idea could be to put texture onto each different track’s portfolio. So for example, the washing machine is more industrial/ metallic, and the metronome is more harmonising. However, he wants a unifying style still so he doesn’t want it too busy or different from each other. (A collective)

Steampunk

Owen is interested in mechanical objects, so clogs, wheels, kinetic objects etc.

The steakpunk clock is interesting because Owen uses real physical objects to generate sound.

Whereas, with the steampunk guitar it suggests deconstruction and melding pipes on the guitar. Sonic sounds is more about being natural and not taking it apart. 

Logo Design

He really likes the logo! He wants to change it to sonic machines instead of sounds. And to try and experiment with lower case to see what it will look like. He likes the more steampunk like one because It puts the gears in context, otherwise it becomes ambiguous what it is supposed to be. (font used: "Time to get a watch"

Layout

With the homepage layout he is happy with what I put on there because the tracks are what people want to get to first and a short background, description about him and his work.

The portfolio page consists of 4 projects, and each one will have content like music, sounds, video, pictures on it. Perhaps a slider could be good approach? This is better than having separate links for each (music, sounds, video) because then the navigation would be too deep. People don’t want to go through multiple menu’s.