INT320 Overview

Interactive Web Experiences (Sem 2, 2011/2012): The Overview

Welcome to an Overview and Summary of what we have covered this semester.

Designing Interactivity
One of the first few things I talked about was this idea of designing Interactivity and some useful questions to ask yourself when building interactives, even for the web:


 * Designing Interactivity:
 * What is your role as the creator of the interactive?
 * Are you a…. facilitator? co-creator? artist? teacher? librarian? (insert word here)


 * Experiencing Interactivity:
 * What is the audience's role in the interactive?
 * Is the audience your… co-creator? the introducer of errors? the introducer of random factors? the completer of the pattern?


 * After the Interaction:
 * How is the work changed after the interaction?
 * What is changed? What is considered part of the work? How do you treat the traces?
 * Where does your role end? Where does the audience's role end? When is the work considered complete?

Principles of Interaction Design
We went through a list of general principles of Interaction Design, adapted from this site - Principles of Interaction Design. These are useful ideas to remember when doing other types of interactive work, and not just websites, but also all other forms of interactions. Do you still remember these pointers mentioned in class?

Anticipation - guess what the user is going to ask for and provide it Autonomy - give users information so they have a sense of autonomy from understanding their environment Colour Blindness - recognize that users may need more than one form of response when interacting with something Consistency - maintain consistency between similar items Defaults - set defaults which are logical and meaningful but also easy to override Maximise the Efficiency of the User - and not the computer, keep the user occupied Make Interfaces Explorable - back/undo buttons and prompts allow people to have a sense of space and to go back if they have taken the wrong turn Fitt's Law - the time to acquire a target is a function of the distance to and size of the target Human Interface Objects - like objects in the real world, things usually have standard outcomes and predictable behaviors, and we expect that from our interfaces Strive for Latency Reduction - hide lag from users if you can't reduce latency, such as by distracting them with other tasks or giving them more information meanwhile Learnablity - if your site, app, or interactive has a learning curve, minimize the difficulty if possible, and remember that usability and learnablity should not be mutually exclusive Use Metaphors Intelligently - choose good metaphors which evoke the familiar, but they can also have a twist of meaning, as metaphors help users understand what they are doing Readability - remember that barrier-free accessibility will be more and more important as we all grow older Track User States - no one likes having to restart, by tracking you can allow users to take up exactly where they last left off Protect Users' Work - (Saving functions!) <li>All Navigation should be Visible - although the internet is invisible, the aim should still be to make it clear and natural, as most casual users may not be inclined to build up complex visual maps of what they're trying to navigate and will either get lost or tired - make things easy to navigate! show information all at once if you can and don't make users scroll or hunt for things unless necessary (and unless you are building an EXPERIMENTAL AVANT GARDE WEBSITE)</ol>

You might have already noticed the acronym UI or UX being frequently used on the internet. UI stands for User Interface, and UX stands for User Experience. A few years ago when I first started working I had never ever seen the word, but now you would probably see it on the job ads and classifieds in many of the so-called forward-thinking digital agencies and companies.

In a way, web design is not just about aesthetics and design and typography - it is really about designing a user interface and a user experience - especially one that takes into consideration the interaction between humans and computers. The interfaces we are playing with today do not have a corresponding analog in the real world, and you can pretty much design anything.

Technically speaking, you could design something really complicated to use, something totally OUT THERE or random or experimental, and surely some people will stick to that experimental spirit in exploring the digital medium. But if you want to make the internet more accessible to others, you could also look at it as an art, or a science in which you optimize the web and make it more usable. As the amount of information on the internet grows, so does the need to organize and structure this information, to think of the bigger picture and to design how we present and represent it.

As William Gibson (author of Neuromancer and the Wired article on Singapore being the "Disneyland with the Death Penalty") - "The future is already here, its just not widely distributed."

User Interface / Design Patterns
We also looked at "design patterns" or general solutions for web design problems. The internet has been along for so long that we can even be nostalgic about the "good old days", and many people before us have tried to design things for the web, so after so many years there have since been "conventions" of web interfaces.

As Wikipedia writes, "In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design". I called this site Design Patterns because in some sense, building for the internet is not just one big random act, and people have always been trying to organise information online sensibly and sometimes there are reusable solutions that simply just work, so it is worth looking through such libraries for design inspiration.

Note that these are merely suggestions, not hard and fast rules. You do not have to follow these patterns or rules or guidelines, but the rules give you a structure around which to think about, as some of these are patterns which will be inherently familiar to most internet users (eg: everyone can understand what a breadcrumb does), and reinventing new interfaces must still be done within the context of that understanding.

These are some reference libraries with elaborate lists of "design patterns" we have gotten excited about or maybe gotten bored with, such as Accordians, Coverflows, Slideshows, Galleries, Sliders... No matter what you are trying to do, you might be surprised to find some elegant solution in these patterns:


 * Yahoo! Design Pattern Library - a solid explanation of some of the main design patterns
 * PatternBrowser - a massive searchable collection of design patterns
 * UI Pattern Library - a good collection of patterns
 * Pattern Tap - another good collection of patterns

Grid Systems
Grid systems are ways of visually organising and presenting designs and information using fixed grids. For those of you Visual Communications students, this may have been something you would have explored in print, and it is equally relevant to how we can design for the internet. We went through the 960 grid system and how it can be used, but feel free to explore more of these grid systems.


 * 960 Grid System
 * The Golden Grid
 * The 1KB CSS Grid
 * Blueprint

As this is not a "design" class per se, I did not have time to explain it in more depth, but my Recommending Reading for learning more about Grid Systems would be these two excellent books if you can get a hold of them:
 * Grid Systems: Principles of Organizing Type (by Kimberly Elam)
 * Grid Systems in Graphic Design / Raster Systeme Fur Die Visuele Gestaltung (by Josef Muller-Brockmann)

