Research project: Artefact 1 Preparation

I’ve just finished making my 2 web interfaces for my research project this evening.

I’m going to ask people to try out the 2 different web interfaces and then ask questions about which one they prefer/ find easier to use. This is to test website structures (linear vs non-linear narratives) and how they affect user experience/usability.

I will post an update on the results soon.

non-linear narrative

linear narrative

Questions

Q. Which one was easier to use? (Navigating around the site, knowing what to do next etc)

Traditional website

Sliding layout

The same

Q. Was there anything on the traditional website you found confusing or got stuck on?

-Enter comment

Q. Was there anything on the sliding layout you found confusing or got stuck on?

Enter comment

Q. Which interface was more natural/intuitive to use? (Which one you found more comfortable using)

Traditional website

Sliding layout

Same difference

Q. Which interface did you find more interesting/ engaging to use? 

Traditional website

Sliding Layout

Same difference

Q. Overall, which interface would you prefer to use over the other?

Traditional website

Sliding Layout

Same difference

Q. Which interface would you find more memorable? So if you had to recall this in several weeks’ time, which one are you more likely to remember?

Traditional website

Sliding Layout

Same difference

YCA: Formative feedback submission

Good news, I got my work assessed over the Christmas holidays and I am pleased with the results! Overall I got a formative grade of: 2:1!

The comments and feedback  received from my tutor/s are below. I plan to keep working hard and improve :)

UPDATE: Also I have submitted this as an entry to the official Nottingham Young Creatives Awards! http://www.youngcreativeawards.org/

Presentation:

The presentation did cover all the required components although the requested order was slightly revised. There were a good selection of sources. Well justified and commented on and a good description of target audience.
Time management was well considered but placed a bit early in presentation.
Research was very good and keywords correct.

Prototypes:

A very good selection of prototypes investigating different ideas. However they were mixed into research resources which made presentation a bit disjointed.
Conclusion was weak and did not sum up investigation clearly enough this needs to be considered in future there was no description of how work so far informed your evaluation of project.

Reflective Journal:

Your self-evaluation on blog is excellent and whole reflective journal is being used correctly and is informative. Keep it going!

Client Project YCA: Feedback 3

I received some more feedback from my lecturer and my peers for my project. These comments were mainly aimed at my introduction splash page:

• The 2 buttons on the front aren't positioned very well. Perhaps be better to try a different layout to make it easier for the user to use.
• The main title on the splash page is hard to read! The font doesn't stand out and disappears ino the background
• The user may or may not understand the terminology to "start desktop" from "start tablet". 

Finalised simplified splash page navigation

Client Project YCA: Development5/Feedback

Slider Customisation 

I've added a linear gradient CSS3 to my slidebar divider to make it easier to use. It now corresponds to the colors of the tagclouds. I think this works well. 

However, I need a bit of code to remove the bit of default browser padding.

1st Idea

I've tried various re-positioning of the textvalue before I came up with my final design.

2nd Idea

I managed to move the slider to a fixed footer position by googling: fixed footer, position fixed solution. I think this makes the most sense. 

Finalised Idea

Client Project YCA: Splash development

Dreamweaver Development

From my initial Photohop design I've been implementing my website on Dreamweaver. I've decided to go with the last design. I've also found that a button as well as the hyperlink is useful user interface-wise because it becomes more obvious:

In my latest version, I have replaced the image based title to a text based one. It was much simplier to align it in the middle with "text-align: center" as opposed to paddng the image. Also the text would be great for SEO, searching for those words.

Client Project YCA: Development 4

Background ideas:

Spirit Nottingham
Interior1
Interior2

Next Steps

• Try making it responsive by giving the content wrapper a % size, compliment this with media queries. Perhaps at widescreen give a fixed width, and at lower screen sizes give a responsive width
• Try giving the image in lightbox a max or min width
• Media query the text in the lightbox to give responsive font sizes
• Make a menu screen
• Customise the sidebar or add stylation to the current date/slider divider
• Add a 4th line of productions 
• HEX color code transparency converter

Client Project YCA: Development 3

Version 1

Color coded Horizontal layout

Version 2

Descending List like a Theatre playbill

Version 3

Multiple column layout, like mosaic/windows8 

Version 4

Like version 1 but FLEXIBLE auto height dividers

Version 5

Like version 4 but with padding: like js plugins for images

JQUERY MOSAIC PLUGIN: Link

Client Project YCA: Development 2

I've been experimenting with different visualisation ideas.

It was difficult to position typographic elements on the webpage because larger fonts create an automatic gap in-between different lines.

I've tried to look at a different design approach. I wanted to use color co-ordination to organise the infomation. I think this will be a way of making it viusally appealing and easy to use (user interface)

Work in progress tagcloud slider

Research

Nottingham Playhouse flyer:

Typographic style: negative/positive against the background

BBC website, historical timeline: Link

Color co-ordination key used for User Interface

Client Project: Development feedback tutor

