Happy New Year 2010

It have been 1 year 8 months 2 day since the day i have created this blog. Since, then I learned how to document important thing, discover tricks, learn new way to solve things and most of all learn how to share with people. This year 2010, i hope it will be the greatest year of my life because something big in my life is going to happen. I am going to start fresh with no idea what is going to happen.

New Year Resolution
1. Work hard and Study Hard
2. Think smart, and green
3. Learn well how to accept critics
4. Learn how to share better.

That’s all I am trying to achieve this year. 2010. I am coming.2010

My Web Design Process – Part 1

Before graduated from University, i though i know a lot of thing about software life-cycle. Well, after step foot into real world of IT Industry, the thing that i know is i know nothing. Fortunately, working with couple of clients include small and medium size projects, several freelance projects and with my passion along, i quickly grasp the fundamental of design process. Below are the process how i used to iterate on each project that i have been involved with :

1. Very straightforward and basic. Gather requirements from the client. Learn how to scope and say no to the client. Understand what your client is looking for, include profiling he/her business environment. Aware of their competitors, buyers and their budgets. What sort of technology to be used? How long is the website is going to be up? 2-5 years? This steps are the most essential before you can start to design a website for them.

The power to say no is the one of the most important during requirement gathering. Note that, this process will be kept iterating like a spiral process model. Prove them that their idea might a bit off. You need to show them your professionalism. That’s your job. You worry you will lose your customer during argument of what the design should look like. Find a way to solve it. Discuss with them politely and again that’s your job. If you thought creating software is easy as baked a pie (even pie is not easy to baked), then you might have to consider another career path.

Give you a scenario.
Client A : Hey i want something creative, inspiring and cool to my buyers.
Me : Yea, ok. I will figure out how to make it.
Client B : Yea, i want more color. Something more colorful like web 2.0 style. Clean and simple.
Me : Yea. Colorful sounds good.
The design idea in my mind look something like this :

Some Good Layout Design

Some Good Layout Design

Marketer C: Can you design with a flash or something blink blink to attract the visitor.
Marketer D: Yea. More ads. That’s what we do.
After several conversation to add something that is weird and their it is cool.

Me : Oh come on. If i say yes. the web page will look like as below :

Worst Design Sample

Worst Design Sample

2. With the above data collected, before you even start to sketch or design your website using “your little design tools”, you must define the workflow and process how user can get the most out of the website when their are visiting. Define the possible logical steps and the expected user behavior when their visiting your sites. Think of what information you want them to see within 10-20 seconds.

By workflow, let’s start with the root of the problem and from there to how users can navigate to the content that their wish to viewed. Normally i used several tasks and scenario type design. Using task and scenario type design can be tricky. You must not think as a designer or developer mind model because you know how and where to get the data that you needed.

Imagine as a user who does not know anything about the site content. Think as a user who only have less than 30 seconds to spend on your website. Nowadays, users are internet savvy. If their found your website a bit doggy like, poor design, and poor visual data arrangement the user might just left. You have lost one of your customer.
In my culture, if you don’t know how to do something, then the other guy will said. “Hey my grandmother can even do that.” That’s true, if any baby boomer generation how to use your website easily and get the data without frustrate them, you have done your job.

Let’s move on with out example :

*For example : Customer A visit http://www.example.com to check out what services did example.com offers and how much will it cost them. Do their have any special offers or credited reputation? How can i ask them a question regarding to my business need? any pricing models?

Workflow A :

      1. Customer A visit example.com and reach main website.
      2. Customer A look at the main page for services offering or pricing.
      3. Their might be looking at the navigation bars or the middle section of the contents.
      4. Found the link to the services offering and click on the link.
      5. The web page shown up and display all the relevant information their are expecting to see, if not guide them in the very same page.

[The workflow above only cover for success scenario, we need more type of scenarios.]

I use open source Mind Maps tools, which are easy to show to clients in an simple and easy understandable concepts. Support Open Source!!

Note * : This workflow are an example. You can learn more from Microsoft Workflow Design process. It can be more details and you must try your best to cover all types of tasks and design. Sometimes, workflow cannot cover all the scenarios but the most important thing you must covered is what your business trying to offer and find a creative and easy way to reach your clients.

Question : You might ask, i don’t have much time for this workflow thing for my projects due to very limited time and budget.
Answer : Before you start any project, i recommended you to learn and figured out some standard templates for the workflow that you are going to used. It doesn’t have to be complicated, as long as it cover the most important thing that you wish your potential visitor to grab most out of it. Visit Microsoft Workflow Design process to learn more about workflow process.

Once, we have enough workflow and task scenario in hand we can start to sketch the layout design for the web page. For mine, i sketch around 5-6 different web layouts. Each layout have a different arrangement of data, function, navigation bar and etc. With all the workflow and each sketches, present it to your clients. Get feedback from. With the feedback received, progressively improve the design. Reply back again with the new design. Let them be part of the design process so that their can assume that where are the money spent.

