111. Utopia
Posted in Podcast on: Thursday, February 14, 2008 by Paul Boag
On show 111: Designer and developer work together in utopian harmony. Two great listener reviews and Aral Balkan announces the biggest online web design conference ever.
Podcast: Play in new window | Download (31.2MB)
News and events | Designers and developers in perfect harmony | Aral on Singularity | Listener emails
News and events
Fixing your product pages
I want to kick off this week’s news with an article on Think Vitamin which I missed when it originally come out back in November. It is a post by Amy Hoy providing some basic advice on user experience design, focusing in particular on product pages.
Amy starts by giving some basic tips. These include…
- Be nice to your users and customers (and potential customers).
- Design as if your main goal is to inform and educate.
- Be honest and forthcoming.
- Help your users and customers to do what they want, not what you want them to do.
- Be consistent with your message and quality of service (and I&#’;m including software design here, folks).
- Scientific, measurable &#”;usability&#”; doesn&#’;t necessarily make for a good experience.
- Good design makes people feel good.
She then moves on to look at specific examples. She compares the product download pages of Opera and Firefox. This is a fascinating insight into what can go wrong with user experience design.
What I particularly like about this article is Amy’s engaging writing style. She is incredibly personable and her writing really drew me in. It is a long time since I have read a post word for word.
Being inspired by newspaper design
I often talk on boagworld about looking beyond the web for inspiration. Too often as designers we look at other websites, when we should be looking to art, architecture and the world around us for inspiration.
Admittedly this can be somewhat of a stretch at times. It’s not always easy to see how a piece of art or kids toy can inspire a website. Many of us don’t even try as a result.
How about starting with an easier comparison? This week I came across a superb post that looks at award winning newspaper design and it really excited me about the possibilities when I finally get around to redesigning boagworld.
I think we have a lot of learn from newspaper designers and in many ways there are a lot of similarities. Both web design and newspaper design rely heavily on white space and grid layout. Both have to deal with large amounts of written content. Both have to copy with constantly changing content. The list goes on.
Take a few moments to read this post, even if you just look at the designs. It will definitely inspire you.
Using browser history to improve the user experience
My final news story of the day is an interesting idea centred around a users browser history. Niall Kennedy has proposed a technique where you could use CSS and Javascript to display content based on what sites a person has previously visited.
Although I am not sure I like the idea of websites snooping through my browser history, it does provide some ways of improving the user experience. If nothing else it can remove some of the clutter from our websites.
Let me give you an example of how it could be used. A website could check your browser history to see if you regularly used digg.com. If you did then it could post a “digg it” button. If not it could be hidden away. The same principle could be used to show only a RSS subscribe button for the specific news reader you use, rather than showing them all. The possibilities are endless.
Whether you can see an application for this or not, it is still a very impressive and clever idea. Definitely worth investigating further.
Feature: Designer and developer in perfect harmony
In this week’s feature Marcus is looking at the working relationships between web design teams. He brings together a few Headscape employees to discuss how to ensure a good working relationship between all parties.
These are the roles that we look at and who represents them in Headscape:
- Requirements analysis, information architecture development (consultancy) &#-; Marcus
- Design, templates &#-; Leigh Howells and Paul
- Technical development &#-; Rob Borley
- Project management &#-; Charlie Allen
These are the issues we covered…
- What are the things that really make a project work well for you?
- From the other perspective, what are your pet hates?
- Designer and developers &#-; should clients be able to talk to you directly?
- Most projects have a habit of their scope creeping. How can that best be avoided?
- At Headscape we use a number of different tools to manage projects. How do these tools work?
- Particularly with designers and developers, we have set up &#’;buddy&#’; systems. How does this work? Is it effective?
- Some projects stall or go on hold for a while. Are you able to just pick up where you left off?
Expert interview: Aral Balkan on Singularity
Paul: So, joining me today is Aral Balkan. Hello Aral.
Aral: Hi, Paul. How are you?
Paul: Not too bad. It’s been a while since we’ve had you on the show.
Aral: It has been a while. I’ve missed it.
Paul: Uhm, so yeah, basically, I’ve been keeping a secret from Marcus. Which is I stoically refused to tell him what Singularity is all about.
Aral (laughing): Was he curious?
Paul: He was.
Marcus: It’s something to do with Star Trek, isn’t it?
Aral: Well I am a big fan, but no.
Paul: So why don’t you tell him what Singularity is all about.
Aral: Well, Singularity is going to be the world’s first large scale online web converence.
Marcus: Okay.
Aral: In a nutshell, that’s what it is.
Paul: So, I mean how does this work from a technology point of view, from an organizational point of view. Tell us a little bit about how it’s going to be organized.
Aral: Uh, sure! Well, basically it’s a web conference, so in terms of topics, it’s very eclectic. We’ve got a really cool group of speakers who have confirmed already, about 24 of them, from all parts of the web really. We have web standards people. We have JavaScript developers. We have artists who work on the web and they’re going to be presenting their sessions online. It’s going to be streamed through a custom interface built in Flash, based on the Flash platform, using technologies like Adobe Connect which used to be called &#”;Breeze&#”;. It allows the real time streaming of audio, video, and also sharing of interactions or objects through the web. Beyond that, we’re also going to have a very local character to it with local hubs where people will be able to gather and watch the audience and interact.
Paul: Oh, ok, so it…
Aral: I mean, watch the conference and interact.
Paul: Right, so people will actually get together as well, because that was one of my questions. One of the best thing about conferences is meeting up with people.
Aral: Definitely! The bit that I don’t like is the travelling. It’s being stuck in coach next to someone who’s, you know, not feeling too well or is kind slumping onto your seat or having the hotel from Hell experience that I’m currently having over here. (Paul laughs)
Aral: Don’t even get me started on that. There was techno music until 2 AM from the bar downstairs.
Paul: Nice!
Aral: Well, it was refreshing in the morning, though, because the shower went from boiling from freezing back to boiling and kept doing that. So, yeah, I think this is going to hopefully take the best parts of what attending a conference means, and maybe leave some of the bits that aren’t as great.
Paul: Are you going to leave it for local groups to set up local meetings or is that something that you can organize centrally?
Aral: I want to see it as decentralized as possible. I am talking to a few venue sponsors, potential venue sponsors. We’re talking with Yahoo at the moment. The BBC, I’m talking with Ian there. There are very interested and very excited about it. But, beyond that, I want it to have a grass-roots character. So, we’re already getting people volunteering for regional areas. I’ve called them Ambassadors. We have an ambassador from Bristol and there are people from Singapore, Mexico, all over, that are very interested in volunteering. So, we’re probably going to have regional volunteers and ambassadors who organize local groups, user groups, to have meetings around Singularity, where attendees can go and join and hopefully take it further, you know, add a local character to it.
Paul: OK, let’s cover some of the basics. How many speakers are you looking at, first of all. Let’s start with that.
Aral: Okay. We’re going to have a little over 100 hundred speakers.
Paul: Wow!
Aral: So, yeah, it is actually a large web conference.
Paul: Yeah.
Aral: And the that its online.
Paul: So when… how long is this going to be over? You know, if you’re going to have 100 speakers…
Aral: It’s three days.
Paul: It’s going to be over three days…
Aral: And it’s multiple track.
Paul: Multiple track, okay. That’s what I was going to ask.
Aral: And I think one of the things, just cut you off there, with uh… it is multiple track, but everything is recorded.
Paul: Oh, Okay.
Aral: So, its presented live and we’ve got some really great ideas for making those presentations a little bit more interactive than you can get in the real world. But, it will also be recorded. So, if you do miss something on the day, you’ll be able to watch it later.
Paul: Cool! How are you going to deal with things like time differences? Are you going to have it going 24 hours? Or, how are you dealing with that?
Aral: Well, initially, I was thinking about having it 24 hours. Just because it sounded really cool.
(All Laugh)
Aral: You know? &#”;Three days! Twenty four hours!! One hundred plus speakers!!!&#”; But then I thought about it. Especially the local meet ups. I want those meet ups to have a BarCamp-like character to them, you know? Where people can stay over. And I didn’t want the conference, the somewhat one-way part of it taking up part of the day.
Paul: Right…
Aral: So, I think it would be nice to have the presentations during the day and then after that, leave time for people at local gatherings to create their own sessions to talk about what they’ve been listening to, to add to it, to localize it for themselves in a matter of speaking.
Paul: Sure.
Aral: You know, to have, to do things to tell you the truth, I have no idea what they’ll come up with, which is great.
Paul: So, when is this scheduled for? What are the dates that people should book for it?
Aral: Well, we finally have dates. We’ve been going back and forth internally before we announced, but it’s the end of October. October 24th through the 26th.
Paul: Okay, that sounds good. And do you know a price yet, or are you still working on that?
Aral: Well, the pricing we’re still working on, but I think we’re going to be very positively surprised by the pricing. We’re actually working to get it even lower than we initially thought we wanted it. And we’re working closely with certain sponsors and we’ll definitely be announcing more about the sponsorship that we have as they become official, but some of our sponsors are interested in keeping the ticket price low as well and supporting us.
Paul: So, how many people are you expecting to attend this conference? Have you got any idea of what you’re aiming for?
Aral: Well, my conservative estimate right now is 10,000.
Paul: WOW!
Aral: And that’s based partly on past experience. We did 2 one-day open source flash conferences using similar technologies, for which we got about a thousand attendees at each one. Those were much smaller. One day, three or four speakers. My conservative estimate is that this will be about ten times the size of that.
Paul: That’s amazing. I mean that will be really cool to, you know, if that comes off. Are you trying to get a range of different speakers? Are you covering any particular areas of web design or are you going as eclectic as you can?
Aral: Well, the tagline that I was going with initially was that Singularity would define web 08. And I’m kind of trying to get people away from using version numbers when talking about the web. We’re getting away from using version numbers when talking about software because you know the moment you slap one on its outdated. So, I think maybe using the year would be easier because you’d at least know that you’re talking about a definite stat of time. So, my initial idea is that it would define Web ‘08, and as such, I’m trying to get as eclectic a mix of speakers as possible. And also, I see that there is a lot of overlap with which to send applications for example. There’s a lot of overlap over what people using AJAX are doing and then traditionally web standards people are getting interested in applications as well. So, I want to have a real mix. I also don’t want people on the Flash platform to be excluded, as they sometimes are. But, this is definitely not… that’s not the focus of the conference.
Paul: So, where can people find out more about this? I mean obviously, some people are going to want to be signing up. Obviously, you can’t do that yet, until the price has been set. So, is there any kind of way (
Aral: Of course.) they can express their interested or find out more information or whatever?
Aral: They definitely can. The site is &#”;singlularity08.com&#”;. You can also get to it from &#”;singularityconference.com&#”;. And, basically, we have a blog there and you can express your interest. You can email me directly as well. My email address is &#”;aral@singlularity08.com&#”;. Or just email my private address at &#”;aral@aralbalkan.com&#”;. Yes, so definitely, if you want to be kept in touch when we do release information, but there is also an RSS feed that you can subscribe to on the site.
Paul: Cool! Well thank you very much for coming on the show.
Aral: Thank you for having me, Paul. And of course you’re speaking.
Paul: Well, yes, of course. That goes without saying (Paul laughs).
Aral: Are you excited? Have you decided what you are speaking about?
Paul: I have not a clue yet, no. (Aral laughs)
Aral: Have I just put you on the spot?
Paul: Yes, totally. Thank you very much. (Aral laughs) And its going to be a weird one. It’s going to be a different way of speaking and so you kind of need to tailor what you’re doing to approach. It will be interesting.
Aral: Exactly. And we’re going have dry runs and we’re going to try out the interface as well.
Paul: Cool.
Aral: And maybe tweak it for different types of presentations. We just have so much potential with what we can do.
Paul: Mmmm. Yeah.
Aral: Because, we can actually control the medium. So, it’s really exciting.
Paul: Excellent! Excellent stuff! Really looking forward to it and we’ll get you back on the show closer to the time to see if we can drum up a bit more support for it. Excellent stuff. Thank you for your time.
Aral: Sounds great, Paul. Thank you so much.
Paul: Alright then.
Listeners email:
An alternative wireframing tool
A few weeks back I talked on the show about wireframing tools. Not long afterwards I received an enthusiastic email from Wen talking about a product called OverSite. He was so passionate about the product that I thought we should get him on the show to talk about it. This is what he had to say…
I’ve been catching up on my episodes of BoagWorld, and I just recently listened to your discussion about wireframing. As a UI designer, I completely understand the importance of mocking up a UI, and testing the mockup, before ever launching Photoshop.or Dreamweaver. So I thought I’d provide a review of a wireframing tool that I use, called OverSite. I haven’t seen many other tools out there like it, so I figured you and your listeners might find it useful.
OverSite is a shareware application that runs on Windows as well as Mac OS X; I use the Mac version myself, but am able to exchange OverSite files back and forth with my PC-using colleagues. OverSite lets you create a full or partial representation of your site structure: all of the sections and pages that make up your site. You can do this in one of two ways. The first way is fairly predictable; you add one section or page at a time by clicking a button, entering a name in a popup dialog, and clicking OK. The second way is fairly clever. You open a window that OverSite calls the Rapid Structure Creator. There, you type out your entire site structure in one text area, putting line breaks between sections and pages, and using indentation to indicate nested levels. Then you just click OK and viola! OverSite generates a tree depicting your entire site structure.
At this point, you can dive into your wireframing. Each page contains its own wireframe canvas. You can place the usual widgets on the canvas: buttons, textfields, checkboxes, images, etc. You can also place basic geometric shapes like circles, rectangles, lines and stars on the canvas. Each component can be individually styled; you can also create global styles that apply to all components, or to components of a specific type. OverSite also lets you create what it calls composites, which are complex elements that are made up of individual widgets.
Let’s say that you have a search form that will appear on a few different pages. You can create a composite representing this form. The composite might contain a few labels and text fields, maybe a checkbox or two, and a couple of buttons. If you want, you can tell OverSite to automatically draw a border around the form elements. Once you’ve created that form composite, you can drop it into your wireframes where ever you want it.
OverSite does lack built-in, complex widget types, such as tables. You can create them out of the widgets that OverSite does provide, but it would be nice for OverSite to create them for you.
While each page has its own wireframe canvas, so does each section. The purpose of a section’s wireframe is to create elements that will appear on all of the pages within that section. For those who have used server-side-includes, it’s kind of like that. As an example, say you had a navigation bar that should go on the top of every page in your Products And Services section. You would create that navigation bar once, in the Products And Services wireframe canvas. Then the nav bar will appear in every page within that section. In addition, OverSite provides tools to modify that nav bar in specific pages, for example, to change the color of a specific link in the nav bar when you’re actually on the page that that link refers to.
Static wireframes are fine, but I prefer being able to test the interaction between screens before I actually build the site out. OverSite lets you link any widget or composite to another page. If you don’t want to do the work yourself, you can also tell OverSite to auto-generate a simple navigation bar. Then, you can use OverSite’s built-in web browser to test out your site’s navigation.
Another useful thing I’ve found is OverSite’s notes. The notes functionality lets you provide details about specific widgets. That way, when you print or export your wireframes, you can include more information to whomever you’re handing them off to.
As an added bonus, OverSite will also create a graphical sitemap based on your website structure. You can tweak the appearance of the sitemap… the operative word being “tweak”. Fonts, colors, spacing, and icon sizes are under your control, but not much more. Here’s where I think the application could do better to allow you to fully customize the sitemap. Still, it’s created automatically for you without your having to lift a finger, so that’s something. Plus, the sitemap can be exported into a number of formats: GIF, JPEG, PNG, PDF, Scalable Vector Graphics, and others.
Once you’ve finished your wireframes and want someone else to be able to play around with them, you can export them as web pages for non-OverSite-using people to click-through. You have two options here: export your stuff as pure HTML, or export them as imagemaps. The trade-off between the two is fairly obvious: pure HTML will provide you web pages that looks more “real world”, but won’t look exactly like your wireframes do, and they’ll look different in different browsers. Imagemaps ensure that you know exactly what your pages will look like, but it’s typically not going to look like a real web site.
As a UI designer, OverSite’s become a pretty indispensable tool in my software arsenol. You can get it at the developer’s website.
A vertical rhythm calculator
In the same show we also had Jason Beaird talking about vertical rhythm (among other things) and this promoted an email from James. He wrote…
Hi I’ve been listening to your podcast for about six months now and really enjoy the mixed style of content and witty banter.
With all the talk of CSS vertical rhythm and em based layouts I thought I would point you in the direction of a vertical rhythm calculator that I built in Flex to help people work out all of those nice em values. My own site has been developed using the same principles with all typography and measurements set in em’s for an elastic layout. I am developing an AIR version that has an integrated browser so that you get visual feedback of your calculations, I remember one of the John’s comment on how useful such a tool would be on the fabulous Rissington podcast.
I have checked it out myself and have to say it is very impressive. What is more he has now created that desktop version. Check it out.
8 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Great information on this post. The particular feature “Designer and developer in perfect harmony” remindes me of the Stevie Wonder – Paul McCartney song “Ebony and ivory live together in perfect harmony”. Nice post, nice song.
Hello Paul,
Great podcast, I’ve been listening for quite a while. In regards to show 111:Utopia (minute 41:00), while doing the round-table with your coworkers, the subject of separation of tasks between designers and developers was touched upon. There was consensus that this separation is a good practice, but when the subject of interaction, ajax, and javascript came up, there seemed to be confusion about where the responsibility lies, desinger or developer.
I work for a company that produces computer based training courseware mainly developed in Flash. It has become a definite pet peeve of mine that the designers I work with repeatedly overlook interactions, transitions, and functionality (anything that changes states) during their design process. It seems to me that these items absolutely need to be addressed during the design process as they have just as much influence on the user experience as does the static visual layout of a page. Making it work properly is the responsibility of the coder. This is where communication between the two is crucial and obviously the more each understands the abilities of the other, the better communication will be.
I would also say that the writing of the css, xhtml, and javascript, in my opinion, fall more into the domain of the coder than the designer. A design for a website can be achieved without even using these technologies. I believe that your concern over web standards has taken you further into the realm of the underlying code than most designers in the broad sense usually tread (which is a good thing). It must be remembered that coders are also designers, architects of solid code. The term ’software engineer’ springs to mind. Even simple css involves syntax, structure, and other elements common to programming languages, leading me to believe that coders should be the experts and final word there (not to say that designers shouldn’t be familiar with this stuff, bravo to you).
Anyway, thanks again.
Cheers,
Jared in San Diego
So….
…when can we view footage from the video recording that was made when you were making the podcast????
It will come Graham but is going to take some time to put together.
I laughed out loud at Leigh’s utopian ideal of blind, stupid clients, yet it’s sometimes tempting to question whether some clients fit into this category…
Looking forward to watching the video :)
I’ve recently found this podcast (I have to say that through the Rissington’s :) ) and I like it a lot. It is very very informational and well produced.
I’ve only one suggention about the audio:
Could you record it with a higher volume? Barcelona is a loudly city and most of the time is impossible to me to listen to the podcast while on a train or bus.
Cheers,
Paco
Hi Paul,
There’s a typo in Aral’s email address (or was that deliberate to foil spammers?).
Back on-topic: your discussion with the designers, developers and project managers seemed to suggest that more Big Design Up Front would be a panacea for project failure.
However, it’s argued by proponents of Agile that change is inevitable so you should just embrace it anyway and avoid too much up front specification; rather build stuff in quick iterations and show clients progress as you go. Then you’ll get your feedback about what they do and don’t like, as they can see real stuff sooner.
Cheers,
Tim
The online conference has been around for a while in education and the one’s I’ve attended have always been good. One run around the themes of web design and development must have even more potential for impressive gadgetry and posh collaboration so I’m definately looking forward to that!
Colin