Sonic machines set of icons completed

I finished the final icon for the set of icons for client project: Sonic Machines. This is for the splash page.

And this is what the set looks together:

Research Project:Completed

I've am pleased that my research Project for my university module is completed. My conclusion was as follows:

"My research enquiry is: to what extent does interactive presentation of information provide an enhanced user experience compared to online static communication methods on the web? I have found out that designing innovative but ambiguous interfaces can sometimes hinder user experience because the interface is not what people are familiar with. This can cause them to feel frustrated with the website.

However, Norman Donald argues that people make judgements about a websites emotively, so a first good impression would set them up to having a positive attitude and tolerate minor usability problems. When a website is designed well aesthetically, the website is more credible and trustworthy because it makes users feel more comfortable and relaxed. My artefact results show that unconventional interactive interfaces can be more pleasurable to use than static websites.

On the other hand, Dan Donald suggests that the static, conventional website is more effective at communicating because it degrades onto all devices perfectly. To an extent static websites are better because they are more functional and accessible for users, especially those on a mobile device.

From UX perspective, it is important to identify the user’s needs and create a website that meets the purpose of the website. A non-interactive, static website can be more effective on functional sites where users need to complete a process such as filling in tax forms. Whereas, a website that is trying to persuade someone to buy a holiday package may use large beautiful visuals in a slider to lure the user into making emotive impulse decisions. (Rogers, Sharp, Preece, 2013) On some websites, both of these approaches work. E.g. a fashion retailer, where strong visual flair is used to advertise the latest season products and a functional ecommerce system that is designed to be functional. My overall conclusion is the interactive presentation of information can be more suitable within some contexts than others." -abstract

I shall be preparing for my final research presentation soon. :)

Context 3 Prototype

This is the draft design for my context 3 portfolio. I will be developing this further, I may adapt some elements in future such as the colour scheme as appropriate.

1. Define your project concept. Justify your choice of project. Why is it relevant that you do the project in this way? (LO1, LO2, LO3)


Portfolio

• website showing my best work:
• Integrate my social media (badges); social platform: facebook, twitter, DeviantART, LinkedIn

Personal online blog

• A separate blog to upload my latest work, projects etc.

Self Promotion 

• My website is self-promotion; to put myself out there. Seeking potential jobs or freelance opportunities.

Target Audience

• Junior position web designer to work for a small/medium sized agency or freelance

Branding and Identity

• Rebrand my logo
• I identify myself as a:  front end web designer

Display my skills

• Technical skills: CSS, HTML
• Transferable skills: organisation, time management, communication
• Personality: will I fit into their company?

Demonstrate my creative work process 

• Briefing
• Planning and Prototyping
• Implementation
• Testing
• Evaluation

3. Decide five keywords that might be used as words that focus the conceptual approach of the project. (LO1, LO3)

• Self-Promotion
• Portfolio 
• Online-CV
• Networking
• Social Media

4. Outline and discuss five existing most relevant sources that you are going to look at to help begin designing the project. (LO2) 

http://houbly.me/site/index.html
Past student at NTU
Personal branding: logo self portrait
Clear about defining his expertise/role

http://adamhartwig.co.uk/
Interactive website
Bold colour scheme, big statement
Famous high profile web designer

http://adam.co/
Snappy tagline, draws your attention
Simple, effective design
Scrolling website portfolio

5. Show a prototype of an element key to the likely success of the project. This should be something that you have created (LO2, LO3, LO4) 


See context tag section http://wilsonchiu1.blogspot.co.uk/search/label/context

6. Discuss how you will be managing yourself during the duration of the module. (LO3, LO4)

• Give and receive feedback in tutorial sessions to see if it meets target audience
• Keeping a log of work on my Journal to show work process to other users/ employers and for an online presence 

7. Show how you intend to allocate tasks and time to delivering your project. (LO2, LO3)
Time allocated to each subtask:

• Week 35: Portfolio Plan presentation
• Week 36-17: Easter Break
• Week 38: Sort out domain and website name
• Week 39-40: Implementation
• Week 41: Testing and refining website
• Week 42: Write rationale and project book
• Week 43: Hand in deadline (for extensions)  

8. Conclusions. How does your work so far inform your evaluation? (LO1, LO3)


I feel I have defined my role specifically. I could work on some more personal projects to expand my portfolio further. And to keep up to date with web design trends: Updating my blog about relevant web developments I’ve been reading about because the web design industry is constantly changing.


Hope to improve on:

• Software skills (coding in Dreamweaver CS6, using Photoshop CS6, Fireworks CS6.)
• Social networking,
• Getting more involved in events like 2nd Wednesday