• A novel idea, something that hasn't been really done before.
• Make my own decisions on about the appearance, aesthetics of it. I have the foundations and the basic working elements. I now need to make it my own, my input will be what I get marked for.
• Look around tag clouds and timelines and how good they are for usability. You have to make it look nice visually but make sure its usable for the audience. Maybe even test it on someone to see what they think!
• Facebook timeline user interface
• BBC Historical interactive timeline: dialogue boxes, CSS radius smooth borders, contrasting font size between heading/main font. COLOR coded timeline.Jqueryui Slider customisation plugin
• Try matching background color with timeline key like in BBC, or use colored CSS/image based ribbons

User interface: The color on the timeline matches the slider background color

• Don't forget that the core purpose is to DISPLAY information about Theatre performances (timeline), don't loose sight of that whilst trying to make it look visually exciting.

Client Project: Development Feedback

Hello, I got some feedback off my peers, this has given me a  lot of inspiration for my project. I've got some new design ideas.

Which are! :

• If I can't make the slider work then i can just make the tag cloud look good and operational without the sliding element.
• The background could be an image of the interior of theatre royal. The content bg can be semi transparent.
• The background image could be a mix of old and contemporary. It can start from looking ancient to victorian to grainy. It can start black and white, to grey and grainy to vivid vibrant colors.
• It can fade and transition to each other or be like patterned tiles. My idea is to create long rectangular bars (vertical) Like stripes than alternate between other colored tiles. E.g. greyscale, color, grayscale, b/w, color, grayscale, color etc.
• A whacky idea would have the background focus between the designs depending on what era the slider is on. 

• On a side note: to make the artefact test site prototype *slider*  image based on a slider to save time

An idea as a background image (could make the screen as the content div like a panorama)

Client Project YCA: Development 1

I've been developing my design by coming up with different visual designs for the appearance/theme of my artefact.

I did some google searches for 'tag cloud' and found some interesting design/layouts, like this one:

A design of a tagcloud

I noticed that it 

• emphasized the contrast between the big and the small. Overall this created a better visual composition.
• There was no smooth transition between small/large font, the effect was Be RaNDoM
• The overall shape was round/ circular

I had a play with increasing the range between min/max font sizes and used css "text align: center".

Playing around with font size range

Centering those tags!

Color variation 

Next steps

I've been thinking, yes I am creating a tag cloud, which could include influences from what tagcloud design (look and feel), but I am creating a timeline too. So, why not, incorporate design influences from both! Think how the timeline feel would look with the tag cloud!

Google: How to style tagcloud / timeline. Some of this is about: typography/style VERSUS whats technically do-able on the web

Research Project: Finalised Idea

My Lecturer David suggested me to make a timeline where each play title will be displayed as text on the screen. And when the user scrolls on the scrollbar, the javascript would make the play titles that corresponds to the currently selected date to become enlarged/change font color.

I've used some built in javascript plugins for tagcloud and a slider. This what I've been able to design so far:

I also used "fancybox" plugin to create a lightbox effect, I edited the code to stylise the design to my liking from the default settings.

Next steps

• To look at how I can stylise the theme/appearance of my website appropriate to my target audience.
• To compile a comprehensive list of productions/content/images to put onto my website

Research Project Presentation

Hi, Good news, my presentation for my Research Project went very well yesterday,

Here are the verbal feedback comments I received from my peers:

• I linked the section "methodology" well with justified reasons for how I'm going to conduct my artefact and how it will help answer my question
• Fine overall, good quotes
• Have a clear idea of what I'm doing

Self-Evaluation

I think my research project is going well. I have a clear idea of what my next artefacts are to be. I've made an informed decision by thinking earlier on what I'm going to do for my final year project, and I am happy with it. I am interested in testing interactivity and user experience. And I believe it will help set me up in future to do freelance work.

I think I have found some relevant sources but I should spend some time reading them more because it will backup my Primary (artefact) testing.

For the moment, priority is on the "Nottingham Loves" project because I only have a month to finish this project and I need to get a move on.

Research Project: Artefact 2 Visualisation

What I will be testing?

Example of ccs3

Example of  css3

Research Project: Artefact 1 Visualisation

Website structures: Linear vs non-linear narratives

Do they affect user experience/usability?

Photoshop prototype designs

Hierarchal structure of designs

Client Project: YCA design prototypes

These are the different prototype ideas for my project. I'm haven't made a decision about which one I want to do yet.

Idea 1

Sketch Prototype 1

I really like this idea because its simple yet effective. I think its doable in the timescale that I have realistically. I could do further reading about scrapbook style layouts, could include an illustrative such as handwritten text annotations, or a diary/journal look? 

Also a research journal about scrapbooks: http://www.imageandnarrative.be/index.php/imagenarrative/article/view/158 (A visual essay)

Also useful plugins to aid the design of this: (modify css3 styles to make it my own)

• http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: Page scrolling and parallex section, sticky fixes elements while the rest is scrolling)
• http://buildinternet.com/2011/03/mosaic-sliding-boxes-and-captions-jquery-plugin/ 
• http://stackoverflow.com/questions/10930783/mosaic-grid-gallery-with-dynamic-sized-images 
• "masonry.js"

