cathski

An IA meets jQuery

2007-11-26T09:50:00.000-08:00

Now, not being a really codey type person, I have been excited to start playing with jQuery as I don't need to know too much technical stuff to use it and some of the marvellous associated plugins out there.

I've just updated a site I look after with my first experiments: a gallery and vertical accordian.

I'm especially interested in the ways in which you can use it to provide some really elegant interfaces - I think this, or something like this is the key to us being able to design more engaging and intuitive user experiences. I'm mostly interested in it for this IA/UX aspect, I'd like to be able to wireframe ajaxy type interfaces more quickly for user testing and early client feedback - i have html and css skills - this feels like the third part of the triangle.

For those of you interested in learning more, here are a few resources I'm gathering:

http://del.icio.us/electricelephant/jquery

I'd love to see what any other non-coders/IAs like me are doing with it, especially in terms of wireframing and playing with the interface for enhancing the user experience.

how to animate a walk using a flipbook

2007-11-23T10:48:00.000-08:00

A word about walks...
Walks are strange things - everybody's is different. We can actually consider a walk as a series of falls. Each step we take, we shift our weight and 'fall' onto the front foot.

At first, they may seem confusing things to animate as there's so much going on, but we can actually break a walk down into several steps to make the process easier.

A word about flipbooks...
Flipbooks work because of something called 'persistence of vision'.

There are 3 main techniques you can use to animate a walk.

1. The scientific method
2. The 'feel it' method
3. The 'rotoscoping' method

We will start by looking at the scientific method.

There are 2 ways you can animate a walk:

1. 'In place'
2. 'Forwards'

'In place' is where the character walks on a spot

Forwards is where the character walks from one side to another across the page. We will animate a forward as it is a little easier.

The Poses

Within a usual walk, there are 4 key poses:

1. Contact
2. Recoil
3. Passing
4. High

1. Contact
The feet are at their furthest extension in the walk. That is their most extreme position in the cycle. Note that the heel of the back foot is just off the floor as are the toes of the front foot.

2. Recoil
This is the frame where the character impacts the ground. It is also the lowest point in the cycle. The characters arms are furthest from the body as a result of the force of hitting the ground. The front foot is fully in contact with the ground; the rear foot has just lifted up from it.
Note that the leading foot is directly beneath the body, supporting the weight above it. Too many beginners produce recoil poses where the foot is not beneath the body, but several inches ahead of it. Try to avoid this.

3. Passing
The head is slightly higher than the contact frame head. The character is standing on one leg whilst the other leg passes it.

4. High
This is the highest point in the cycle. The character's body is stretched to the maximum as he lifts his leading leg forward to reach the next contact position. The heel of the trailing foot is just beginning to leave the ground.

Whilst just these poses will pretty much work as a walk, it will be incredibly fast. To slow it down, we need to add an 'inbetween' frame between each pose. A usual walk will have 8 frames in each cycle (8 frames per one foot moving from front to back).

If you feel like trying this out for yourself, start by inventing a walk. Get up and act it out. See if you can do it slowly and 'feel' where the main poses are in your walk. Then try to draw each pose as you act it out, bearing in mind the key poses we discussed earlier. Don't forget your inbetweens, although you can always add these later if you feel it's easier. If you want, pair up with someone and draw each others' walks.

Further resources:
a great walk cycle tutorial by idlewild
an online flipbook maker and gallery
eadweard muybridge walkcycles for rotoscoping
walking - an animation by Ryan Larkin (1968)
adjustment - a great film by Ian MacKinnon about love, loss and flipbooks (2007)

tinnitus

2007-11-19T11:31:00.000-08:00

an abstract autobiography

2007-11-19T04:13:00.000-08:00

i made this film 6 years ago, just dug it up again:

Stu's write thing

2007-09-05T02:23:00.000-07:00

Stu's write thing is a new blog by a friend of mine. Stu writes letters of feedback - good and bad - to companies whenever something catches his eye. I think they are funny and informative, hope you enjoy them too.

three cities and a thousand islands

2007-06-26T15:21:00.000-07:00

just got back from a holiday to the usa and canada. it was ace. i took some pictures - here's one below taken on a door in new york and there are a few more on flickr.

how to make information pretty

2007-05-21T05:04:00.000-07:00

fantastic little blog dedicated to collecting beautiful examples of information aesthetics. i love it.

information aesthetics

animation for seabear

2007-05-21T04:58:00.000-07:00

wow - this is really lovely...

let's not ask why

2007-05-11T14:30:00.000-07:00

waterfall, iterative and spiral

2007-05-09T04:48:00.000-07:00

i've long been interested in web development methodologies and doing things as efficiently, creatively and painlessly as possible. in my teaching this week, we've been talking about the drawbacks and benefits of the 3 main models currently out there: waterfall, iterative and spiral.

here, i'm going to attempt to describe each.

waterfall
the traditional way of building websites/apps. you basically move from one stage to the next, getting each as right as possible and signed off by the client before moving onto the next. something like this:

