The Art of User Experience

Color Usability (part 2)

Posted by: ahussam on: September 3, 2009

Back in October 2008 I wrote about color usability, and recently during my lunch break on one of my business trips I noticed the below packets:

Mayonnaise & Ketchup Packets

Mayonnaise & Ketchup Packets

I had just put Mayo on my fries and Ketchup on my salad!!!, A white Ketchup packet and a red Mayo packet… how creative! According to the Gestalt theory, the mind easily views the whole of the object without really going into details, and according to this without reading the text, I assumed red=Ketchup, white=Mayo…

I would love to know if any of you have similar or related examples to both Part 1 and Part 2 of this series, drop me a comment if you do…

The beauty of Adobe Acrobat Connect

Posted by: ahussam on: May 28, 2009

ConnectProSolutionBrief-1

NO DOWNLOADS. INSTANT ACCESS. THE ABILITY TO CAPTIVATE YOUR AUDIENCE WITH LIVE AND ON-DEMAND PRESENTATIONS. THAT’S WHAT MAKES ADOBE ACROBAT CONNECT THE NEXT BEST THING TO MEETING IN PERSON.

Formerly known as Macromedia Breeze, Adobe Connect is a software used to create information and general presentations, online training materials, web conferencing, learning modules, and user desktop sharing. The product is entirely Adobe Flash based. All meeting workspaces are organized into ‘pods’; with each pod performing a specific role (i.e. chat, whiteboard, note, etc.)

You can rapidly create content, deploy custom training programs that mix and reuse a variety of training activities. Create self-paced courses right from Microsoft PowerPoint using Adobe® Presenter software. You can also capture screen recordings or create interactive simulations using Adobe Captivate® software. You can also record an Adobe Acrobat® Connect™ Pro Virtual Classroom session and download and edit it for reuse as a self-paced course. Curriculums can also include external events, such as management assessments. You can track training progress and generate training reports.

Connect comes in 3 levels

  • Adobe ConnectNow currently beta and free from Adobe on Acrobat.com site, is a great way to share ideas, discuss details, and complete work together — all online. Reduce travel costs, save time, and increase productivity with a web conferencing solution that’s easy to access and simple to use.features
    With ConnectNow, you get screen sharing, whiteboard, remote control, video conferencing, chat pod, a unique meeting room URL, up to 3 concurrent participant seats … no software to install, all you need is your browser and Flash Player 9 or later.
  • Adobe Acrobat Connect features unlimited online meetings with up to 15 participants with only 39$/month. You get Always-On personal meeting rooms, hosts can expand the viewing area for shared applications, documents, and whiteboards to fill the entire screen of participants. Hosts can choose to synchronize the view of all participants. Share presentations, videos, or applications in full-screen mode. Annotate over screen sharing using standard whiteboarding tools and shapes.features2Hosts can view who is in the meeting room in addition to the participant’s role (host, presenter, or participant) and status (whether the participant is connected). Use the convenient Start Meeting feature to start an ad hoc meeting and invite participants from within Adobe Acrobat® 8 and Adobe Reader® 8 software. Meeting hosts can control attendee permissions either before the meeting or from within the meeting room. Rights can be assigned either by using predefined roles or by using the participant’s rights feature.
  • Adobe® Acrobat® Connect™ Pro software is a flexible web communication system with strong security features that provides enterprise solutions for training, marketing, sales, and enterprise collaboration. These solutions are available as a hosted subscription service or as licensed software that can be deployed on-site, behind a firewall. Explore the capabilities of Acrobat Connect Pro Server (licensed version or hosted service) and the three Acrobat Connect Pro modules: Acrobat Connect Pro Meeting, Acrobat Connect Pro Training, and Acrobat Connect Pro Events.5-28-2009 1-37-56 AM

    Connect Pro can support as many as 1500 users, and comes in 3 service plans, a 5-user starter pack, Everything you need to get started, with a budget-conscious price tag. Includes 5 concurrent participant seats and unlimited usage (optional). Available options include Voice over IP (VoIP) Audio and broadcast video, as well as teleconferencing. A 10-user starter pack, Gives your organization the flexibility to hold larger meetings on a regular basis. Includes 10 concurrent participant seats and unlimited usage (optional). Available options include Voice over IP (VoIP) Audio and broadcast video, as well as teleconferencing. And finally, a pay-per-use plan, For occasional online meeting needs, the Pay-Per-Use plan lets you hold full-featured Acrobat Connect Pro meetings on a per-minute/per-participant basis. Price includes Voice over IP (VoIP) Audio and broadcast video. Teleconferencing is available at an additional cost.

