Daily misery

sketch there’s only one person who is able to read my sketch - me :-(

wireframe

first mock

I skip a bunch of in-between steps here. Take this as sort of a graphical representation of an interface evolution, from idea conception to the final design.

from my experience, the single most important variable in web user experience has little to do with the user interface itself, and it’s probably the one thing interaction/interface designers have little control over - it’s the speed.

The web is a hostile development environment. The speed bottleneck of many web applications is either that the server(s) could not handle the load or the limitation of users internet bandwidth. If your web site or application is not responsive to user interactions, has slow loading time or graphic elements load like a teleprompter, then I afraid all the efforts that go into paper prototyping, personas creation, AB testing and other HCI methods will go down the drain as well.

Most of the time, even a slight speed bump may result in major experience improvement. And there are several ways to provide ‘fake’ speed improvement: by constantly updating your users about the state of their interaction. Notify them whenever something has been accomplished, something is about to happen or something is wrong. Communication is the best way to interact, in marriage or designing UI :P.

So remember, work along side your developers to make sure your apps are cheetah-certified.

Chris is one of my favorite etsy’s seller. His artwork is amazing.

sometimes, about half of my working day is spent on meetings, emails and IMs to discuss project specs, wireframes, mockup revisions and screen designs. Coupled that with multiple sessions of usability research, design brainstorming and well, arguing with my boss, communicating about design is becoming, at least in my case, as important as doing the actual work of design itself.

And I think I might have found the book that will help me improve in that area. I just finished the first chapter of Communicating Design: Developing Web Site Documentation for Design and Planning and this point made me chuckled and nodding in agreement.

Send materials around before the meeting. Perhaps this seems counter-intuitive to you, but sending materials around in advance of the meeting means you can dig into the meat of the documents without having to spend much time on background … Some people think that sending the materials around can backfire by revealing the punch line to some elaborate story. Keep in mind that you’re designing a web site, not telling a joke.

Can’t wait to finish it. Special thanks goes to Hui Nee and Amazon’s wish list :).

$35

Update: I went with the second one.

I’m a big fan of Wellsfargo online banking, from their application UI to the ‘less steps makes users happy’ mantra. Most people probably won’t notice how easy it is to use because that’s what a good UI is all about - being invincible and taking out those ‘WTF’ moments. I have two other bank accounts with IGN and Bank of America and everytime I try to use their online banking (especially BOA), it makes me want to pluck my eyeballs out, literally. That’s probably why I’ve came to appreciate my online experience with wellsfargo.com. So much luv going on there.

by Daniel Cook

User interface design involves some preliminary steps before one actually gets down and does the dirty work in Illustator/Photoshop/Gimp. They usually are test cases, personas creation, wireframing the spec and of course, prototyping (in no particular order). Svenfoo’s recent blog post titled paper prototyping for fun and profit offers a great insight on how you can let users, with just a notepad and a pen, do the initial mockup prototype for you.

Of course, the UI team of Hanmail (Corea’s largest webmail provider) took the concept of paper prototyping to a whole new level. ^_^

Given the recent popularity of web widgets and mobile applications, you get to see some very interesting designs on small interface. I find it both an interesting and challenging task when designing for such screen. On one hand, you have many functionalities that you have to fit into this one tiny area. On the other hand, you have to worry about the usability aspect of it - text size, resizable interface, elements interaction within the interface and of course, trying to make sure the dang thing doesn’t look too busy and cluttered.

So given an interface dimension of about 290×180px, how would you design an interactive class schedule, a mini map and an emails/news listing widget? Here’re some screenshots from the project I’m currently working on:

0.8 beta 2 has a new face lift. Cleaner UI. Better error reporting. Whee!

At UNL, we deploy a local instance of the same validator to avoid overwhelming W3C’s server in our effort to validate and promote accessibility and sanity check to almost all of our published web pages. Some of our team members have been working hard in making improvement to the validator to fulfill our own needs and contributing back to the working group in the process.