- requirements gathering
- ia
- get feedback and client sign off
- graphic design
- get feedback and client sign off
- frontend build
- backend build
- content population
- test
- get live
- get client sign off

let’s make an analogy with the real world. You’ve been commissioned to create a sculpture. If you used the waterfall method, you would do things like so, strictly in the following order:

- draw up detailed drawings and technical diagrams about how it would be constructed
- build the literal wireframe – the mesh inside to give it its support
- then you would create the skin
- then you would decorate and refine the skin
- you stop when all blueprints have been adhered to

iterative
you also start with the requirements, but from then on it, it's a totally different animal. you define the core purpose/functionality and build that first - in a very rough way, but will all aspects addressed to some extent (eg ia, graphics and code). you then very quickly get this prototype to the client for immediate feedback and then do the next iteration. you continue to do these iterations, until you've eventually refined and built the whole thing. iterations are all very quick, maybe only a day long.

something like this:
- requirements gathering
- define core purpose/functionality
- build rapid prototype
- get feedback
- refine prototype
- get feedback
etc in a loop
- get live

going back to our sculpture analogy, we would build it something like this:

- you’d start with the most important part – the bit that most people will get most out of, in our case, the face of our sculpture
- you’d fashion a crude version in a short space of time
- you’d review that with the client and refine it
- you repeat, all the time refining what you’ve done and adding new bits in order of priority
- you stop when you are happy that it serves its purpose

spiral
the spiral methodology is similar in principle to the iterative, but instead of starting small, you build a crude version of the complete thing over a longer first iteration. you then smarten this up using diminishing iterations until the job is finished.

something like this:

- requirements gathering
- define whole site/app, but in rough terms
- build prototype according to these specifications
- get feedback
- refine all parts of prototype (ia, design and build)
- get feedback
etc in a loop
- get live

returning to our sculpture, we would do something like this:
- you start with the block of ice that you will carve your sculpture out of
- you fashion a very crude version
- you continue refining, chipping away until you have ‘unwrapped’ your sculpture
- you will stop when you are happy that it serves its purpose

pros and cons to come in a later post, but for now, what do you think works best for web dev and why?

ducking and diving

2007-05-08T12:06:00.000-07:00

the ten commandments of project management?

2007-05-07T07:51:00.000-07:00

i'm looking at project management ideas and tools today in preparation for teaching this week. i just came across 'the ten commandments of project management' (warning: there's some annoying popup nonsense going on on this site) by james m. kerr and thought it threw up some good ideas. here are his commandments along with his descriptions for each:

*******************************************************

1. Thou Shalt Narrow Project Scope
Nothing is worse than the never-ending project. It can suck up resources and exhaust even the most resilient teams. To keep projects tight and focused, carve larger efforts into smaller projects that have achievable deliverables and can meet deadlines. In the long run, a series of small wins has more impact on the organization than a big bang that never sounds.

2. Thou Shalt Not Suffer a Fat Team
The best way to get off to a good start is to ensure that the project team is the right size. Larger teams are more difficult to motivate and manage, and personalities can get in the way of the work. There is no optimum team size, though a good rule of thumb is a role for every person and a person for every role. But if team members need to play more than one role, that’s OK. If you err, err on the side of a smaller team.

3. Thou Shalt Require Full-Time Business Participation
To ensure that the desired results are delivered, the business perspective must be represented on a full-time basis. Moreover, if business leaders want the best and brightest from IT working on their initiatives, they need to provide the same from the business side. By committing full-time resources to every project, business leaders confirm that project work is important.

4. Thou Shalt Establish Project Review Panels
A project review panel is a project team’s governing body, addressing issues of business policy and strategic direction while assisting in the removal and avoidance of project roadblocks and pitfalls. Typically, midlevel business and IT managers from the involved areas participate in biweekly project status meetings. To ensure flow and continuity, any problems identified during these meetings are assigned to project-review panelists, who address them while the project team carries on with its work.

5. Thou Shalt Not Provoke Burnout
It’s not unusual for project staff to become both mentally and physically exhausted by the stress and struggle of the work. Be sensitive to this and take precautions to avoid it. One common contributor to burnout is serial project assignments. Organizations tend to assign the “usual suspects” to every high-visibility initiative. If you find that certain people come off one project only to be assigned immediately to another, you may want to consider creating some policies that limit or monitor such staff use.

6. Thou Shalt Seek Outside Assistance as Needed
Using outside project experts is another way to prevent burnout. Besides augmenting project teams, outsiders can often provide valuable new ideas, perspective and energy. It’s essential to bring the right consulting support into a project at the right time. Specialized technical or business expertise is one type of support; project management expertise is another. Be sure to consider where a given project team is in both its project plan and overall experience curve before deciding on a specific type of external resource.

7. Thou Shalt Empower Project Teams
Project teams struggling to meet deadlines should not be expected to perform pro forma activities such as filing time sheets or attending departmental status meetings. Rather, they should be empowered to do whatever it takes to get a superior job completed on time and within budget. People will work harder in a trusting environment where expectations are well understood and individual initiative is valued.

