SitePoint Podcast #21: Interview with Jon Hicks

Episode 21 of The SitePoint Podcast is now available! This week, Kevin Yank (@sentience) has a one-on-one chat with Jon Hicks (@hicksdesign), the designer of the Opera 10 browser, the Firefox logo, and many other high-profile design projects.

Listen in your Browser

Play this episode directly in your browser! Just click the orange “play” button below:

A complete transcript of the interview is provided below.

Download this Episode

You can also download this episode as a standalone MP3 file. Here’s the link:

Subscribe to the Podcast

The SitePoint Podcast is on iTunes! Add the SitePoint Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.

Interview Transcript

Kevin: The SitePoint Podcast episode 21, for Friday, July 31st, 2009: “Interview with Jon Hicks”.

Kevin: Hi, there and welcome back to the SitePoint Podcast – news, opinion, and fresh thinking for web developers and designers. I’m your host, Kevin Yank coming to you from SitePoint headquarters in Melbourne, Australia and I’m joined by my panel of co-hosts.

Brad: Brad Williams from WebDevStudios.

Patrick: Patrick O’Keefe from the iFroggy Network.

Stephan: And Stephan Segraves from Houston, Texas.

Kevin: Hello, and welcome to the show. I’m hosting it all by myself today because this is the first of a series of special interview shows. In response to some listeners who asked us to make this a weekly podcast, we’re trying out this new format. We’ll continue to do the usual news focus shows every second week but between those, you’ll also get a one-on-one interview with some of the big names of web design and development.

Please do let us know if you enjoy this new interview format and if you have any specific people in mind that you’d like to hear from. Drop us a line at podcast@sitepoint.com or visit sitepoint.com/podcast to leave a comment on this episode. And so without further ado, welcome Jon Hicks to the SitePoint podcast.

Jon: Hi Kevin!

Kevin: Hi there! Why don’t you introduce yourself.

Jon: My name is Jon Hicks as you say. People might know me as being one half of hicksdesign but these days – for the last few months at least – I’ve been working as a lead designer with Opera software in Norway, working on the Opera Desktop and the new version of Opera Mini which isn’t out yet or beta’d yet and also a little bit of work that I can’t yet talk about. You probably know me as being the logo designer of Firefox and Thunderbird and few other projects, like maybe Silverback and Mailchimp but generally, I’m an all around designer but these days I focus a lot on icons and logos.

Kevin: Is it fair to say you started out in print design and moved in to web and general digital design later?

Jon: Kind of. I actually started out as an illustrator – that’s what I trained to do. I did then what was called scientific illustration which was basically natural history and apart from those that did the medical illustration which was a little bit too gory.

Kevin: I can’t remember who but somewhere along the line, one of my uncles gave me the advice “you know, if you want a make a good living for yourself, get in to medical illustration. Those guys make a ton.”

Jon: Well, I think it is. I think it’s one of those jobs that very little people want to do. So if you are good at it and you’re prepared to do that, then it’s quite an interesting career.

Kevin: Another eyeball. Great!

Jon: You do have to be sort of a certain mentality.

Kevin: I don’t know – maybe because I’ve always kind of been in the web – I like to tell myself that the web is kind of a unique medium to work in as a designer but maybe every medium has its own unique constraints but I find that the Web, as a designer coming into the Web, there are certain constraints that are really not obvious.

At first glance, the blank browser window looks a lot like a blank piece of paper but there are things that you can do it that you can’t do on a paper, there are things that you can do on paper that you can’t do on the web.

Jon: Yeah, exactly.

Kevin: I’ve worked with designers who have come from print before and they’ll give me a beautifully rendered web design but I know that as soon as the content gets a little longer, those images you’ve got in the sidebars aren’t going to fill the sidebars anymore. So how was that for you?

Jon: There is a period where you have to get over yourself and realize that there are things you can’t do. The whole thing about print is not only that you’re sort of setting in stone everything is there; it’s the fact that you can chose paper and there’s much more of an emotional feel about it. You’ve got the smell of the ink and the paper. You’ve got to feel and touch of the paper. You’ve got things like embossing effects. There are a lot of things that you can do with a print design to create extra kind of emotional attachment, extra engagement that’s quite hard on the web, because the web essentially is quite cold. It’s very flat.

Kevin: It’s either matte or gloss.