Adobe Acrobt Connect Pro system architecture diagram

How to sell your design, and get it signed-off…

Posted by: ahussam on: January 27, 2009

One of the most difficult steps in any design is selling that design to your clients or stakeholders and getting an approval sign-off, and it is something that I have grown to really enjoy as I have gotten older and became more experienced.

A lot of people would think that if you’ve understood your client and project well enough, made the right decisions and put lots of hard work, your design should sell itself and the meeting will go on very smooth, but as much as you would like your design to speak for itself, walking a client through the design and discussing comments always has a stronger impact and a higher probability for approval.

Here are a few tips and tricks to help you turn this fearful step into something you would enjoy and look forward to…

Make well researched and studied design decisions

Assuming you came up with a great and wonderful design, you will still need to think through and know well your designs. In order to sell something and gain approval you will need to be able to explain why certain decisions were made, this may seem obvious, but I have been through hundreds of design meetings to know as a fact that designers almost always make design decisions without really knowing why as its easy to work on instinct or not fully think through decisions as they’re being made. DO NOT fall into this trap, it will come back and hurt you when its time to sign-off your designs.

Know your Stakeholders

It is highly important to know who will be reviewing your work as early as possible, don’t trust that your clients will simply give you this information and don’t rely on assumptions.

Ask them specifically who will be making the decisions, doing this will help you tailor your presentation and could influence your design decisions as well, but beware; even if you’re 100% sure who will be reviewing your work and who is making decisions, always be prepared to present your design to just about anyone, I cannot say how many times a new decision maker was introduced in the middle of a project or even in the middle of the presentation itself, and usually you will find that this person is someone who’s opinion carry’s a lot of weight, this will happen from time to time, so always be prepared.

Set Expectations

It’s important to set yourself up for success from the beginning, tell your stakeholders what you’re going to do and how the design process is going on, explain your design decisions and tell your client why they are a good fit. Tell them they are going to love the work you’ve done before showing them anything, the more you can be in the mood the better it should go.

Always remember that your clients hired you to help them as a professional consultant, they will let you lead them if you step up and take the reins from the beginning.

Only show the great stuff

I am a big fan of doing my homework and try to research what the client needs then target one single design, however in many cases this is not an option and some clients need to have choices.

If you are presenting multiple options, you should only show the ones you feel are good enough, if you show 2 good designs and one “not so good”, you’re not only disappointing your client, but you’re just asking to get stuck with a design you’re not happy about.

You have to also beware of ending up with a combination of two or more totally different designs, you need to avoid the client’s love for playing the “mix and match” game, make sure they know upfront and before you show them anything that this is not an option.

Oh…and keep your JPEG quality up to a max, never compress your review designs.

Getting feedback

When going into a feedback cycle with your stakeholders, be sure and let them know in detail what kind of feedback you need. “I do not like it” kind of feedback will not do, they need to be extremely specific and detailed in the feedback they give, they need to have a reason for not liking something, make them really have to think about what they’re telling you. Not only will it help get your designs approved, it will also give you much better feedback to work with when it comes to revisions.

Train your client into giving you problems not solutions. The difference between what clients often think they’re paying for and what we really do is exactly the difference between architects and construction workers. Architects plan and design new buildings, and construction workers implement those plans. Likewise, there are two tasks in creation of a new website: the planning/design, and the implementation. In some cases, they are both done by the same person — but it seems that many clients are expecting their web designer to be far more concerned with the implementation than with the design. That is to say, they sometimes see us as web monkeys who simply carry out whatever they ask of us. But the reality is they’re losing out on half of our skill set when they do this — and it really should be our responsibility to educate them as such.

See, “make the logo bigger” is a solution. “The brand isn’t prominent enough” is a problem, it’s the client’s job to bring problems, and the designer’s job to find solutions. A good designer needs to be able to lead their stakeholders to a certain extent, clients are very often non-designers (and sometimes non-creative in general), it’s common for them to only see — and therefore suggest — the obvious solution.

