UWE: Analysing Practice

I've started my new course in Graphic Arts at University of West England, the new project I am engaged in is based upon a book by a French writer Georges Perec called "An Attempt at exhausting a  place in Paris"

The nature of this project is open ended, experimental  and needs to be in some way related to the text.

Some findings I have gotten from this text are:

Personal Website Completed

This is the final still for my personal website. My intentions are to make this live sometime soon in the future.

Any thoughts would be greatly appreciated.

New personal website development

This is underdevelopment, should be coming soon. A teaser:

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:

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.