Jon: Exactly! These days, mostly gloss. But you have to work harder to create that kind of attachment to things. But as you say, there are so many advantages, once you realize the advantages of what the web is, and the fact that your content can be altered in so many different ways to suit so many different types of viewing devices or people.

I remember we worked at a publishers and we did get a request for a large print edition of a particular book but they only needed two copies. So the cost of printing this would obviously be astronomical – thousands and thousands. So we did just say, “Just go to a copy shop, get it enlarged onto A3 that’s going to be the cheapest route,” but with the Web you don’t have anything like that constraint and the content can be same but the presentation can be so different and if you need a large print edition, it’s just there. As long as you know what you are doing when you’re creating sites for the web. You’ve got such an advantage to suit so many different people.

Kevin: I see what you mean though; with a piece of paper where you control everything about the physical object you’re creating, you have a lot more control over the relationship that the viewer will have with what you’re creating. Whereas on the Web, it may be a laptop, sitting in a bright sunny location or it may be on a handheld where they’ll be stretching it with their fingers. You really have little control over the context that it will be viewed in.

Jon: You can’t even be sure that the colors are going to be the same. That’s a big one to get over when you’re a print designer and you spend a lot of your life specifying Pantone colors and checking the first print that comes off the press; it’s a big thing to try and let go of. But as I say, eventually you get over yourself and you just realize the advantages.

Kevin: I’ve got a few questions from the SitePoint Forums community as well, and Musicbox asks which software you mostly use for designing logos and user interfaces? I saw your @media 2009 slides where you specifically mentioned that you prefer Fireworks for icon design. Is it just for icon design that you like that tool?

Jon: Yeah, basically because what you mentioned there is kind of like two different applications.

So if it is something that I know is going to be need to be used as a logo – Mailchimp, for example, that was created in Illustrator because other anything that’s going to be repurposed like that, you have to use Illustrator because then it can be sort of put on t-shirts without any sort of hassles or worries. But if it’s interfaces and icons, yeah, Fireworks is my preferred tool of choice. It’s not perfect by any means and I swear at it on a daily basis because it’s just – especially CS4 – so many weird little bugs and errors and things that…

Kevin: That’s true of almost anything in the CS4 suite.

Jon: Yeah, well goodness me. It’s appalling, isn’t it? So the thing that Fireworks is that you can work in vectors but you can also preview in pixels very easily. And obviously, Illustrator can do this but just generally, working for screen graphics, Fireworks just has the right feel, the right tools.

Kevin: There’s definitely a sense that if you’re working in Illustrator, pixels are second class citizens; like it’ll give you pixels if you really twist its arm but it’ll kind of go, “You want pixels? Phtewwiiee!” Whereas Fireworks deals in pixels.

Jon: It’s simple things like in Illustrator, you make everything pixels – you have a pixel grid, you have pixel preview on, and you ask it to do draw box with a one pixel border. When it does that, it gives you the one pixel but then it always gives you this subpixel and you have to do little hacks like making the stroke 0.8 pixels in order just to get a just a one pixel solid line.

Kevin: Alingned to the pixel grid exactly.

Jon: Yeah, yeah. Exactly. You check everything. You make sure the coordinates aren’t a point or something. It often puts this little subpixel line on the inside. You shouldn’t have to work around little glitches like that and little rendering problems, but yeah, it’s…

Kevin: I guess naïvely, I always assumed that these days, logos were designed as vector art with no real consideration given to pixel dimensions and you would design the vector as this pure object that you could blow up to a street sign or right down to a 16-pixel favicon. You then treated that vector in something like Photoshop to fine tune it for any given size.

So what exactly are the benefits of working in pixels in something like Fireworks as you render your first iteration of your logo?

Jon: This is it – let’s say for an actual logo, let’s say for example, take something like Mailchimp again, the big illustration of that is a big vector illustration in Illustrator. But if you’re wanting a favicon or a series of a smaller icons on that, you basically to get the best effect you have to redraw it, especially for the 16-pixel version. Rarely can you actually enlarge a large vector like that down to 16 pixels.

Kevin: So is your vector artwork sort of like the guide that uses as a tracing element that you then draw the size on top of?

Jon: Yeah, you might reuse the paths but the trouble is obviously, if you take – let’s say like an application icon for the Mac – the largest one is 512 pixels. So for that, that would be a large vector illustration.

Kevin: So far, I think they’re even going bigger in Snow Leopard. I’ve heard something about 1024 pixel icons.