Congrats to both the W3C’s and UNL’s validator team.

because you never know what type of crazy, curvy sans serif fonts users might have in their bag.

Set the proper font family, make it precise. Generic type should only be used as a last alternative, for improved robustness.

font: 82%/150% sans-serif; Bad
font: 82%/150% Verdana, Arial, sans-serif; Good

“Good design is not just about being pleasing to the eye, but about working within the confines of the materials and technology at hand and making compromises where need be. Few designers (especially ‘print’ designers working with web developers) appreciate being told that their work requires revisions because of a technical impossibility, and that’ll never change. But the mark of a mature designer is not just one who’s willing to compromise and adapt when rendering their work in the real world, but one who’s responsible enough to police themselves.”

-Todd Dominey

One of the good practices in the field of user experience design is to give a good default setting for your majority users. It does not only mean putting a good UI for the default screen, but also helping users to quickly and painlessly make their selection or action in a given view.

For example, there’s a group of radio/check box buttons in the describe-your-body type of ‘profile’ section . You can have three buttons (or dropdown) that say ‘fairly athletic’, ‘fat and lazy’ and ‘I’m Lance Amstrong’ to help users auto-check the form fields that fairly represent such description. (I won’t recommend using those actual words though.)

A couple more examples:

Apple Mail: Another good way to let users return to the default screen is to have a good ol’ ‘reset’ button, as shown here in Apply Mail’s preferences screen.

Football Manager 2007: In game UI design, there are always so many options and configurations to choose from. For example in Football Manager 2007, you can pretty much design any kind of soccer formation you can think of. But the developers help ease the users UI adoption by preparing a rather large set of more common tactical formations.

This is a story about my trip back to Malaysia a few months ago. Chronicled and illustrated by Karen Woon.

I know I know, if you are doing things right, and if it works in Firefox, then it should work quite well in Safari. If not, I must have used some pretty f***ed up browser sniffing codes or I just don’t want what I’m doing.

I know I know, it is the first browser that passes the ACID 2 test.

I know I know, it has a pretty matured and solid JS engine.

I know I know it supports css 3, text shadow and SVG and many more advance features that a developer can only dream of in IE.

I know I know it’s faster than Firefox in Mac and looks much better too.

I know I know all these.

BUT DAMN DO I HATE THE FREAKING SAFARI AND I GONNA SAY THAT AGAIN IN FONT SIZE 72PX

*back to debugging JS bugs in safari*

I had been reading Jen Wang’s journal religiously ever since I started reading Flight I/II. She’s a great storyteller with a pair of insanely art waving hands. Take the boring and ignorable pre-flight safety demo for example. I am sure most of us don’t pay much attention to it, and for the few of us who do, we are actually staring at the air hostess boobs. Sad but true.

But Jen thinks otherwise (not that she doesn’t like the male hostess butt or deep blue eyes, I’m sure).

If you like her work, go give her a pattie on the back. The more young artists in this world, the more peace will the future holds on the next fold. You can quote me on that :0).

If you dream to become an illustrator (secretly, I have always wanted to be one) or cartoonist or comic artist, you can’t miss the Flight collection. I was so impressed with Flight 3 I ended up ordering Flight Vol 1 and 2 from Amazon. It is a collection of short stories narrated by wonderful art works from professional artists to still-in-college students.

My favorite so far are pieces from Chris Appelhans (Vol 1) and Jen Wang (vol 2).

Flight makes you float in the sky and recaptures what it was like to play around with dreams and tales.

Last week, University of Nebraska Lincoln officially unveiled its spanking new website redesign. With this redesign, I humbly believe we now have one of the top web sites among all the other US academia institutions, aesthetically speaking, and also in terms of support for web standards, accessibility and usability guidelines.

