Thoughts from the Underground

Building up HTML Skill

Normally, I do not spend a lot of my time using HTML or CSS, but I got a little caught up in reading on UX blogs and discussion forums about how web designers and UX professionals should or should not be required to know how to “code”. One person asked why they kept getting applications from UX designers who did not “code” (i.e., design from scratch with HTML, CSS, JavaScript, etc.) their own portfolio site. Those applications, according to the original poster, were apparently not good enough because he wanted someone who could design their own site rather than use a WordPress template or theme.

Much of the debate, which I won’t go into now, had to do with whether or not this type of UX person exists – some said this person is a mythical “unicorn” and the poster would be better off looking for UX designers who had a better grasp of psychology (which is also true). My question, and one of my arguments against this UX People Must Code, is that it does not specify the degree to which a (web-based) UX specialist should understand code. (And really, what they’re specifically talking about is HTML/CSS, not Java or .NET.)

I was curious: how much should a UX person learn about HTML/CSS and how fast can they do it? Well, in my own experience, I’ve found that spending a dedicated but serious amount of time learning something difficult (Russian, OpenFrameworks, driving) will not likely get you to mastery, but it will get you somewhere. I wondered if a UX designer dedicated, say, a month of time learning about HTML/CSS would that get them “far enough”?

I typed into my trusty Google search box “learn HTML in 30 days”…and voila! I came across a great website called TutsPlus.com. This site offers tutorials on all kinds of creative and design related topics, included web design and development. Web Development is actually on a sub-site, called webdesign.tutsplus.com. Turns out someone has already created a 30 day tutorial to learn HTML and CSS. And it’s FREE!

Checking it out, and skipping ahead, I was pretty impressed by this tutorial. I like movies and I love learning via video. The tutorial eventually has the pupil try to skin and recreate a website from a PS template. I became inspired to try something similar. Except I didn’t use a template. I used a page from a real website. It was an Etsy tutorial on how to sew a skirt. (I did make my own skirt, eventually, too.)

I’m still working on it, but I’m over halfway finished. The sidebar is a little bit tricky, so I’m taking a break. I’m using the 960.gs grid in 16-columns, and a few HTML5 tags. There’s not much need for CSS3 yet, but I think some of the buttons will need some styling for gradients and corners. It’s been fun, but I’m not sure I’d want to do it everyday. (Maybe, though…if I had more practice.)

*****

The funny part, is that the part of my brain that is working hard to format an HTML page and troubleshoot what could be going wrong with the CSS does not feel like the same part of my brain that comes up with UX inspirations and designs, and makes the associations between how a person would use a system with what the system offers. More on the Coding Designer later. For now, here’s a screenshot of my sample Etsy project and the real Etsy webpage. There’s still quite a lot of tweaking left to do, but you can see how it’s coming together.

JS Timeline interaction from WNYC

Found this today on Twitter. Can’t wait to try it!
“WNYC Timeline example http://wny.cc/JfeOBU ~ code: http://bit.ly/IY62fw ~”

Here it is on git: A beautiful vertical timeline made with Tabletop.js, Isotope.js & Handerlbarz.js. A collaboration between Balance Media and WNYC/John Keefe.
https://github.com/balancemedia/Timeline

Sketching!

With a little downtime at work, I’ve been catching up on some nice UX articles online. Here’s one I found about storyboarding iPad transitions using sketching called “Storyboarding iPad Transitions” by Greg Nudelman. The article calls out 7 principles that can be applied to storyboarding iPad transitions.

Component Relationship (background-foreground)
Illusion (motion perception and perceptual constancy)
Exaggeration (highlighting states, actions, and changes in state)
Staging (camera view, lighting, focus)
Acceleration and Deceleration (slow in and out)
Metaphors (using real-world analogies to convey complex digital events)
Simplicity (avoiding noise)

Actually, I wish I’d seen this article about 3 months ago as it’s directly related to the mobile project I’m currently working on. I did create a lot of sketches, on Post-Its(!), but I didn’t think so much about documenting the transitions as much as focusing on the user flow, which is what I’ve posted examples of below.

Here are some examples of what I did:

There’s more available here.

The article really makes it sound like this is a fairly complicated process; a lot of work. But, I think it would be very helpful, depending on your project. Particularly for off-shore development. Unfortunately, my project has simply too many screens to efficiently even sketch the interactions out, let alone wireframe them all. I hope I get to try this out on another, smaller project.

Response to “A Brief Rant on the Future of Interaction Design”

Found this post yesterday:
http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

Summarized by…

“The next time you make a sandwich, pay attention to your hands. Seriously! Notice the myriad little tricks your fingers have for manipulating the ingredients and the utensils and all the other objects involved in this enterprise. Then compare your experience to sliding around Pictures Under Glass.

Are we really going to accept an Interface Of The Future that is less expressive than a sandwich?
…

With an entire body at your command, do you seriously think the Future Of Interaction should be a single finger?”

One of the problems I have with, I’ll say, mainstream UX design today (or whatever it’s being called lately) is that there’s too much emphasis on the screen, and “new” interaction design just ends up being different ways to package a touchscreen.

It’s frustrating that most UX design is limited to wire-framing. I guess I’m still stuck this “creative technologist” rant by that W+K guy. (A Creative Technology Director at W+K rants about Creative Technologists. http://blog.wk.com/2011/10/21/why-we-are-not-hiring-creative-technologists/. Basically, he states that to be a creative technologist, you have to live and breath programming.)

Honestly, I’m not too confident that I know what a creative technologist is and I certainly don’t infer from the title “coder-only”. His rant seems so defeatist that in order to do whatever the cool new thing is you had to be a coder…which is yet another screen.

Yeah, you have to use a computer to code, and many new interfaces (i.e., projections, sound-design, electronics/pcomp) sometimes require serious coding. But, coming originally from the dance world, and living in the real world, I know that screens are just a small part of what’s out there. Sometimes I feel that that gets forgotten with most types of interaction design.

Giant Stories Final: Riding

To do the project, I set up at a couple of intersections in NY, and focused the camera on people already in cabs or people about to get in or out of cabs. I took footage at a couple of intersections and areas around Manhattan. Columbus Circle, Times Square/Port Authority, Houston and Allen/1st Ave, and 9 Ave. Most the shots were at night, but there were some during the day too – just haven’t worked them in yet.

Thesis: The Body Instead

The Body Instead is about exploring the subjectivity and objectivity of the body and the self, using mold-making and casting techniques and materials.

This project questions how the mind perceives the body and the self are explored, along with views about transcendence and immanence in relation to conscious thought and the existence of the self. In this project, a variety of mold-making and casting materials, such as plaster, alginate, silicon and food, are used to recreate and represent the human figure. The resulting cast, as a representation of the body’s impermanence, will be destroyed and subsequently preserved or consumed as food. Ultimately, the goal is to make the body both the source and the object of the aesthetic experience, by combining the experiences of the physical body with the perceptions of the conscious mind.

My thesis is an exploration in materials, using the body and the self as subjects, excluding our notions about body image and personal appearance. I am recontextualizing the image of myself using different materials to represent my body and I am exploring the relationship between the external (camera) “eye” or lens, the eye of the mind, and the I of the self. I will be exploring my self-image and my conscious and unconscious reactions to experiencing myself as an external physical object and as a concept.