Jon: Oh god! Just to make my work harder.

Kevin: Just in case they weren’t big enough.

Jon: My goodness! Why do they need that size? Just wait until they’re animated as well.

Yes, once you get down to these smaller sizes, in order to get a crisp icon, you have to redraw and often when it’s 16 pixels, you have to do it almost as pixel art – drawing a 16 x 16 grid and just coloring in the blocks. Otherwise, you’re not just going to get a crisp icon, you’re going to get something very fuzzy. So you always have to do a little bit mixture of both.

Usually what happens is you’re drawing in vectors but you’re drawing in vectors in a way that will fit a pixel grid properly and with crisp lines. It’s a lot of work but so far, there’s no kind of easy answer to it. If you want to cover all these different sizes, then you really have to do most of them individually.

Kevin: It sounds like there’s a space in the market for someone to come along and code a really specific tool for those kinds of things.

Jon: Oh yeah! A Fireworks competitor would be great because there are things in it that Photoshop can’t do and Illustrator can’t do. But the thing is at the moment, everyone wants to do Twitter clients; that’s the popular thing. No one wants to take on Adobe particularly.

I would love that. I would love someone to come up with some alternative. I keep trying different things and there is still nothing out there that’s quite as good.

Kevin: Speaking of icon design, as you mentioned, you designed the now familiar icons for Firefox and Thunderbird as well, but with the release of Firefox 3.5, that icon got a little bit of tweaking. I understand you had some input into those changes?

Jon: The input was that last year – actually about a year and a half ago, Mozilla asked me to work specifically on a Vista icon. The problem being that 128 pixels was the largest size Firefox icon we’d got and since that came out, we’ve now had 256 and 512 as possible and icon sizes on OSX and Vista. It was particularly for Vista that they wanted a larger, detailed icon. So we started to work on that and trying different things.

There’s a few I didn’t like about the original like the pointed fire on the tail, it didn’t look very fire-like. So I started doing sort of more of a curvy one with this. It got to this point where it was sort of waiting for a final approval; didn’t hear a thing for about a year. The next thing I know is that that’s then been called a “concept and rendering” and they’re using someone from the Iconfactory instead to do the final icon.

Kevin: Do you know the folks at the Iconfactory?

Jon: Yeah, exactly. It’s one of these things that if someone else has to do the Firefox logo, then it had better be the Iconfactory because they are the best. So if I have to give up the control of that, then it’s got to be a good one.

Kevin: Most people these days I guess would know the Iconfactory because they made Twitterific, the popular Twitter client for the Mac and the iPhone, but icons are their day-to-day business.

Jon: Yeah, they’ve worked on things like they’ve worked on the icons for Ubuntu. They’ve worked on the XP and Vista icons before Microsoft, as well as all the lots of official Mac icons. They do a lot of stuff that you might not be aware of that it actually belongs to them, so yeah, it’s great work.

Kevin: So the finished icon, it has a fluffier tail, definitely. Are there any little touches about it that you like or that you were surprised to see in that finished product?

Jon: Yeah, there are a couple of things that I was surprised to see such as the globe at the top’s got very reflective. The top is quite bright and white, and I find it quite distracting. This is some feedback I gave sort of during the process that I felt this was too bright and it was taking away from the Firefox, the head itself. The eye gets drawn to it too much, but apart from that, I mean I think it’s a really nice detailed icon.

Kevin: I’m just bringing it up from my screen here and it is, yeah, just the sun is beating down on it.

Jon: Either that or it’s a big ice age so if you’re coming in the top there. That was basically my only sort of criticism. But I think they did a great job.

Kevin: Let’s talk about the work you’re doing these days, which is among other things, redesigning the Opera desktop browser. So it seems to me for someone who’s been working a long time as a web designer, being asked to design the browser is like asking a portrait artist to redesign the National Portrait Gallery, which I suppose is a huge honor and a really exciting thing to take on but also it must be kind of daunting.

Jon: This is the story. Basically, I get kind of known as a web designer because I have done websites and I still do. But ever since around the time of getting a bit of profile from the Firefox logo, I have been doing a lot of interface work and sometimes just icons, for example, the Linotype Font Explorer, just the icon work. But then in some cases, I do actually do interface work too. I’ve actually worked on things like the early versions of Flock back when it was called Round 2. I don’t know if that’s a public name or not, but they did some interface concepts for that. I’ve done a little bit of work for Camino, and I’ve also sort of worked on the visual identity team that worked on Firefox 2 redesign. So while I’m not exactly doing all the work myself, I was part of the team that drove it. In some ways, I’ve actually worked on quite a few of the browsers before this.