Some people had asked me about the design and wanting to talk about it. Honestly, I don’t think I am the right person to discuss that with. You should all go bug him. But on a personal level, I like it a lot. Taking into consideration the problems/circumstances we had had during the entire process, I think Aaron managed to come out with a design that not only looks really good, but also plays well with everyone else’s mind. Yes, it deviated a bit from his original design, which, by the way is stunning, along the process but we really tried to fight and preserve as much of the original design identity as we can.

I can however, talk a little bit more about the codes. Some argued that the markup can be tighter and I agree. It is always a very challenging task to come out with a solid markup that works on 4 or 5 different layouts across multiple browsers. Add to the fact that we have to keep in sync with certain layout elements from previous design markup to ensure smooth transition, not to mention various content layout and a grid based design (see below), things can start to get pretty interesting.

Other than the usual bruahaha - it works in the latest version of all modern browsers, adhere to web standards, validates, resizable +- 2, graceful fallback for JavaScript treatment – I have several other interesting points to share:

1. Painless web page conversion is one of the main focuses of this project. Brett Bieber, our lead software engineer, helped me a lot by guiding me trough the inner working of the dwt template we have in place. By coding the CSS/XHTML markup around the template, I think we made the page conversion from the old UNL template to the new one a fairly easy process. All a web owner needs to do is to replace the CSS files and click the ‘Update’ template button in their Dreamweaver. Everything else is pretty much taken care off. This is especially critical when you have thousands of web pages from many different departments to convert. And we can easily push out bug fixes and codes changes to all the template users without them having to do anything to apply the patches.
2. Different set of layouts can be applied using the same markup by just changing the BODY id. Such set up has helped us a lot in terms of codes coherence and maintenance. But the downside is you might run into trouble with multiple CSS overwrites properties. It really takes a good documentation and stacking practice to keep me in check on which CSS attributes has precedence over the other.
3. UNL is one of the early adopters of Adobe’s spry framework. It is a pretty solid library, albeit a bit heavy on the size. I really like the animation callback function and how the library handles associative arrays is a nice breakaway from the prototype library. We are going to have a lot of fun with this thing ;-).
4. Although it might not be noticeable at first glance, this new design is actually a grid-based design. See here: Grid image!

A week after the launch, we are still working on page conversion and fixing bugs but everything is finally settling down. It’s been a long process and I am starting to see how the new design will helps shapes the university web presence in both the academia and recruitment fronts.

Finally, I just want to take this chance to thank my colleagues – Aaron Grauer (you can blame him if you don’t like the design), Brett Bieber and Ned Hummel (I can take all the blame for the CSS/XHTML but these two are more than willing to share the blame for the javascript codes), Aaron Coleman (blame him if you find spelling errors or broken links in one of the top level pages content), Bob - my boss (blame him if you don’t agree with just about anything ;P) and everyone in WDN.

Shameless plug: UNL has a very talented web team in place and we are very excited about some of the projects we are currently working on. Hopefully they will see more sunlight over the next few months. Stay tune!

When you have five very hot girls keep asking you ‘Hey you haven’t update your blog for a while? Busy?’, you know you’re doing something right with your blog. So hopefully with the help of a little messy design realignment, a mascot and some fresh content, I will be able to find myself a reason to start writing again.

The idea of the realignment is sort of my in-denial and prematured attempt to break out of my ’style’. You see, according to some, I have a certain style when it comes to designing for websites. I don’t agree. Here’s how a conversation went with one of the hot girl the other day:

Me: Hey, you want to preview the latest University of Nebraska-Lincoln’s design?
Hot Girl: Sure!
Me: Here you go. http://blabla.xxx
Hot Girl: Haha, you don’t even have to tell me but I know it’s your design. The design is SO YOU.
Me:Uhm.. but I didn’t design it.

While working on the puppylab site, I remembered trying to put a grungy-looking menu in the header and this Hot Girl #2 said “That’s not like you. Your design is simple, clean and elegant. I don’t like the menu”.

Well, I can be dirty-looking, badass and dark too, if I want. There’s no stinkin style that I was trapped into. I’m a hybrid, I’m a hybrid…. (Self-repeat for 100 times).

