DDM - Design for Digital Media

Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/DDM

(login to the website: username = student; password = student)

Class 10 - UX & more PhotoShop skills


Class: discussion & activity - UX – user experience – current theory and application – interactivity and usability, emotional design

Discuss UX (user experience) - what is it? how is it manifested in design, particularly web design - usability, user experience, emotional design, three types of visual design (Norman).

How does this manifest in certain products & websites? eg: Apple & its products; Movies, Cars, Music (videos) etc...

User Experience or UX as it is often referred to, is more than just the usability of a website or interactive medium. It involves the entire experience a user will have before, during and after engagement or interaction with an interactive digital medium, or in fact, any product. The topic of UX is very popular in the design world at the moment. There are a range of theories, and many, many processes and practices recommended.

One very good reference is a book by Don Norman titled "Emotional Design", which examines the way we act towards objects, products, websites etc. Norman has determined 3 levels of visual design that all need to be considered in order for a design to be both usable and attractive - attractiveness being an important part of the user experience:

Visceral Level

The first and also lowest level is visceral. This is the level of preconsciousness, where emotional signals from our environment get interpreted automatically. The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something. Impressions at this level have an immediate emotional impact on us. Norman calls activities that are initiated from the visceral level “bottom-up behavior.”

For a visual design, this means that the visceral level has to do with the initial impact of the appearance, touch and feel. The visceral quality of a design can be studied by observing people’s first impression. A good visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited. 

Behavioral Level (American spelling)

The behavioral level is all about how things work and how we use and experience them. What matters on this level is function, performance and the physical feel of something.

A visual design would need to feature relevant functions that fulfill actual needs. Behavioral design needs to be understandable and usable. While confusion and frustration lead to negative emotions, fun, ease of use and effectiveness trigger positive emotions. To ensure a good behavioral design, you have to really know your user’s needs — for example, by observing how they interact with the design in the field. 

Reflective Level

The reflective level represents the highest level of our cognitive thought processes. Norman calls activities that come from this level “top-down behavior.” This level is conscious and capable of a high level of feelings, emotions and cognition. On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves. The reflective level sets in after having been exercised, and it dominates the other two levels, which means that through extensive reasoning, we can overrule both automated behavior and emotional impact.

In visual design, expertise enables us to respond differently to a design than if we had no idea what we are looking at. The reflective design defines our overall impression of a product, since we reflect on all aspects of it: messages sent, cultural aspects, the meaning of the product and whether it’s worth remembering. 