Kevin: Okay. So coming into Opera, what was the scope of the work that you had? I mean, obviously you did a lot of visual design work and continue to be doing that. Were you designing the UI features at all, or were you focused on making some of the ideas they had come to life?

Jon: Basically, what we’re kind of planning is the next version. So in terms of designing features and how they’re implemented, that’s more for the next version.

What we’re doing for this one is really just a sort of a skin refresh, so the features are already there, so by the time I started last November the main features which were things like Unite and the tab thumbnails, they had already been created.

So my job was actually to integrate these into the skin and sort of felt actually as I was designing this that what we needed was rather than just designing these new elements, to actually redesign the whole and go for it but actually that process didn’t start until about April time this year. So it’s quite late on but it felt … I mean it was quite late in the process but it felt like the right time … it still felt like the right time to do this and I’m glad we did. It has taken a lot of work.

Essentially what this is – Opera 10 – it’s a new version of Opera but it’s a similar sort of system – the skin system just with new features; whereas the next version will be a lot more of a rewrite of such. So that’s where we’re sort of rethinking a lot of things and dialogs and how things are accessed. While this is a nice sort of skin refresh, a nice redesign; Opera 11 or whatever it’s called – I don’t know if they’ll call it 11 – but that will be the one that’s more kind of, in a sense, more redesigned.

Kevin: I don’t know how much you can say but was it a case of you have a very clear picture of what Opera “next” is going to look like and then you back-ported that look onto the current UI features, or was it a very separate design process?

Jon: Actually, you’re right. You’re sort of spot on with the first one really, in that a lot of what you see now in Opera 10 was actually what I was planning for Opera 11, but the way that it worked is that some of the changes we were going to make in Opera 11, meaning that the skin isn’t going to look quite like that – actually what we’ve got now is what was being planned originally for the later version. So it kind of back-ported, I guess.

Kevin: This is another question from the SitePoint forums, Alex Dawson wants to know – if this redesign and specifically, you being brought on the team is “part of a new strategy for Opera to capture greater market share in the desktop browser space”? I do actually paraphrase a little there. Was there sense that Opera’s UI design was holding it back and that this is an attempt to address that?

Jon: Yeah.

It’s funny, because I get the impression that some people think I was headhunted so that Opera said last year oh we need a UI designer, we’ll get Jon Hicks… which isn’t the case. I’d like it to be that case, my ego would like it that to be the case.

What happened was that they felt that they needed a good designer, particularly for Desktop and they advertised – I saw the job advert and thought well I’m not really looking for a full time job, but I really like the sound of this job description. It’s exactly what I want to do. So I went over to see them last year and yeah, I think it was a good fit. I really like what they were doing and what they wanted to change. I think they’re sort of – how can I put this diplomatically – I think they kind of felt they wanted to move the design on. Whether that’s a deliberate thing to get more market share, I’m not sure. But it’s always … you always want more people to use your browser; that’s the thing.

If you put a lot of hard work into something, you want as many people to use it as you can really.

Kevin: Coming back to – we were talking about constraints of different media a little bit before. Matt Magain, who is our online editor at SitePoint asked me if I would ask you about your thoughts on the differences between things like graphic design, icon design and interface design. Are there – just as there are on the web – constraints that you very quickly run into when you come at designing a UI naïvely, or was it you could do whatever you wanted and Photoshop and the Opera programmers were going to make it happen in code?

Jon: Yeah, there are a lot of constraints, especially in the betas now, there are things that I would really like to have had changed but they require a lot more kind of development side to make them work. So there are little things that look a little bit odd like if you have the panels on the left, they don’t quite meet the top because of this area called the drag bar; this is where you pull the tabs up and down to reveal the tab thumbnails. It’s not an easy one to fix.

Also, there is quite a few sort of precedents set, such as Opera tabs have this thing called an attention state. So if your tab has finished loading or if it’s got say a login box or an error warning or something that needs your attention, then it changes a particular text color.

It’s things like that that are quite difficult to change; you can’t just suddenly spring upon existing users “Well I’m going to make this color different now…” There is a certain amount— of you have to sort of take into consideration the previous users, as well as the new users.