Do not put any color on the layout design. The color process will be last step after you have a clear working copy of Web version. With the 5-6 paper sketch design, i will pick the best features and combine into everything and remove any redundant or ambiguity. I learn this process from Apple design process. More about it later on. Continue with part 2.

Tools i have been using :
——————————
Mind Maps tools
Balsamiq Mockups

Some of the very good book for user web usability :
—————————————————————–
Don’t Make Me Think : Steve krug
Designing Web Usability
Designing Web Interfaces : Principles and Patterns for Rich Interactions
Form that work

Some of the very good sites to refer to :
—————————————————
CSS Zen Garden
Smash Magazine
AlistPart
Stackoverflow

Microsoft Innovation Day AU 2009

Went to Microsoft Innovation Day in Melbourne last Wednesday. The presentation was good and inspiring. Their talk about UX design, Silverlight 4 beta, Window 7, Window Touch, SharePoint 2010, Dallas, xRM and etc. I like the idea of Silverlight 4 beta, with much more improvements over the old version and Flex. Silverlight 4 beta allows user drag and drop from web to desktop, support smooth image or video rendering and more. I hope that Silverlight will not repeat the same mistake as ActiveX or Java Applet.

The food was nice but still topped under 3 of the best free food during seminar events. Below i posted the PDF with full links, description and powerpoint slides hosted under slideshare.net

The pdf files that contains lots of useful links : Links and resource pointers for Innovation Days Roadshow 2009

The powerpoint slide for the presentation could be view from slideshare.net
———————————————————————————————–
The Age Of User Experience
Innovation on the web with Silverlight
Not Just Better, Faster – Expression and Sketchflow

Free and Open Source Icon sets

Found a free and open source silk icons set that is licensed under a Creative Commons Attribution 2.5 which you can use for design purposes. famfamfam Silk (The name is a bit weird 🙂 ).

Google closure compiler

Google recently release Closure Compiler service (labs version)

use for optimising a few simple functions in the service’s web UI for JavaScript.

You can try to execute JavaScript for optimisation, check for warning and error, compressed into small files, see what is the post data looks like and more. Of course, this sort of thing can be easily done with Firebug but FireBug still lacks some features such as JavaScript file compress and a feature of “how not to program this way”.
It is worth to check it out.

Some of the interesting documentation can be found at here.

http://code.google.com/closure/compiler/faq.html
http://code.google.com/closure/library/
http://code.google.com/p/closure-compiler/issues/searchtips

Unable to extract trial version of Flex Builder 3

Recently, i wanted to try out to install Flex Builder 3 from Adobe website and after successfully downloaded the file i was unable to extract the files. It came out this error “Please select another location to extract the installer”.

I checked the hard drive and i have more than 10gb spaces in all my drives. I kept getting the error no matter what. I clear my Windows temp folders, tried in different OS such as XP and vista. I also tried to disable my firewall and remove my anti-virus software.None of them is working. I suspected that the downloaded file have been corrupted.

Oh Yea. I forgot to mention that i have downloaded the file from my office computer. Apparently, the package i have downloaded have been scanned through proxy and Inter-scan anti-virus checked. That’s why the files get corrupted even i downloaded the Flex SDK packages. So, i went to my friend place and re-downloaded the files. All have been working fine without any errors.

So my conclusion is that, if you have the same error and tried the Adobe troubleshoot, and none of the steps above worked for you, you might try to re-download the packages from different computer or proxy, virus scan free.

Check out some of the solutions here :
http://forums.adobe.com/thread/85013
http://kb2.adobe.com/cps/858/f8582407.html

Melbourne Barcamp 2009

Just went back from 2 days Melbourne Barcamp 2009 held at UrbanCamp. It was very fun, interesting, learn a lot of new ideas, moon and mars colonisation and more. The events is free and thanks to the sponsorships.

Here are the lists that i have attended during the 2 days events
————————————————————-
Day 1 (Saturday)
—————-
1. How Internet works – A talk about Border Gateway Protocol, wireless station around melbourne, ISP and network stuff.
2. Toonlet – Comics for blogger.
3. GEO location stuff – things like Google Latitude and etc.
3. The Seven Day Game – Python Game development in 7 days.
4. Social Media 2.0
5. ITIL Problem Management – IT Governance.
6. Zing workshop – Multi-interaction with wireless keyboard to contribute ideas to prevent next bushfire.

Day 2 (Sunday)
—————–
1. Introduction to GIT
2. Facebook privacy stalking 2.0 – (Facebook FQL) – A very cool and interesting topics.
3. Colonisation of the Moon and Mars
4. Amateur Radio
5. JavaScript secrets
6. 12 Deadly MySQL sins – The danger of sql injections and so on.
7. A Short Story about PHP Profiling & Optimisation

Some of the photos during the events.
————————————
(Photo will be upload soon)