I also added a new project in my portfolio. It is a green tea club web site. I’d already handed over the final design to the client but right now they are still working on the backend.

Finally, let’s talk about the mascot! I love the mascot :D. Ken of kenart.net’s fame was kind enough to sketch a mascot for me. Well he actually came out with like 15 and asked me to choose. It was tough since the cuteness on each sketch is uniquely personal and beautiful. I was seriously playing with the idea of taking them all. ^_^ Now, if you guys can come out with a name for this little sad cutie….

So what do you think? Think I can pull it off with this newfound, messy art of the dark side? To be honest, I’m not even sure myself.

Tip: You can always switch back to the old style if it’s too messy for you (look for ‘mood’).

- I am starting to find girls who smoke very attractive.
- I buy plant from the mall, put them in my living room, forget to water them, they die, I throw them away, repeat.
- Rachel Mcadams doesn’t have a summer movie coming out? Now that’s just depressing.
- some people have this concept in their mind where art and nudity are two inseparable entities. I have received a few submissions for listenagain.org and it kills me to have to hold off half of them due to such ‘artistic exposure’. I understand they might have good intentions (a couple messages are quite cute actually) but the project is young and I don’t really want it to be seen heading towards that direction. Maybe in a couple of months time when it is more matured. So for now, only I get to see the nipples, pubic hair, bare chest and panties. Editorial control sucks, trust me, but after consulting with a couple of my close friends, it is probably the only best way to go for now. Nevertheless, thanks to all that had submitted your entry.

I love story, great story. A great story can be a simple one-liner, ‘once upon a time’ or what just happened five minutes ago. It can be fictions or true events, sad or happy.

I truly believe many great stories are being left untold. Those that do, well, get turned into motion pictures or books or memorabilia. But that has a very high entry-barrier for the majority of commoners like you and me. Or perhaps some of us just don’t like to tell a story through that channel. Just a couple of close friends and a creamy mocha, or a simple cut and paste notebook that gets read by many across the globe, or none. Or just you and me.

I want to introduce you to listenagain.org, my mini art project in which people submit a photo of themselves holding a message with a story to accompany it. It is that simple, and I hope you’ll like it.

…at some of the projects I’m currently working on.

The panoramic header image was taken from my balcony sometimes during last year Christmas season. Stay tune for more interesting, big ass and controversial header images in coming months.

Anyway, an iconbuffet buddy of mine sent me the ‘marseille cafe‘ icons a couple months back. Upon receiving the icons, I just knew I had to come out with a design that plays nice with them. It is, in my opinion, one of the better crafted icons in the free delivery package.

The blog design didn’t get to see any sunlight back then since most of the projects I was working on were those ‘2.0 web applications UI design’ sort of stuff. Until this young woman came to me one day asking for a blog design.

yeawen.com
I was ecstatic and thrill when she told me she was thinking of setting up a blog. I’d pitched the idea to her for quite some times because I’m a big fan of her writing. She’s one of those people ‘who don’t have a blog but should have had one’. So I grabbed ‘marseille’ out of my dusty comp folder and put on some finishing touches on the design, polished it with my AJAX dishwasher, used my magic wand to transform it into a css template and ported it into wordpress theme.

It doesn’t hurt that this project gives me the rare, precious 8 web design warm fuzzy feelings. It’s one of the projects I enjoy working on more than others. Although it is filled with dummy contents right now, I can reassure you she is many times a better writer than I am. She just needs to pick up her lazy ass and starts writing and hopefully this entry will give her that little push.

Oh by the way, she’s my younger sister ;-).

Oh, and enjoy your long memorial weekend.

Update: and she wrote her first entry….

Before:

(more…)

This is part of the xhtml source code for the newly launched www.onoff.se, a Swedish consumer electronic chains who recently ran a full-page ads in national newspapers promoting their new site and how it is ‘mostly adapted accessibility-wise for customers with disabilities, e.g. visual or hearing impairments’. Via [Roger Johansson]