So if there is one thing I would love to be able to make clients understand, it’s that its in their best interest to bring the problems, and let the designer work on the solutions. Oh sure, they are more than welcome to make suggestions — most designers would love to hear them. But clients who insist on art directing every step of the way usually lose out — and frustrate the hell out of a designer.

Defend, but never become defensive

Be prepared to defend yourself without being defensive, chances are you will get some feedback you do not agree with, sometimes it could really damage the integrity of the design. Your goal here is to not let your clients do something they will regret later on and whatever you do DO NOT roll over on major design decisions, but take care, the last thing you would want to do is getting defensive, don’t let your ego get in the way, a defensive attitude will clearly show and you’ll damage your credibility and the designs with it.

When it comes to the smaller stuff, go ahead and let the client win, it’s not worth fighting over something trivial, pick your battles and fight those only worth fighting.

Listen Up!

The most important thing during a design review is listening, you have to understand your stakeholders questions and feedback. This simple fact of listening and letting them share how they feel about your work will help you sell it, always remember you are working for and with them, they are an essential part of the design process and you need them to succeed.

Be patient in your replies, listen first, think  it over then reply, do not disagree or reply with the first word that comes out of the client’s mouth, do not over interrupt your stakeholders, give them space to talk, the more they talk the more likely they will listen to you.

Print it!

Printing your design on paper (preferable A3), although avoiding the true user experience such as scrolling, clicking, hovering and the above-the-fold phenomenon, it keeps change requests down to a minimum as it makes stakeholders comfortable with the medium they are reviewing and lets you avoid unexpected cases such as power outage, broken projectors, bad screens…etc

Prepare Comps

If you know your client would want to see design or color variations for certain components, do it. Not doing so risks having your client not approving because they are waiting to see the “other variations”, I am not talking here about different designs, but only different variations from the same design.

Satisfying their need to see variations will help you guide them to the best one and make a decision.

Conclusion

Learning how to sell a design is an educational process, you’ll get better as you gain more experience interacting with stakeholders, but always remember, the idea is to get the best possible design for your client, not for you.

Crash guide in Tableless development..

Posted by: ahussam on: January 15, 2009

The purpose of this post is to help people who are facing the problem of moving from normal Table-based layouts in HTML to the newer Tableless (or DIV-based) layouts, I’ll try to provide the simplest guide and steps to understand the DIV concept…

1. Why do I need to change?

  • There is a major performance issue with table-based layouts, the browser needs to calculate the table structure in memory first, then it does a second calcualtion  to actually render it on screen, all this the user is seeing nothing until the whole content suddenly appears (you can overcome this through CSS)
  • Tables are harder to maintain or update once completed, as adding an extra column or row specially if you have lots of rowspans or colspans, sometime redesigning the whole table would be easier.

2. What do I need to understand?

  • What is a DIV?

    A DIV is simply a layer with defined dimensions (either by % or pixels) that can be positioned in any part of the screen and on separate layers and can automatically float (move) around according to screen dimensions and content thus giving you 100% flexibility to implement your design

  • The CSS Box-Model (margin – border – padding)

    cssboxmodel1

    Each DIV has a margin, border & padding as per the image above that can be controlled from the CSS, for further information check W3.org or HTML Source

  • CSS Positioning (Relative – Absolute – Fixed)

    Basically what you need to know is when you create a DIV it is positioned according to its place in the HTML flow (which is called static position), if you need to move it relative to that default position you would use relative positioning, if you want it to move to a specified position regardless of it place in the HTML you would use Absolute positioning, you need to note that absolute positioning is always relative to its parent not to the whole screen, to keep it fixed on the screen regardless of scrolling you would use the fixed positioning .

    for further information check W3 Schools

  • Floats

    Floats is exactly as its name implies, it floats an element either left or right of it’s parent container, you can either float to the right or to the left, you may also clear floats – that is sort of (start a new row) – a good example of floats is Google image search, in a small screen you may have 4 results per row, if you have larger screen width you would have 6 or 7 results per row, that is each image floats to fit in the screen width available.

    for further information check Smashing Magazine or CSS Tricks

That  is all the basics a developer would need to know to move from normal Table-Based layouts to CSS(DIV)-based layouts.

Hope this helps out a bit :)