Research Project- User centred design

User-centred design! 

How can the interactive presentation of information provide an enhanced user experience compared to traditional online static communication methods on the web? 

Interactive Presentation of information is more suited for the type of user and what they want to do (purpose) sometimes it's more appropriate to some situations than others. Knowing when it will be useful in context to the product is important in determining if it's useful or not.

Designing for types of users.

• What do they want to do? Find something else quickly and effectively? 
• Complete an operation or a task e.g tax forms? 
• Or a user who loves discovering new cool interactive websites?

Retailers follow a trend of having the same user interface e.g river island, top man etc they are all the same layout. Com formative design, nothing different or exciting. It's functional and it works! It works from user frameworks, metaphors such as basket and checkout. They follow the f shape which is how users look around on the page. Companies with websites such as these make a lot of money.

F-shape website

Is a non-interactive (no sliders, obscure navigational structures, roll overs, multimedia content) website better for functional operations such as filling in tax forms online or applying for housing benefit. These experiences are forgettable: you don’t need to create a lasting impact. You get in and get out after fulfilling what it is you want to do.

functional website (that people only go on to perform tasks)

I think brand websites have to be more interactive because this is more engaging and persuades the user to buy things. Quite often eCommerce or film websites have big images, splash pages, interactive sliders or multimedia content.

Also it is useful to think about the audience the website is intended for. Do people who already know what it is about or do new people go on it? What role does the website make in the wider picture of advertising? "transmedia." For example, films are often advertised on tv but the website's role is to raise a social interaction with fans and create a hype around a film. This is where an interactive website is used.

interactive websites for promotion/advertising and transmedia

Sometimes it is about balance.

Top man website is both a persuasive and functional, e.g. advertise new fashion trends as well as going through a checkout process. Therefore there must be a balance between usable and interactive design? Similarly, banking websites do this too:

Balancing usable and interactive design on banking websites

Artefact Idea:

• Make sonic machines interactive splash page versus the main site. Which one is more persuasive in advertising band and music. Would the user be more likely to buy a CD from visiting a interactive splash page or a more functional website with a more traditional layout?
• Or design a website that should be a very functional website (that people go on to perform boring tasks such as tax forms) and make it into the most interactive, crazy site ever. And see what people think! ;)

• Or the other way round. Create the most functional website for a film. Make it dire and plain looking as possible (and bore them to tears)

References

Banking website
https://www.salemfive.com/

HM Revenue website
http://www.hmrc.gov.uk/sa/

Form versus Function
http://thenextweb.com/dd/2011/07/10/function-is-nothing-without-beauty-10-sites-doing-it-right/

Narratives
http://alistapart.com/article/narrative

Client Project: Sonic Machines Development

Basic template so far coded :

Resources

Responsive slider: http://owlgraphic.com/owlcarousel/

Research Project: Further reading

To inform my project I have read some more of  "Interaction Design, beyond human-computer interaction".

My main notes on "Chapter 2: understanding and conceptualising interaction" in a spider diagram:

And "Chapter 3: Cognitive Aspects":

Research Project: HTML5 Canvas and new technologies

From my findings in artefact 3, the results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

My findings from reading "HTML Design Essentials" by "Creative Masterclass" makers of .net magazine:

Flash versus HTML5

HTML is winning hands down. canvas: web graphic trends

Adobe edge HTML5 Canvas

"The danger of adobe edge faces is, ironically from something we call 'flash' effect'. Animation and interactivity used for pointless purposes; sites that showcase splash screens and progress bars. What we fear is the second coming of 'skip intro'."

"It seems to me that we're simply jumping on the animation bandwagon because we can, and are in serious risk of backtracking on all the great advances in usability we've had over the last few years. Every new portfolio site is now going to spin, shake"

VML and SVG Javascript

Vector Mark-up language: supported by IE6 - IE9 only

Scalable Vector graphics: supported on all browsers

"Both SVG and VML work by adding special DOM nodes to the document which represent shapes, like circles, lines, and polygons. Like any other DOM element, these shapes can be styled, positioned, and interacted with using native JavaScript or your favorite JavaScript library like jQuery, YUI, etc."

" First, since SVG and VML require us to add DOM elements for each shape to the document, the document model can quickly become overloaded for complex drawings, and the application could slow down or even crash. HTML5 Canvas is much more efficient and performant."

HTML5 Canvas 

"Second, unlike SVG, which can have events bound to shapes via native JavaScript or a JavaScript library, HTML5 Canvas does not provide an event binding API, which is a real bummer. And if you try to implement something yourself, you’ll quickly realize that it’s ridiculously difficult to create an easy to use mouse / touch event system that’s performant. 