Over the last few years, the general web community has started to embrace the css/xhtml paradigm, distancing themselves from table-based markup in the process. This is a good thing, hell it’s a great thing. Many web developers do so mainly because it is just so much easier and common sense. Having the power to control almost the entire layout from a single css file and apply changes to multiple pages with a single line of code.

Few of us convert because it’s important to separate presentation and content, utilizing semantic markups or that we’re concern about the accessibility and usability issues. People just like to do thing the easier way and happy to say that, css/xhtml is the choice of doing it the ‘easy way’.

Hence the ‘divitis’ syndrome. ‘Every ‘td’ cells represent a div’ thinking brings us the wonderful codes shown in the above picture. In fact, you can even use the ’save for web’ option in Adobe’s Illustrator to transform design mockup to css/xhtml markup! Sweet lovely mother of all Gods. It’s like back in 1995, only 10 times better because now you’re embracing the ’standards’.

That, coupled with the explosion of AJAX (everyone should put onclick, onmouseover events on your ‘a’, ‘div’ and ‘p’ tags! Woot!) make our source code looks fat, ugly and stupid. Not only we have an explosion of ‘div’ tags, but now the endemic has spread with the inclusion of new variants - the overusage of classes and IDes. All because we, as web designers and developers and information architecturist, want to control everything. It’s an irony, considering that the main reason why we were in the ‘table mess’ during the early web years is because designers and developers wanted to control the web and back then the web wasn’t maturing at a pace fast enough to support their ‘creativity’ (or maybe they didn’t know the difference between print and web design) that the only viable solution was to use the table markup.

If the current loading time of Yahoo! Mail beta or having to insert 10 external javascript links in between xhtml ‘head’ tags is what I have to endure/do in order to fully enjoy that ‘rich user experience’, then thanks but no thanks. I want my html 4.0x back.

It’s like taking a huge step forward only to take another two giant steps backwards. *sigh*

I have added the portfolio section, with a little help from an angry, kick ass red monkey. There will be more cool projects being added to that page soon, stay tune. One question that prospective clients and fellow freelancers kept asking me is why do I have to keep some of these projects private (MIA in portfolio). Well the main reason is SEO. When you work with a startup company, the company name will most likely does not even exist in the search engine index because there’s no content other than a splash page on their domain. If you put these clients into your portfolio before they even launch the product, chances are your name will appear higher in the search rankings when the buzz starts to kick in. Which is good for you, but bad for them. And trust me, you dont want bad, angry clients. I’d learned that the hard way so hopefully this will serve as your tip of the day. :)

Did I ever tell you guys how much I love Mayday? I have a lot of respect for this band for many good reasons, but mostly for crunching out songs that are just pure fun to listen to. No one really writes real stuff in their songs anymore. I hope they will stick out for a while. And do you know they are the best selling artist in Taiwan’s entertainment history? Me neither. I thought that honor would’ve easily gone to Jay Chow. Maybe I was wrong.

Anyway, here is ’salty fish’ (direct translation, of course).
(more…)

A sneak peak at my new blog design…

- whitespace
- black and pink
- big ass picture
- grid

Soon, it will be soon.

Also another thing, I’d seen quite a few people got the Wonderwall theme working, which is great. I do want to apologize for the unpolished codes (seems like some of you were having trouble making it work too :(…). Hopefully those who managed to get it works can help out with the support questions in that post, CoXiS forum and the wordpress forum. My big ass thank you goes out to all.

Also, it would be nice if we can start seeing some variations or design derivations from the theme. I included the psd in the package, partly because I am waiting to be amazed. So if you have time, please play around with the black header and the puppy icon. We don’t want another kubrick’s explosion in the Wordpress-sphere. ;)

Again, thank you.

Time for the interesting links again.