Kevin: But it’s fair to say you have a lot more freedom to play with that sort of stuff in the Opera 11 or whatever it may be called.

Jon: Yes. I think there is probably a lot more possibilities in Opera 11. Having said that, I think I found a hell of a lot more freedom than I expected with Opera 10. It uses this skin system, which in some ways is a little bit like CSS, but isn’t. I wondered how that was going to go, but actually I have a lot of flexibility there. I think one good example is for the Mac native version, what it does first of all, it has this little switch that says “use native elements”. But if you do that – if you say to the Mac version just use native elements, what native elements the system provides actually looks really outdated, and you can do a better job of integrating with, say Leopard, by actually creating all these elements yourself …

Kevin: Because Apple has done that themselves in so much of their software now. Things like iTunes, for example, are virtually entirely custom controls at this point.

Jon: Yeah, exactly. If you just use native elements to draw it, it looks like a bad Java application. By using the skin system, actually I was surprised at how much better it was at, I guess, mimicking a lot of the native UI, but it makes such a big difference.

Kevin: So this “use native elements” switch, is this a user accessible option, or is this something in the skin system that you’re talking about?

Jon: Yeah, it’s something in the skin system and basically the skin file is just a text file with referencing images where necessary, and it’s just a switch, either “native = 1” or “native = 0”. So when people make their own skins, that’s something that they can play with. And again, that’s something that’s caused a little bit trouble on working on the Windows native skin, which is even harder because with Windows, there is so many different theme possibilities – the classic, the different color versions in XP, Aero, standard Vista Blue that you get in Windows 7 and Windows Vista – there is a lot of different native themes going on. Whereas with Mac, it’s kind of – if you design it to look like a Leopard application as much as possible, then you’re home and dry, really.

Kevin: Right. Apple has been known to change shades of gray between versions but for a particular OS on the Mac, it’s pretty fixed. Whereas Windows users can do a lot to mess with the system skin. You could find yourself with a bright red browser chrome if that’s really what the user wanted. Okay.

Jon: Exactly. Even the built in options, there is a lot of choice there. I’m coming to the point where I almost think we need to have a specific native theme for Windows 7, not necessarily for the older versions, but looking forward – I think Windows 7 is going to be quite popular compared to Vista. I’m thinking I might be pushing for something that fits the Aero and blue theme of Windows 7 particularly.

Kevin: Browsers like Google Chrome and, I guess Safari to some extent, seem to – the direction they’re taking with their design seems to be to de-emphasize the chrome as much as possible, and they could take less screen area and even – they seem to be going to the extent of even reducing the contrast in their controls to reduce the amount of attention they draw away from the page. I’d say that looking at the current Opera 10 beta, you seem to be embracing a lusher, more vibrant look to the controls; is that fair to say?

Jon: To an extent, yeah. I mean I think the big difference at the moment – because we’re all going on the same kind of lines except that Opera – there is an element where Opera needs to sort of stand on its own and not just look like any other browser.

Kevin: That dark tab bar is really striking now.

Jon: Yeah, that’s the one. And in some ways, it’s quite a controversial choice, but the reason that’s there is – there are several reasons – but the main thing is to provide contrast to the tabs. So if there is one area to lead the eye to, it’s the tabs and the fact that you’ve got all your different pages there and particularly for the tab thumbnails, it works well for that as a contrast.

In the same way, we’re doing the same thing – we’re trying to take out as many pixels as possible without feeling cramped and to give as much real estate as possible. In that sense, yes, we’re going the same route but at the same time, we don’t want Opera to look too bland. We’re going for things like these sort of very contrasting tabs as a way of differentiating ourselves from the crowd.

Kevin: Here is another question from our editor, Matt Magain – I suppose you must have gotten used to working as a contract designer and even working from home for a long time, but now you’ve joined Opera and although you are working remotely, you’re working as a full time salaried employee, I understand. How has that changed life for you, personally and professionally? What benefits has that brought you and what challenges has that thrown up for you?

Jon: It’s quite a vulgar thing to say, but there is a thing of taking a salary, you don’t earn as much as you can if you’re a contractor. With a contractor, you have that opportunity to earn a lot more. So in this sense, it wasn’t a decision that was money driven.

