Posted by Vincent Woo
Wed, 25 Jun 2008 22:02:00 GMT
I highly recommend listening to the MP3 and following along with the slides of The why and how: UI case studies presentation given at Web Directions North 2008 by Daniel Burka. On the surface, it is an hour presentation fussing over insignificant details but that is what’s so great about it. Much of it isn’t about aesthetics or graphic design. Instead, the spotlight is on the process of tweaking placement, wording, and prominence. It is about rearranging for clarity and directing user actions processes. It is about intuitiveness; the end users should understand why things are in chronological order or in a threading model. The kind of design, as illustrated in the presentation with Digg and Pownce examples, that exhibits Getting Real.
Daniel Burka’s examples are fascinating because he starts off with something entirely acceptable but they are then iterated into something that is clearly better. Better not so that end users bask in awe over it’s majesty, but through transparency and clarity in its form. Yet, it is the journey that can provide the direction, incentive, and inspiration that guides design, not just some divine inspiration or foresight.
One of the things that Daniel Burka talks about is his success with using HTML mockups. I whole heartily agree as I found sketching with pen and paper and mockups in photoshop have their place in defining the general form but I’m hard pressed to properly define function in this manner. I don’t feel like I’m the only one since I’ve converted photoshop mockups to webapps, but sometimes would run into issues and ambiguity that the photoshop artist didn’t expect. It’s not their fault but unless you’re working in a webapp or through HTML, you won’t be thinking about webapp related issues. So it is refreshing to hear a designer say (loose transcript starting around 35min):
“This is actually a mockup of about eight connected HTML pages a little bit of javascript and CSS files. And so this is something I didn’t do with the previous comment system. I went immediately into implementation. So implemented in real code. Which took a lot longer and wasn’t as easy to play with because it was half broken most of the time while the code was being written. And so what is happening here is I can play around with if I digg this comment what happens. If I bury it, I can actually change your vote now and if I bury it OK that’s what happens. I want to see the comment again after I bury it OK that’s what happens. You can hide it. I can report the user. I was playing around with these things and now these interactions I can actually kind of – it’s so awkward having a bunch of HTML files interlinked but being able to play around with these interactions means I’m significantly more confident this time that when we release this thing. The flow of when you’re playing around and writing comments and editing comments, I got it setup for what happens when you write a comment we open it and save it, you edit it, you save those changes, so all those things I feel much more confident that each of those little processes all fit together alot better, they’re alot tighter.”
Design is an organic, ongoing and collaborative process and one in which all team members should have a hand in. Here, we have an example of a designer crossing the boundaries and working partly in the realm of the web developer. In the same manner, I would love to cross the boundary in the other direction more often. But too often client project work necessitates design up front for signing off and limiting cost/time resources that prevents creativity and experimentation in the latter stages of the project. In such cases, the webapp’s growth is stunted before it has a chance to mature.
Continuous refinements occur alongside continuous inspiration. Daniel Burka shows example after example where he focused and improved on design elements post release despite how sufficient they were already. The lesson: please don’t discount the inspiration generated through production use. If given the freedom of multiple iterations, projects will flourish.
I leave you with one last presentation reference about finding design inspiration from within the webpage itself. Remember, form follows function.
(~40min into the presentation): “Like I was saying before with the yellow dig button, is take that idea then take it further. Let it design language breath through the rest of the site. And so the story format has it on the left, I took it to the homepage, so you take this really basic horizontal line, you add one little off center hatch to the page and it adds a sense of brand, a sense of identity to the page. Adds a little drama to the page.”
Posted in Design, Web | Tags burka, daniel, design, digg, form, function, getting_real, interaction, interface, mockups, pownce, presentation, release | no comments | no trackbacks
Posted by Vincent Woo
Sun, 08 Jul 2007 23:59:00 GMT
Demo movie [1MB]. Revisory: Summer 2006.
Description
Online discussion space on graphical assets or unpolished concepts through message threads and image manipulation tools. Revisory facilitates non-linear design processes between people in distributed teams to better explore brainstormed ideas.
Development
The primary goal of this project to begin an introductory exploration of various web scripting technologies:
- Ruby on Rails
- HTML5 canvas element
- Prototype and script.aculo.us frameworks
- Javascript
The initial technical feasibility assessment concluded that the project was not commercially viable. A crucial factor was that the canvas element lacked current and
future support by Internet Explorer. However, it was included in the latest version of Firefox, Safari, and Opera at the time. A decision was made to build a simple conceptional tech prototype as a learning experience through a project lifecycle.
Athestics is based on the simplicity of a blank canvas. The low key design encourages quick freeform sketches regardless of artistic ability. With its monochrome nature, the site design should fall back into the background and stand in contrast to the color possibilities of the user generated content.
End Results
Some testing was conducted near the end of this experiment. Revisory was utilized in highlighting the various design considerations given to a dynamic PDF document for review by a client. We found that keeping images updated and in context as per discussion point through appropriate zooming, panning, and highlighting held great value. The web app was relevant when visual communication was desired.
One area needing of improvement is in the generalized drawing tools. Most marks were kept simple to merely augment the existing image. Also, tools do not suggest efficient uses. Instead, future iterations should involve testing for more common behaviors to automate before any additional development starts.
Image used in demo is
“More Fun Than Tekken” by Sevenflow and Kultdesign.
Posted in Ruby on Rails, Design, Portfolio | Tags canvas, concepts, draw | no comments | no trackbacks
Posted by Vincent Woo
Sun, 15 Apr 2007 07:25:00 GMT
I was just talking with a friend about how teaching design is hard since it is so subjective. I’ve had design professors/lecturers who wouldn’t even attempt to articulate why they hate or love a student’s work. Others would give a thumbs up for near finished work and then trash it during the final evaluation for insane reasons. However, it was worth putting up with them to attend classes taught by professors who could communicate design as a objective discipline. So it was to my delight to listen to this presentation by Lou Carbone that conveys experience design insight that actually makes sense. Seriously, even if you don’t give a damn about the design discipline, listen to this podcast. Some excerpts:
“He came up and he shook his finger in my face and he said, “There’s no way you’re going to get that bag on that plane without paying a hundred dollars.”
I looked at him and I lost it. I absolutely lost it. I wave my finger back at him and I said, “You! You’re the reason NorthWest is bankrupt and I hope you’re the first person to lose your job!”
Four people in line clapped.”
”...and said the largest – the opportunity – for people in the design community, to think of their role as designing experiences – designing business experiences, this is the creative firepower of the world that has the only design skills to create an effect that is not rooted in the industrial age. That understands that creative thought is more dynamic than a process. So where we are is a very interesting place. Because what awoke the world to experience years ago, and as we look at technology and the expansion of that into ipod, thinking of it as a system, all experiences are a system. Its all these components coming together to create a feeling…knowing what the feeling is that you want to create and how to create it. So as we move from this industrial age, the world of make and sell, product, product, design product, make product. We refer to – you know the worst thing that happened to the banking industry was discovering product. They were in the relationship business years ago. Suddenly, marketing touches them and we’re into “We’ve got products” and they began to loose sight of the relationships. So this idea of make and sell product is what we rooted our businesses into. Its the silos that we created. We think of experiences as being on an assembly line. A process map. Thinking of it as being linear. Its a very very different world because we now live in a world of sensing and responding….we lived in a world of efficiency at the cost of effectiveness.”
Posted in Design | Tags design, experience, podcast | no comments | no trackbacks