Flash
We went through most of the main features of Flash CS5 as well as a basic introduction to Actionscript. It is almost impossible to cover Object Oriented Programming in a 12 week semester but I hope that this at least gives you something to start with learning it in your own time. You should also understand the difference between HTML and Flash, and how they are discrete technologies to be used for different ends.

General Concepts in Flash/Actionscript

 * Basic Operators - basic math
 * Conditionals - you should know how to write basic arguments
 * Trace - you can use the trace to print the value of a variable so you know what is going on in the file
 * Commenting - you can leave yourself comments so you can remember what you were writing earlier
 * Parts of an AS3 Class - this explains how classes work in as3

Flash / Actionscript 3

 * Main Timeline Control - You can go to a specific frame, stop the timeline, and resume the timeline
 * Tween Class - You can move elements around with gravity effects
 * Sound Control - You can add sound
 * MouseEvent - you can add things to happen when things are clicked
 * KeyboardEvent - you can add things to happen when keyboard keys are pressed
 * ColorTransform - you can change the colour of things
 * TextField - you can create a textbox and dynamically fill it with words
 * Panning - you can pan around one image
 * Parallax - you can create a parallax effect
 * Snowflake - you can make flying objects
 * Stage Display - you can make it go fullscreen
 * Mask - you can mask out an image in flash
 * Flash Default Components - you can use default UI components to make instant controls

You should be confident of making at least a simple interactive in Flash (such as a web banner or flash microsite), which should suffice for most interactive design jobs here. Some of the things I mentioned like Optimising File Size and the intricacies of the "Save for web" features in Photoshop may not seem very important but if you are going to do commercial work then conserving file size and tweaking quality might be important.

If you would like something to refer to, like a book, my Recommended Reading for Flash would be this Actionscript 3.0 bible. This was the book that got me started, although it was actual hands-on practice with AS3 that really made all the difference for me!


 * Essential ActionScript 3.0 by Colin Moock

HTML
To be perfectly honest, HTML is something that you almost don't need to go to school to learn, because a lot of the information is out there on the internet. But why would we teach it in this course then? Because it is often the easiest entry point into learning about writing code, designing interfaces, and then programming, and all the other amazing things you can do with computers. And like many things out there, it changes all the time. As future designers or programmers or artists, you would need to be able to be flexible enough to pick up new things as technologies change, merge, go out of date, and are updated all the time.

Introduction to HTML5
We talked about what is "HTML5". You should understand that not all browsers are made the same, and why Flash isn't going away either.


 * Mark Pilgrim's Dive into HTML5 (mirror copy of the book released under CC licence, as the official site is down)
 * Modernizr - Even HTML5 is not perfect yet, so we need to bridge the gaps across browsers!
 * Cross-browser Polyfills - Polyfills are solutions or bits of code that can be used to make certain features of HTML5 possible in older browsers which aren't so compliant or capable of natively rendering those features

CSS

 * CSS: Pseudo Classes & Pseudo Elements
 * CSS Box Display (margin, padding, content)
 * Order of Cascade / Selectors / Overrides
 * SVG Format for Vector Images

We learnt how to use font-face property to reformat the internet with non-boring fonts! This changes everything! In class you formatted a poem (original example file can be downloaded here) using fonts generated with fontsquirrel's font-face generator or one of the ready-made font-face kits.


 * HTML5 font-face
 * Fontface Generator

jQuery
jquery is a javascript library that is meant to make all the javascript easier and more accessible for designers and artists who might not be so adept with code. Although there is still a learning curve, it is considerably simplified and often reads a bit like english, so it is possible to understand it even if you do not have a programming background.

In class, we covered jquery through a worksheet i made which is available here. If you wish to see the solution, you can ask me for the URL personally, and I will be happy to share it with you again. If you complete the puzzle in the worksheet with reference to the next two reference links, you should be able to understand how jquery works and how you can use it to do simple animations even right out of the box.


 * jQuery - Getting Started
 * jQuery API

Content Management Systems
You should know what a Content Management System is, and why you might use one, especially for a larger project.


 * Wordpress - Although this is considered a blogging software, I picked this as it is the most accessible and easy to start learning.
 * Drupal - Drupal is arguably the best if you need. Many modules but must understand how to structure the taxonomic system.
 * Plone - Plone has been rising in popularity these days
 * Joomla - Used to be quite a popular CMS

We did a walkthrough with Wordpress and how it is made with PHP Includes. The secret of how it all works is: The Loop. Once you master the loop, you can build anything you want!


 * [ http://php.net/manual/en/function.include.php PHP Includes]
 * The Anatomy of a Wordpress site (Infographic)
 * The Wordpress Loop

Extra!
Resources for Fonts
 * google webfonts - free but you must be online to view their webfonts online
 * fontsquirrel - free for commercial use
 * dafont - do check font licence before use

Resources for Free Sound
 * Creative Commons Sound/Remixes
 * Creative Commons Sounds/Effects
 * Newgrounds

Resources on Color
 * http://kuler.adobe.com/
 * colourlovers - share colour palettes

Resources for templates:
 * web designers toolkit

Flash/AS3 Forums and other places to ask questions
 * flashkit board
 * actionscript.org forum
 * Kirupa forum
 * Flashdevelop
 * stackoverflow

HTML Sandboxes
 * W3Schools - site with tutorials and sandboxes
 * htmlsandbox

Flash/AS3 Sandboxes


 * snipplr (as3)
 * wonderfl (as3, flash player 11)

Mobile
 * Mobifying your Site