Fortunately, there are several HTML5 canvas libraries out there that address this problem, including KineticJS, EaselJS, Paper.js, Fabric.js, and Processing.js."

Janvas 

SVG drawing program. Quite new at the moment: http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/index_EN.php

Research Project: Artefact 3 results

My artefact 3 findings are:

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

Q. On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long it took to work out what to do on the website?
7.

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

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)
6.

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?
6.71

Q. Overall did you like the website?
Yes:  14 (58.33%)
No: 10 (41.67%)

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use: 1 (4.17%)
Looks interesting: 13 (54.17%)
Difficuit to use: 7 (29.17%)
Looks terrible: 3 (12.50%)

Results

• The website was neither very easy or very hard.
• Most users found it quite quick to learn what to do.
• More users felt happy using the website than annoyed, the average rating was in-between.
• The website wasn't quick at getting people frustrated, many didn't get annoyed at all.
• Users gave a high score for how visually appealing it looked.

• More users liked the site than dislike.
• The main reason for liking the website was because it looked visually appealing. 54.17%
• The main reason for disliking the website was because it was difficult to use. 29.17%

User feedback

"A very unique type of website that stands out far from the rest, but the use of this type of design must match the type of website that targets a specific target audience, websites such as commercial shops or agencies should avoid this as it would be hard to navigate for elder users."

"It seemed like a gimmick. As an experimental website it was OK, but I'd be really annoyed if I actually wanted to find a specific thing."

"it was difficult and got frustrating. however the concept is really good! simple looking but effective!" 

"Very well made. Loved how the menu looked 3D."

"Very unique and interesting to use, I especially liked how you had to discover how to navigate the website, but it was not difficult to learn how to use it. Very cool, I would like a website like that."

"I was more so curious about the website than anything, it had an interesting and unique layout that flowed almost effortlessly which I enjoyed a lot."

My Expectations

I expected people to be put off by the 3D navigation despite it looking quite innovative and new. I also thought you have to compromise aesthetics with usability with V.E websites.

My Conclusions

Q. 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?

Yes they can to some extent. The results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

Q. 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? 

You do need both. The main factor for liking the website 58.33% was because it looked interesting 54.16%, but only 14.17% of people liked it because it was easy to use. This shows people are more willing to sacrifice usability for aesthetics.

However, the compromise between aesthetics with usability still this applies to V.E to an extent because 41.67% disliked the website, 29.17% of which thought it was hard to use and 12.50% because it looked terrible.

Q. Can interactive VE (2D Flash built made to look 3D) improve user experience? (extend operability) 
The more wacky the art website, the more patient the user is and the more forgiving they are.

If it's interesting enough, it engages and draws the use in, the content buys them leeway and it potentially increases the appeal of the website.

However, it doesn't necessarily make usability easier. Only 4.17% found the website easy to use.

Further research

canvas: web graphic trends: how html is beating flash big style!

html5 can create rich Internet experiences.

Research Project: Artefact 3 preparation

My artefact 3 consists of testing users to see what their response is to this interactive 3D virtual environments navigation website: http://www.screenvader.com/

And then collecting responses from a survey:

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

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

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

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?

Q. Overall did you like the website?

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use
Looks interesting
Difficult to use
Looks terrible

Client Project: Portfolio Mockup

Individual music page

On each individual music page he wants the following: text, video and music tracks. The music tracks are finished versions of the piece and are different to the video content. These will be on this page, or on the main page if it becomes operational (the album sidebar)

He doesn't want individual sound file/clips of his work (like on his exhibition).

As extra’s he would like a sliding gallery for pieces that don’t have a video (vinyl work). One with a window and scrollable arrow keys to navigate across each picture.

Icon’s 

He likes the icons. He wants to keep the racing car one the same, and he likes the circle details on both the vinyl and washing machine.

He prefers the simple triangle for the metronome but if possible it would be nice if there was a graphical detail that would represent the pendulum rather than the scales.

Home Page

He has decided he wants all the textual information on the front page. He has sent me the text he wants on there, he may condense it and make it a bit shorter to fit the main page. He doesn't want a separate about me page.

On the front page, the video featured will be a video of his latest work.

Client Project: Mockup Icons

I had a client meeting with Owen today from Sonic machines and he looked at the designs I've come up with and he is really happy with them.

He liked the one which had a balance between the constellation and image of the object both being equally prominent. He thinks you need to strike a balance between the two.

He likes both the white line and the black line lines for the constellation pattern. He likes the faded lack on the metronome but the darker shade of purple looks better on the washing machine image. He is happy for me to create 3 more for each icon.

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:

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: 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.