One of the big advantages actually is that rather than spending a lot of my time answering inquiries, writing proposals, and quotes and estimates, I’m actually getting time to do work and do the creative stuff. I know some people who think of moving from say freelance to say a full time job as being a bit of a sort of cramp on creativity but actually, I find it the opposite. Being freelance, there is so much admin and crap to deal with on a day to day basis that actually then is not an issue any more. That’s a big advantage.

Generally, it’s just nice to be part of a team because I always find this with projects that are sort of fairly long term is that you get very friendly with people and it’s great working together and solving stuff together and then suddenly, the project’s over and you don’t get to see those people anymore. I like that kind of more permanence of dealing with a team and working alongside people, even if I’m working remotely, which I am.

Kevin: In my other life as a manager at SitePoint, I interview a lot of developer candidates who are looking to join the team and often when we’re speaking to someone who has worked on their own at home, as a freelancer, what we find is they have had a lot more trouble justifying taking time off from billable hours to do something like explore what’s new in the next version of the browser that’s just been released.

You’re known as a cutting edge designer, so I assume that you’ve always made time for that kind of thing.

Jon: Oh you flatter me, sir!

Kevin: At the risk of flattering you – but do you find that that’s easier to make time for now? I don’t want to get you in trouble with the people at Opera who are paying your salary.

Jon: No. I mean this is … certainly I found this, particularly when starting at Opera, is that it’s very much encouraged – I mean you have to keep in touch with what’s going on. And that’s again, something I found difficult when I was freelancing because you have this sort of feel of well, I’m not being paid to do this bit and I know it’s going to benefit me, but the paid work is going to have to take priority and it gets sort of pushed further and further back. Whereas now, actually it’s almost like a sort of daily ritual to spend a little time just catching up on news and seeing what’s happening and what other people are doing, especially the browser manufacturers.

Yeah, I would say it’s almost sort of part of the job really, you’re expected to do.

Kevin: That’s always good. The last question I have from Matt, our editor, is that you’ve always been quite vocal in your browser agnosticism. Has your new job cured that propensity for experimenting with other browsers, or do you just sort of do it on the sly in your spare time?

Jon: No, it’s even more. Like you said, you’ve got to research. If someone brings out a new version, you’ve got to test it and you’ve got to study the UI and see what they’re doing and why. So no, if anything, I think it’s made it slightly worse in that I spend more time looking at browsers and other platforms.

Yeah, I do think it’s ever going to change. I just like using lots of different browsers, mainly because they each have little features that make them particularly useful for particular tasks.

Kevin: So you’ll switch browsers when you’re switching tasks, or do you just sort of mix it up every few days?

Jon: Exactly. In some ways, I don’t tend to use Opera at the weekends, simply because that’s work and if I start looking at Opera at the weekend, I start thinking about oh that’s not right, or I need to change that… and then I start opening Fireworks and start changing some of the tab images or something.

Kevin: How long would it really take to fix that pixel?

Jon: Exactly. Or I’ll just do that and then once you’ve done, then you’ve just seen something else and I’ll just do that. So I don’t tend to.

One of the things in particular that I use Opera for, which is a great feature – anything like image research, going through lots of Google Images pages and that kind of thing – because if you just keep pressing the space bar obviously, the page scrolls down, but at the very bottom of the page and you press space, it goes to the next page. So this makes it so much nicer to be able to just keyboard navigate lots of these things – basically anything on these pages that have an obvious next link, and if it’s marked up well, Opera will recognize it and you just keep pressing the space bar and keep scrolling through all these pages. That’s an amazing time saver.

But as I say, I would tend to avoid it of the weekends just simply because I get sucked into work again. I use Safari as well, and I keep up to date with Camino, as well and what they’re doing – not so much Firefox actually because my general experience of Firefox on the Mac is a bit slow and a bit cumbersome.

Kevin: Yeah, I have to admit, Firefox on the Mac has become my development browser; I use it when I need the dev tools that come with the addons. It’s not my walking around browser anymore.

Jon: Again, this is one of the things that I’m hoping to have some time to work with is that Opera have this great tool, Dragonfly, which is in some ways, a fiber competitor but there are a few things it can do that a fiber can’t. But it does need some UI love and that’s something I’m hoping to work on to help Opera become more of a development browser as well.

Kevin: Is Opera’s user base very different from the general audience of, say, Internet Explorer or even Firefox? Are there some assumptions you could make about the user base when you were going into your design work that you couldn’t make with another browser?