(referenced from "Not Just Pretty: Building Emotion Into Your Websites" by Sabina Idler, Smashing Magazine,
http://uxdesign.smashingmagazine.com/2012/04/12/building-emotion-into-your-websites/)

 

These levels of visual design are best delivered to the user through emotion and storytelling. This doesn't necessary mean a story as we know it - like fairytales for example, but more of a sense of narrative that initially draws us in, imparts some message or information, builds to a climax, and then has some kind of conclusion. There are many examples of design "storytelling" that might be found online in some of the best websites. Some of the example references below contain lists of products and websites that create UX through some kind of story arc. The article by Curt Cloninger is a good example. He is a very interesting artist and theorist recognised in the "new media" arts community.

One example of how these three levels of visual design might work is by looking at a classic example designers love to use: The Apple iPhone. If any of you own an iPhone, you will know how when you first get your iPhone, everything from the packaging to the accessories contributes to the "message" or experience that Apple is trying to convey. Opening the packaging is exciting, interacting with the product is easy, intuitive, the whole experience (hopefully) is a pleasurable or good one. Apple are very good at attracting people by drawing them in with good UX design. Can you think of other examples?

 

What is Skeuomorphism?

There is also a lot of talk about skeuomorphic products or interactive interfaces, so what is it?

Definition: skeu·o·morph [skyoo-uh-mawrf] noun A derivative object that retains ornamental design cues to a structure that was necessary in the original, even when not functionally necessary. In terms of user interface, this means applications that are designed to have elements of them that look or behave like their real-world counter-parts. For example turning a digital page to resemble the experience of reading a physical book.

Again, there are so many examples of this on the web. Many of you have chosen themes for your Wordpress blogs that have some kind of skeuomorphic elements like lined note-paper background, book-type interfaces, etc.

This is not a new idea though, if you look up Skeuomorphism in Wikipedia (http://en.wikipedia.org/wiki/Skeuomorph), you will see many references from ancient Greek temples, to elements of fashion design that employ this trait.

In digital media, think of all the software apps that are skeuomorphic: Kindle & other e-book readers, music apps that have simulated keyboards, even Photoshop with it's tools that emulate physical art materials - brush, pencil, eraser, clone stamp, etc. Product designers do this for a reason - if skeuomorphism makes a product more familiar, more intuitive, and easier to use, the user will have a better experience of the product overall.

Having said that, there are times it can be overdone, and some designers are very critical of skeuomorphic interfaces that perhaps prevent more innovative interaction because they keep people in a simulated analogue environment when more experimental interfaces could be developed. As with most things, finding a balance that best suits your audience is the key.

So how can you use UX visual design and attributes like Skeuomorphism to create a better experience for your audience/users? Discuss...

 

REFERENCES

Smashing Magazine Articles

http://uxdesign.smashingmagazine.com/2012/04/12/building-emotion-into-your-websites/

http://www.smashingmagazine.com/category/ux-design/

http://www.smashingmagazine.com/usability-and-user-experience/

http://uxdesign.smashingmagazine.com/2010/01/29/better-user-experience-using-storytelling-part-one/

http://uxdesign.smashingmagazine.com/2010/02/11/better-user-experience-through-storytelling-part-2/

 

Curt Cloninger

http://www.alistapart.com/articles/storytelling/

 

Discuss Everything is a Remix video series. what did you find engaging in this series?

Is everything a Remix? how do you feel about the various IP issues discussed in the videos? Any comments or criticisms?

Eduardo Navas, key theorist for Remix Culture, has one main criticism of this video series (http://remixtheory.net/?p=480) which is that not everything is a "Remix", rather "everything is Intertextual" - so what does this mean? Discuss...

Quote by Eduardo Navas: "What one could say is that “everything is intertextual,” which is closer to the tradition of sharing ideas in conceptual and material form, prior to the time of modernism. Historically all the material covered by Ferguson is certainly relevant in terms of recyclability, but it does not validate the catch-all statement “everything is a remix.”

Understandably, “everything is intertextual” (which could also be contested if one gets really picky) is not as catchy as “everything is a remix.” To go viral, one must use what is in vogue and quickly understood. Intertextuality had its time in the postmodern period. Now, it appears that remix is the catch all phrase.

Other things to consider: Postmodernism and "quotation" or appropriation in art - See Quentin Tarantino films like Kill Bill 1 & 2. Furthermore, what about inappropriate use of cultural iconography? For example, indiginous cultural art and artefacts:

http://www.nma.gov.au/exhibitions/yalangbara/art_and_indigenous_rights

 

Assessment Tasks to review:

  • Assessment of Blog design and reverse wireframes
  • Check Storyboard trailer Concept and rough sketches
  • Check reverse wireframe exercise

Lab: Photoshop Masks, Clipping Paths, Work on Storyboards

Class Exercise

Photoshop - Layer Masks & Clipping Paths - create 2 images that use these types of masks with complex objects

These masks are 2 more examples of "non-destructive" image manipulation in Photoshop. A Layer Mask is attached to one layer only, and stays with that layer. A Clipping Mask is a separate layer that affects all layers linked to it. It will depend on your image and the effects you want, whether you use one or the other. Both are very handy to know, but may be a little confusing to use at first.

Layer Mask

To create a Layer Mask:

1. Open one of the "Flower" images (provided in the shared network area) in Photoshop and save it as a layer.

2. Create a new layer and drag it under the Flower layer. Fill this bottom layer with a colour, or paste one of the background images provided into this layer.

3. Select the Flower layer and then choose the "Add Layer Mask" button at the bottom of the Layers panel. You should now see a second thumbnail next to your flower layer image - this is the mask. By default it should be filled with white. The white area is the visible area of your layer image. To hide parts of your layer, use your paintbrush tool with black paint, and cover the areas that you want to hide, like the background. Layer Masks work with black and white pixels. Grey will be semi-transparent, so when using your paintbrush or other tool, you can set the opacity if you want a blended effect.

layer mask example

Getting the mask right can be difficult if you have a complex object. If your background is one colour, you may use the Wand tool to select a portion of the background in the image, then click back on the mask and fill it with black. There are many ways of getting the mask right. Practice is needed to become a masking expert.

To refine your mask, you can also use the Mask panel to feather the edges of your shape.

4. You should immediately see the mask activated in your layer. To remove the mask, you can drag it to the Trash can in the Layers panel, or to temporarily disable it, right click on the layer mask and choose "disable layer mask". You can always enable it later if you choose.

5. This is a great way to work with layers that doesn't destroy your original image. If you want, you can also save the masked layer to another new layer, with the mask applied, which is handy if you want to paste it into another Photoshop file. Just right click on the layer mask and choose "Refine Edge". You will see a range of options that include smoothing and other options for refining the mask. At the bottom of this panel, there's an option titled "Output". If you choose Output to "New Layer" you will get a new layer with the Flower image and no background - the mask has been applied.

 

Clipping Mask

A clipping mask is a separate layer that can be attached or removed from other layers, so in some ways it is more flexible. It also works with Opaque pixels and Transparency instead of White and Black - the opaque pixels are the visible area and the transparent part of the Clipping Mask Layer is the hidden part of the linked layers.

To create a Clipping Mask Layer:

1. Open one of the "Flower" images provided in Photoshop and save it as a layer.

2. Create a new layer and drag it under the Flower layer. Fill this bottom layer with a colour, or paste one of the background images provided into this layer.

3. Create a new layer in between the Flower and the background layers - this will be the Clipping Mask Layer. It seems unusual to have it underneath, I find it confusing myself, because I'm used to using Flash where masks are attached from the top.

clipping mask example

4. Grab your paint brush - the colour doesn't matter - and paint a shape of pixels that will form the visible areas of the mask. just mask a rough shape at first, or perhaps select the flower layer, select the flower itself using the wand tool or similar to select the background, then Invert it to get the flower shape. once you have the dotted selection area, switch back to your Clipping Mask layer and fill the shape with any colour.

5. To activate the clipping mask layer, move your cursor over the line between the Clipping layer and the Flower layer and right-click. Choose the option "Create Clipping Mask" in the context menu. You should now see the Flower layer is indented with an arrow pointing down to the Clipping Mask Layer. The opaque shape in the Clipping Mask Layer should now be the visible area of your Flower layer.

6. Experiment with creating new layers on top of the Flower layer, and see what works and what doesn't work. You can also have semi-transparent areas with a Clipping Mask by having semi-transparent pixels in the Clipping Mask Layer.

 

Outcomes by the end of class:

Create an image with each type of mask we have looked at today. Show the images to me before the end of class. Perhaps you can combine this exercise with your storyboard assessment task to make less work for yourself?

There are other masks in Photoshop that use vectors and paths which can be useful if you want to import content to Illustrator or other vector applications. You can find many tutorials online for all kinds of Photoshop Mask techniques. Some of these video tutorials are quite good.

 

With remaining time, work on Storyboard images for Assessment Task 2

 

Resources

Grab these images to use for your exercises (right-click and Save As), or find your own images online:

 

Reading/viewing for next week:

Find an article online on Skeuomorphism (it's easy, just Google the word) and read it before next week's class. We will make a list of these online resources that I can put on my DDM website.

 

Other Things to Remember

You should be continuing to work on the following Assessment Tasks:

AT2 - Storyboard Trailer;

AT1 - Blog (Keep adding entries to your blog)

Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.