Or for more plugins or options:

Good reference materials

Idea 2

Sketch Prototype 2

Also a viable design. I like this idea in the visual sense but I'l have to think about how the fonts will be positioned code-wise. I imagine a Lightbox will open up the information boxes. A good source will be researching typography.

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: text effects, sticky fixes elements while the rest is scrolling)

Rejected Idea 3 

Rejected Prototype 3

Probably the most radical and impractical thing to produce on screen. On paper it looks good, but in practicality, not so much.

Idea 4

Sketch Prototype 4

A very intresting concept, if this works, that would be really good. Could be quite complex and time consuming to do. Will have to see if there are any good integrated plugin support for this. A good example is http://2ammedia.co.uk/

Idea 5

Sketch Prototype 5

Similar to scrapbook idea but more creative use of shape and layout. A very good source would be how to make one page scrolling websites.

Next Steps!!

It may be a good idea to create a more final prototype on Photoshop to get a better visualisation of what you're going to make. Gather images (decide on how many productions you're going to have) and structure first, and then make a mockup.

Part 2: Research One Page Scroller

continued from last post...

Remember your dreams

http://www.discovershadow.com/

• There is a link on the first page that redirects to another webpage about getting the App before introducing it first. Sounds more logical to have this at the bottom, don't you think? 
• Visual step by step "How to", slider layout helps because its sequential/methodical

Initial experience

First off- great idea! An App to record your dreams. :) The slider is a good tool to show a step by step sequential process. Simple but effective.

Von Dutch

http://www.vondutch.com/

Initial experience

This is essentially a digital info graphics slider that tells the history behind an iconic influential person. Again this is a sequential narrative and the interactive slider does help; the information flows fluidly.

Every Last drop

http://everylastdrop.co.uk/

Essentially, a lot like "These are things" website. Its about water conservation, and the set changes and tells a story. The setting provides context for what activity uses how much water and how we should cut down. 

Apart from scrolling, there's not much user input. You don't need to click to open up anything like you would expect in an interactive environment. 

Research: One page scroller

I thought I look around one page scroller's because they are interactive ways of conveying a message in a linear and often narrated style.

This post looked helpful, I went through the list and quickly went through each one to get a flavour and initial thoughts and experiences on each.

http://1minus1.com/labs/talking/10-beautiful-scrolling-one-page-websites

These are things

http://thesearethings.com/

• About a design and illustration studio, tells us what their "agency" does
• Playful style, fun cartoon characters
• Each slide shows them being in a different stage set

Initial experience: 

Firstly, I'l talk about the usability. Personally when I first went on, I glossed over the navigation and started scrolling manually. This does not look good since the characters aren't in the right position. I'm wondering, why have scrolling at all then?

I can see the illustration style the duo produce but apart from that, where is the gallery to see  your latest work? Perhaps more material you could browse would produce more of a interactive environment feel, if you like. So the idea is great, but why not push further with it.

More than Twenty

http://www.morethan20.com/

• Option to use scroller or the traditional navigation. Choice of Linear/non-linear!
• Illustrative style, handwritten
• The "About section" starts off as relateable personal story about "growing up" and "how time passes by quickly" to how she became a "photographer". It humanises everything
• It also explains the concept behind why her website is called "More than Twenty"

Initial experience: 

I really like this website, its captivating! Just by how it connects to you. The narrative is free flowing without needing to physically click on the next link. She sounds like a very real person and its convincing how passionate she is about photography. If I needed a family portrait, this is who I would ring!

Artem and Julia wedding

http://artemjuliawedding.com/en

• A visual slider about how a couple met and how they became married. Does tell a story clearly, but there is almost no tension in the story. Its a "Happily ever after", without the middle bit about the "Prince coming to the rescue"
• It does look nice visually, and the slider helps telling a sequential story
•  but its not very memorable.

Client Project Practice Presentation

Yesterday, I did my presentation in front of my peers and lecturers. It got some very helpful feedback on what to improve for my real presentation.

• Define your project specifically: name it Nottingham loves Royal Theatre if this is the only one you're looking at
• Be clear about your aims: what is the purpose of my project? What do you aim to achieve or do in the project.
• Sourcing: Make it clear where your sources are from! Define 5
• Research: Perhaps make a mood board? Look at spirit nottigham, 2am-media, infomation design, data visualisation
• Name 5 keywords
• Time management: Make a Gantt chart to show how you're going to plan out your time
• Evaluation: Start evaluating what you have done so far, what have you learnt? Why are you focusing on Theatre royal specifically?

I will upload my prototypes shortly.

Client project idea: YCA

Hello, so I've been putting much thought into what to submit for the YCA brief with its HUGE amount of scope. I went into the Nottingham Tourism centre and took some leaflets to see what was going on locally.

After some consideration I think I want to base my project on:

Nottingham loves THEATRE