Jon: In some ways the difference is more geographic actually than the type of person. I mean I guess you could say that a lot of Opera users tend to be power users; that’s one of the reasons to use Opera is because there is a lot of features that people don’t know about – they can keep discovering new stuff. I only found out a few months ago that you could lock tabs in Opera, to stop them from being closed accidentally.

Kevin: Oh!

Jon: Yeah, exactly. That’s what I said.

I think, generally, they tend to be more sort of tech savvy power users but at the same time, you can’t necessarily design with that in mind; you’ve still got to design for someone like your grandparents, to see if it’s something that they could use too. That’s why part of the default install of Opera is actually very minimal and the mindset is that over time, you can reveal more features.

For example, things like there is no mention of Mail in any of the menus. But once you’ve added a mail account in your preferences, then the Mail menu appears and you have the Mail option. The idea is to sort of give you things to experiment and play with over time and discover more new features.

Kevin: I suppose similarly, the temptation might be there to have the panels sitting wide open the first time you launch the browser – tada! Here’s all the features!

Jon: Yeah, exactly. In some ways, you’d love to do that because there are a lot of features. Part of the UI design is disoverability and how do you make things discoverable. But yes, for a default, you do have to hide these things.

Kevin: So instead, you have a tantalizing little icon in the corner that hopefully, one day when they’re feeling a little ambitious, they might click it and see what it does.

Jon: Yeah. But I would say if there are differences, it would be geographic and it tends that the market where Opera is quite small, would be America, for example. A lot of browser market statistics might only say use America for those statistics, whereas actually globally and particularly in areas like Eastern Russia and Eastern Europe, Opera does very well. Not that that makes any difference necessarily for the way you design, although you do have to be very careful, especially things like internal pages – like the about pages or config – it’s that you make sure that you design it for things like different writing directions and that you specify fonts that have the right characters. It’s little things like that.

Kevin: Internationalization must be a bigger blip on your radar than it would be for, say – I was going to say an Internet Explorer developer but Microsoft probably have to consider that a lot too.

Jon: But again, I think they’ve the Internet Explorer user is a slightly different demographic. I would say the largest percentage would be people using Internet Explorer because that’s what their IT department have installed – they haven’t installed any other browsers, so that’s what you use and that’s what your internal intranets are developed to use.

Kevin: What are some of the little details that are visible in Opera 10 that maybe you’re really proud of but you recognize that probably no one’s going to notice, apart from yourself? Take us on a little tour, if you can.

Jon: {laughs} Let me think. One thing that’s quite interesting is that this dark tab bar is quite distracting for some people and it feels quite alien to them, particularly on a Windows machine. But what they’ve maybe not noticed is the fact that I’ve spent a lot of time mimicking little widgets, such as close buttons and the little triangles you get for toggling tree views. These little things like this, they’re all part of making it sort of be a good desktop citizen for things like Windows Vista and Windows 7. But it’s certainly something that no one has picked up on yet. No one has said “Oh great, I’ve got the proper little widgets for closing tabs.”

Kevin: So that’s like matching it to whatever platform. So on Windows, you’d expect a square with a + in it, whereas on the Mac, you’d expect a little triangle that turns, is that what you’re talking about?

Jon: Exactly. There are little subtle differences in the Mac skin and what’s called the standard skin. If people do notice them, I think it’s probably the kind of thing that you wouldn’t necessarily mention. {laughing} It just seems too insignificant.

Kevin: They are all the things that are only noticed when you get them wrong.

Jon: Well, I think so, yeah, exactly. It sort of stands out a mile if it looks odd. But if it doesn’t look odd, then it’s doing its job and it’s blending in.

That’s probably the only thing I can think of; everything else is sort of fairly obvious and has been picked up on. I was particularly happy with the design of the panels and the new visual tabs.

Kevin: I like them too. They’re a little different from everything else, but in kind of a good way. They feel tactile, they feel like bits of paper sticking out rather than, I suppose, plastic tabs that you normally see in the OS chrome.

Jon: That’s good. Yeah. Tactile.

Kevin: One last question from the SitePoint forums. armchaircritic wants to know if you’ve had a go at redesigning the Opera logo yet?

Jon: {laughing} I thought I wasn’t going to get away with that one.

Kevin: You did mention that in your blog post when you got the job.