8. Thou Shalt Use Project Management Tools
Mundane project management work can be automated. Look for tools that offer project tracking, task management, workflow administration and resource-analysis support on an intranet-based platform that promotes information-sharing and communication. But remember, using technologies that add another layer of complexity to an already challenging project is not a good idea.

9. Thou Shalt Reward Success
All project participants should be recognized in some positive way for their toil and personal sacrifice. The rewards need not be extravagant. Sometimes a sincere letter of commendation from a corporate officer is enough. More significant forms of gratitude such as tickets to ballgames, theater evenings, extra vacation time and financial bonuses should also be considered if results warrant them.

10. Thou Shalt Not Tolerate Quick-and-Dirty Work Efforts
Solid project management policies should obviate the temptation to indulge in quick-and-dirty project work, which only leads to error, waste, rework and frustration.

*******************************************************

here are my thoughts on the ones that interested me most:

2. Thou Shalt Not Suffer a Fat Team
this was an interesting one for me as it brushes on a topic that has interested me for a long time: what is the ideal team size and shape? is a team of specialists better than a team of generalists? are there different ideal team makeups for different kinds of projects?

i think i broadly agree with the author that it's best to err on the side of smaller teams, but i think you probably want a team of generalists if this is the case. i think that the makeup of the team is directly related to it's size and the type of project you're undertaking together.

3. Thou Shalt Require Full-Time Business Participation
ha - this is an interesting one - it would be great to get this on every project and every project i do i try to ensure that this is the case. but in reality? this has never happened. i have tried lots of different approaches with this topic and although i've never drawn any really good conclusions, i do think that getting the client involved so that they feel a significant degree of ownership is the best way of ensuring ongoing commitment and support. i would be very interested to hear what you think about this issue and any ideas you have for tackling it.

5. Thou Shalt Not Provoke Burnout
constructive downtime for all - crucial!

7. Thou Shalt Empower Project Teams
i thought this was absolutely spot on. pro forma activities are a huge drain on teams under pressure and they just serve to distract and annoy. unfortunately, rigid company systems and culture are often too inflexible to accomodate people not doing these activities, even on an occasional basis. this point can also be translated into the physical environment too. a dedicated, peaceful room with no phones is essential for concentration. there needs to be ample wall space for pinning up ideas and work and diagrams and project information as well as a whiteboard for sketching ideas. lots of post-it notes in a range of different colours are also important as is the freedom for any of the team to install any software they want/need at any point.

9. Thou Shalt Reward Success
i wasn't sure about this one actually. although of course i believe that success should be rewarded, the examples on the article felt a bit superficial. i think from the outset that if you are paying people what they are worth and giving them enough time to do a proper job and give them everything they need to support them in doing their job, these quick fix rewards shouldn't need to occur. success should primarily be rewarded with long term salary increases/more holiday if it's truly valued. although a few drinks and a meal for the project team after delivery should be built into the budget from the start ;)

10. Thou Shalt Not Tolerate Quick-and-Dirty Work Efforts
never. quick and dirty efforts are deeply unsatisfying on every level.

the easy button

2007-05-07T01:23:00.000-07:00

i was tasked with filming some friends' wedding yesterday and didn't have much time to play with the camera beforehand. just as the service was about to start, i realised that every time i zoomed in, the image was going blurry and that i had to do a manual focus. feeling slightly panicky that the whole day was going to be captured as one big blur, i scoured the camera looking for an alternative option.

and there it was! on the side, in big letters, was a button labelled 'EASY'. i pressed it and hey presto - instant sharpening of the picture on zoom. i thought this was a lovely bit of usability. it started me thinking about how maybe we could be more kind to novice/first time/unconfident users of websites and particularly web apps - maybe there's someway we can build in 'easy' buttons until they feel ready to take their stabilizers off. in fact, maybe the 'easy' button/setting should be on as default when a user first arrives even, so they don't have to search around to switch it on?

webby awards

2007-05-01T14:46:00.000-07:00

just saw that the webby awards have been announced. i was interested mostly in the animation and navigation categories mostly. jonathan yeun picked up a couple of awards - it's not a site i've seen before, but at first glance looks interesting. i like the way he's doing lots on rollover rather than click - i'm a lazy surfer and i think this technique works well with a small hit area.

i saw that samrost2 won the games category - i really liked the first one and will check this one out when i'm not so damned busy. the first samrost definitely needed plenty of time to fully enjoy it - but was worth the investment.

the activism award went to green my apple - i saw this a while back and thought it was ace. having just moved away from the dark side and bought a little macbook, my smugness was somewhat undone when i saw this site. i thought it was a stroke of genius in its conception and am pleased it won an award.

one more caught my eye - we feel fine - which was a nominee in the best visual design/aesthetic award. i just had a little play and was pretty hooked. it's a great example of web 2.0 - the good bits of web 2.0 i mean - lovely interface with live, user generated content. the only thing i wanted from it which it didn't do, was to be able to post directly to it.

you are not alone

2007-05-01T14:42:00.000-07:00