• If you’re a fan of Will Pan, you SHOULD NOT watch this video. I think they make a cute couple though.
• This is by far the most awesome sand castle I have ever (and ever will) seen in my whole life.
• The proper, yet simple way to write a thank you note.
• Jason Lo, the Malaysian who a few years ago rocked the alternative indie scene with the song ‘evening news’ had just released his latest album. Check out his site media section for music videos. I love ‘operator, the line is dead’ to bits.
• Crazy photoshop and illustrator work. Thousands of hours and layers and huge file size. Amazing!

Update: One more cool link. If I buy a macbook pro in near future, I want this comes bundled with it.

Life as a web developer is depressing enough with all the IE shitz and css bugs. But a couple links put back the smile on my face.

• Web 2.0 Awards Show - another brilliant web development comic entry by the hillarious bunch at WebJillion. They mock fun at almost everything!
• 37 Signals’ Marcel offered these expressionistic representations of what it’s like to wade through support email. I laughed so hard because it is so true. Evil support emails!

Some By Sea is performing at Chatterbox tommorow! You will see me there, hopefully. And hopefully, I will see you there.

Also Head Automotica is performing at Knickerbockers on March 29th! Check out their hit - Graduation Day. This is definitely a musical fiesta week for me!

Movie recommendations of the month: 16 blocks, V for Vendetta. Both brilliant. (By the way, do any of you know where can I get the recipe for that bread toast (bread-egg toast?) in V for Vendetta? It looks yummy.)

I’d decided to quit drinking for good. So far doing so good. It helps to have your bar-going buddies rallying behind you during process like this. Occasional tempting and teasing efforts by the naughty few are still there but I’m committed. :-)

Life is good. Work is good. Drinking is bad. (repeat after me….Life is good. Work is go…..)

1.) There’s a lady who works at one of the starbucks premises in our University Student Union. Every morning before I step into my office, I would get a grande hot chocolate from her. She makes the best hot chocolate. Not too sweet, not too bland, just the right amount of cream. Mmmmmm.

2.) Fried cheesecake in Wasabi, a Japanese restaurant situated near the campus. You take a frozen cheesecake and fry them for a couple of minutes and serve it with two scoops of vanilla ice cream. This thing saves life!

3.) Her name is Han Ga In (or at least that’s what Google tells me). She is the sweetest of all Goddess of all living girls. Not a drama crying queen but she can cry allright. Never would’ve thought I’m still young enough to have a celebrity crush.

4.) Apple Mac. So what’s the big fuss with all this Apple-mania? Oh ho ho, you have no idea how it hits you until you fully convert. And I think it’s misleading to think that Mac is only more productive and useful when you are doing graphics/multimedia works; it serves me like a charm while doing programming works and other misc. tasks too. Also, it can’t hurt to have some good looking desktop icons lying around.

Ever since the current Daily Misery’s design went live about 3 months ago, I’d been receiving two to three emails almost daily from people saying what a great job I’d done. It is healthy for my ego and those emails can never get too much. I read every one of them and sometimes I shot a reply back if needed to.

While a large number of the emails ended up asking pretty much the same question - whether this design is going to be released as a theme? - there are some rather interesting ones that just made me chuckled like a 5 years old. This one guy provided me with this link to a recipe that claimed to make the best cheesecake on earth, and there’s this teenage girl who was just starting to pick up CSS and in fact bought her first CSS book after I gave her my recommendation. Some web developers/designers around the midwest area offered to meet up and buy me coffee. Two or three very business-like people came out with some pretty decent and professional proposals to buy my design too. Of course, that is not for sale ^_^.
(more…)

Supposedly Clean, a Wordpress theme is ready to ship today. Here’s a short list of its features.

• Easily customizable through admin panel. You can change text colors, link colors, sidebar text colors and etc.
• Comes with three different flavors
• Tested in Firefox, IE 6.0+, Opera and Safari
• Validates as xhtml 1.0 strict
• Only 3 images.

And here are some screenshots.

(more…)

(more…)