Jon: Yeah, yeah, exactly. The answer is yes, I have. And if the next question was have those designs been accepted and are they going to be used, the answer is no. {laughing} I think in some ways, it’s a difficult one to talk about because I think the CEO mentioned on the Question & Answer session a couple of months back that it is something that they are looking at, then I think we can say that yes, we are working on it.

Kevin: The more they’re looking at it, the less you can talk about it, I would say.

Jon: Yeah, exactly.

Kevin: They are using… there is multiple versions of the Opera logo, like the one that’s on the application is kind of the shiny glossy one but on the web site, you see kind of a flat version, it’s a little more web 2.0, if I can use that term.

Jon: Yeah. This is the problem – people do recognize that the Opera logo is awful and needs to be changed. And this is why internally – like on certain things, like the websites and Opera mini and that kind of thing – where possible, people will try and create their own version just so they can get away from it. It’s a difficult one to change though because it’s been that way for a long time and it is – for good or for worse – it is recognized as Opera. So how far do you change it without making it not feel like Opera.

Kevin: Very tricky.

Jon: It’s a very fine line to do, but we’re hoping – hoping – hoping that by the time Opera 10 final comes out, we will have a new logo – a new icon, at least.

Kevin: Wow. And finally, one last question. Andrew Krespanis, a developer here at SitePoint, wants to know from you what cheese you find the most inspiring?

Jon: {laughing} I love the little inflection you put on the end there. {laughing} It’s almost like dream-like inspiring.

Kevin: You are a big fan of the cheeses.

Jon: {laughing} Oh goodness, yes. Let me think. This is a hard one to say, isn’t it – like saying to someone to pick your favorite artist.

Kevin: Of all the questions we’ve covered so far, this is the most serious to you.

Jon: I would go for cave-aged gruyere. This is a particular type of gruyere, and often when you go to the supermarket and get gruyere, it’s that slightly sort of plastic-y cheese, but if you’ve ever had the proper mature cave-aged stuff, it’s a little bit like Parmesan.

Kevin: I’ve only ever had gruyere in a hot dish. Do you eat it by itself?

Jon: I eat it either cold or hot. That’s the great thing about cheese – every cheese can be cooked and has a different flavor when cooked. But I think that is probably my favorite, especially in something like a tuna melt, gruyere is the best cheese to go with tuna. I’m pretty happy with that decision. I’ll go with gruyere.

Kevin: Good. Before I let you go, I have to ask for the fans in our audience, is the Rissington podcast coming back?

Jon: Yes, it is!

Kevin: A little while ago, SitePoint actually gave you guys some books to find a new name. Did you find something that you …

Jon: We did. A guy known as Phone Cow, and he’s quite local, came up with a name Webble Mill.

To explain that, we used to have this show at lunchtimes in the UK back in the sort of 70s and 80s called Pebble Mill, which is where the show was being recorded. So they’ve taken the fact that we’re working next to a watermill, combined it and made Webble Mill. It was just fantastic.

Kevin: Very nice.

Jon: Yes, it was very generous of you to give the books out for the competition, and we got some great entries. We’ve gone for Webble Mill. It’s going to be called “The Rissington podcast live from Webble Mill” – just a nice snappy title. There will be one.

We’re just having a bit of a problem getting John and I together in the same room, not because of any arguments, but just because of work. We’re definitely intending to record more. It’s just that work gets in the way.

Kevin: We all look forward to it. Thanks for the chat today.

Jon: No problem. It’s been great talking to you, Kevin.

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jorgemartins

    I enjoied the read so much,

    I was expecting the Opera logo/icon question and finally seems that we are getting a new one from The right designer. I’ve changed my icns because i was tired of the old one badlooking in my Dock.
    I loved to know everything, except the cheese :P that i dont like that much.

    Thanks for this interview Sitepoint

  • http://www.aikon.com.ve joaquin_win

    Hey Kevin,

    Really nice interview and great news on the new weekly podcast!

  • LavaIce

    I enjoyed the interview, the format was great and I look forward to additional interviews. Some thoughts on potential interviews for the future: Eric Meyer, Roger Johansson and maybe someone from the W3C HTML5 working committee.

  • Bruce McL

    The new Firefox icon did not look good in my dock. the white is unnecessary and distracting. You heard it here first – the next version will be red, white and blue! Just kidding, I hope.
    For a while I replaced the icon with one I found that de-emphasizes the globe by making it black and gray. Today I’m back to the old 3.0 icon.