Archive for the ‘Design’ Category

Content influences design

Thursday, March 4th, 2010

At present, I am working on integration of a number of portals into one single seamless experience. As of now, each of these portals have a different look and feel, with its own Information Architecture and are even built on different technologies.  The main issue here is that in addition to the design,  content too, is not consistent.

While Portal A is a repository of documents and templates, Portal B provides a number of reports and metrics on performance of products and services. Portal C acts more as a HelpDesk portal.

Certainly, the purpose of each of these portals are unique and different from one another. Users accessing these portals expect information to displayed to suit their needs. While Portal A can be designed like a document management system, Portal B would be better of with a dashboard like look-and-feel, similar to google analytics or the likes.

Good wireframes need good content
This is where Wireframes can provide a good visual aid to what the final design may look like. Wireframes are excellent for creating quick mock-ups of form, functionality and content. At the same time it also gives an opportunity to know what the information on would look like on the real thing. However, it is important to note that wireframes fail if the dummy content is not representative of the actual data. Using “Lorem Ipsum…” text every ads little value to your wireframe design.

One of the key take-away working on this project was the importance of getting stakeholders to sign-off on the content during the wireframe stage itself. Though it may seem difficult and content may not be 100% ready, it is important to convey to stakeholders what and how content would be presented on the website. This is specially true if you are working on multilingual websites or web applications.

In this case, Portal B had tabular data that looked great in wireframes, in English. Translating the data to German or Norwegian did not make it look as pretty. Hence the need to get a sign-off or atleast gain some approval on content.

Too often in our enthusiasm to get the look and feel right, we forget that Content makes up for one of the primary deliverables. Content planning (what, why) and delivery (How, When, Where) is key to design so next time when you are creating those pretty wire-frames inserting “Lorem Ipsum….” pause, think is this good content?

Think. Content does influence design.

Installing lower version of Flash player

Wednesday, May 6th, 2009

Finally succeeded in downgrading flash player from version 10 to flash player version 9. I had reached a point where I was pulling my hair out and then I found this gem on Adobe’s website – Technote kb402435 .

I tried the following steps to install a lower version of the flash player

  1. Uninstall all flash player versions using the flash player uninstaller
  2. Rebooted the computer
  3. Disabled access to the internet/network
  4. re-installed an older version of the flash player
  5. Rebooted the computer again

All browsers, except for Internet Explorer 7 (IE 7), accepted the flash player. IE7 as usual gave me a hard time. This was primarily because of the ActiveX used by IE.

To resolve this, all I had to do was type the following in the command line

uninstall_flash_player.exe /clean

A detailed explaination can be found at Adobe’s website – Technote kb402435 – Safe versions security restrictions when installing Flash Player (Internet Explorer on Windows).

Additional resource that may help

Technote 14157
How to uninstall the Adobe Flash Player plug-in and ActiveX control

Technote 19166
Troubleshoot Adobe Flash Player installation for Windows

iPhone 3G – Send a text message to multiple people

Saturday, March 7th, 2009

In my earlier post I mentioned that it is not possible to send multiple text messages from an iPhone 3G. I stand corrected. Sending SMS/Text messages to multiple contacts is possible on the iPhone. The user interface is not intuitive, leaving users perplexed when trying to send SMS/Text messages to multiple contacts.

Here is how you can send SMS/ Text message to multiple contacts/people:

  1. Tap the SMS icon on the Home screen
  2. Once in the SMS application, Tap the write message icon image of Write message icon used in iPhone 3G
  3. Tap the “Plus sign” to add a contact
    iPhone 3G add contact to SMS
  4. A list of contact is displayed
    image of Contact list in iPhone 3G
  5. Tap on the contact you want to send the SMS/Text message to.
  6. Contact is displayed as SMS/Text message recipient
    Contact added as SMS/Text message recipient in iPhone 3G
  7. To add another contact Tap anywhere in the the area as shown (Yellow area marked in the image.)
    Add multiple contacts/people in iPhone 3G for SMS/Text message
  8. A “plus sign” should now appear
    adding multiple contacts for SMS/Text message in iPhone 3G
  9. Tap the “Plus sign” to add more contacts.

There, I hope this helps. ;-)

cheers!

More iPhone 3G – SMS/Text messages

Wednesday, February 25th, 2009

The iPhone 3G and what it lacks for SMS/Text messaging:

  • No Copy/Paste feature
  • No SMS/Text Forwarding facility
  • No facility to SMS/Text multiple recipients
  • No Character count
  • SMS Preview a privacy concern (can be turned off but a bit cumbersome to do so)

For the good parts, the iPhone 3G does have some pretty useful applications available. I have been using the Map application and Twitterific extensively. Also, the WiFi allows me to check emails, use Twitter, Facebook, download podcasts directly to my iPhone, all using my internet connection at home. This way I save on the data usage allocated by my service provider and can use it on the road the next time I’m lost again ;-)

Inspite of the groovy look, useful applications, the iPhone does lack many standard and “usable” features. In fact most of these are not “features” but basic facilities that make the experience a tad bit better.

For one, the iPhone 3G lacks the basic copy/paste functionality. I wanted to insert a contact into the text message and just could not do it. Had to memories the number and insert it.

Next, the “Forward” feature is absent on the iPhone. Which means you really can not forward text messages to your friends. Add to it you cannot send text messages to multiple recipients. Nor does it have the familiar “Sent messages”. The iPhone 3G lists text messages as conversations so I guess this could be one reason for Apple to leave out “Sent Messages”, which I think is fair enough. Though at times I would love to delete just certain bits of conversation rather than the entire conversation.

The iPhone 3G also lacks the character count feature. So when you type your text message you really don’t know if you have reached the message limit. Recently, in my enthusiasm, I sent a number of messages to my mates, which they received in two parts. Since there is no character count on the iPhone I merrily sent messages without realising I was over the standard limit.

One annoying feature, and one that I think is a privacy concern is the SMS preview feature on the iPhone 3G. Imagine you are showing some one a cool app or your iPhone when a private, personal text message is displayed. Now that could be embarrassing. But the iPhone does precisely that. It displays part of the text message when you receive one. The only way to turn off SMS preview on the iPhone is to enable the Passcode Lock. I discovered this only by accident. Most of the feature on the iPhone is an “accidental discovery” path to efficient use ;-) . Coming back to the privacy issue, enabling the Passcode Lock means entering a password every time you want to use your iPhone. So the work around is really cumbersome. Turning off SMS preview on the iPhone now displays incoming text messages with the senders name and “Text Message” written below it.

Some would argue that you could do all of the above via email on the iPhone. But, not everyone on my contact list has email access on their phones. And I certainly don’t want to use email to inform my mates to meet me two blocks away for beer. I’d rather forward them a text message.

So yes, the iPhone does look all nice and sexy on the surface, but it does lack these small features that make life a lot more easier. I hope, in the next upgrade they do consider these basic standard features thats available on even the most basic phones.

Ah! My Motorola L6, I do miss you.

My new Apple iPhone 3G

Wednesday, February 18th, 2009

Finally, after much deliberation, I got my iPhone 3G.

First impression? Awesome!!! The much talked about UI is really slick and unlike most phones available on the market.

Fun? Yes!!!

Intuitive? No!!!

The first thing I had to o after getting the iPhone 3G out of the box, was to insert my SIM card into it. And it took me a good five minutes to figure out where and how to insert the SIM. If not for Google, I would have definitely spent a lot more time trying to figure this one out. I finally got the answer on YouTube titled “How to insert a SIM card in an iPhone“. Since, for some reason, I had trouble downloading the user guide from the Apple website, this was a blessing.

BMaking a phone call to someone is not as simple as selecting the name and clicking the phone icon. Infact, after selecting the name of the person you want to call, you have to “tap” on the mobile number. The number looks like plain text and not like a button so yeah, it takes a while to get used to the UI.

Next, one would think that the silver/metallic button on the left of the phone is for the camera, (Similar to the Motorola L6, The Nokia and the Sony Ericsson K750i) but no, This button is for controlling the volume of the ring tone. I then thought that the “Home” button would be the one for taking pictures once you are in the Camera mode. However, this again is not the case as one has to tap the “camera” icon on the touch screen to take pictures. This is a challenge when you want to click your own photo. The lack of the tiny mirror does not make it easy either.

With the iPhone, I have to pay good attention and make a conscious effort to perform tasks. This is part of the learning. And this learning is not hard, just requires getting used to ;-) .

Applications on the iPhone are its trumpcard

So all in all, yes the UI is slick and does make you play with the phone more, but, not without reading the iPhone user guide first. Unlike other phones available, where you don’t need to refer to a manual for inserting SIM cards, making calls etc, with the iPhone, the experience is rich only after you have read through the manual. Though the UI is not intuitive and requires a shift from the usual way of doing things, it sure is interesting and engaging.

Coming from a User Experience background, the last two words are key “Interesting” and Engaging” and it is precisely this why the iPhone is so popular and also the reason it trumps over the others in the market.

Will play around more with my new toy and will post my thoughts as I learn to use it more efficiently.

Office Button and the Google favicon

Wednesday, February 18th, 2009

It happened a few days ago and again yesterday afternoon.

A colleague was working on Microsoft Office Word 2007 for the first time and as I walked passed he asked, “I know this is a real dumb one, but do you know where the ‘Save as’ button is on this?”.

I could understand his confusion as I had been through it the first time I experienced Microsoft Office 2007 about a year ago. As usual, I used Ctrl + O to open a MS Word document and after modifying it a bit wanted to save it with another name.

I spent about five to six minutes trying to figure out how to do a “Save as”. I saw the “Save” icon but could not find the option to do a “Save as”. It was when I clicked the Microsoft logo on the top left, did I realise that that round MS logo was actually a button in disguise.

Infact, Microsoft even had to write in length about the Office Button.

The Office button sure fails in terms of usability as I have seen a number of folks get flummoxed trying to do a “Save as”. Not many users would know that the logo on the top left is actually a button for some pretty important tasks. And worse of, making it glow (seen this in MS Outlook) only adds to the fancy and makes it more “logo-ish” than “button-ish”.

Speaking of which anther giant – Google has come up with the new favicon. Of the many beautiful submissions here, I wonder what made them stick to this .

(X)HTML alt vs title attributes Vs the TITLE tag

Monday, September 8th, 2008

alt” attributes are NOT “alt” tags.

Phew! now that it’s out of the way lets proceed.

During our team meetings, I often hear developers and designers throw in the term “alt ” tags when referring to the “alt” attribute. A few years ago, I too, used to refer to the “alt” attribute as an “alt” tag. Infact, even the Human Factors International website incorrectly refers to these attributes as tags, well, they also incorrectly refer to the “longdesc” attribute as tags.

The W3c website clearly states that “alt” is an attribute  . The W3c website also contains information on what alt attributes are useful for. In short, Tags can be though of as elements and attributes as the properties these elements have.

For example, a car has four wheels, which are elements that make up the car. Now, these wheels can have properties. They may be made of iron, steel or some alloy. So if we compare the car to an HTML document, the wheel would be a tag and the attributes would be the property for that specific tag.

Alt attribute is used to display alternative text incase for some reason images cannot be rendered correctly. So if you had your company logo that did not render or display correctly, an alternative text would be displayed to indicate that the image that did not show is infact the company logo. More explaination on the use of the alt” attribute can be found on the W3c website.

Another query that often pops up at team meetings is that Alternate (alt) text for images do not show in firefox. Well, alt text in firefox is displayed only if the image is not rendered correctly or if it cannot be displayed. If the image is rendered correctly, the alt text is not not shown in Firefox. If you want a tool tip to appear when the mouse is hovered on the image, the title attribute should be used for this.

Do not confuse the title attribute with the title tag (also refered to as the title element). The title tag appears within the head tag of an HTML document and can be used only once in the entire HTML document, where as the title attribute is used as an additional explainatory note.

Hope this helps to understand the difference between (X)HTML tags and attributes.

Tips for creating a design portfolio

Wednesday, May 7th, 2008

Okay so you are now done with Uni. Or maybe in your last semester and all excited about finishing school and getting that job you have your eyes set on.

But hey! wait a minute!!! Do you have your Portfolio? Do you have “work” you can proudly show to prospective employers or clients?

You don’t know how or where to start? You have that lost feeling again? Well, fear not, help is on the way :-) .

Why do you need a Portfolio in the first place?

Well for one, your portfolio is a window into your creative world. It gives an insight into your skills, talents and more importantly, your potential. Your portfolio could make the difference between getting or not getting the dream job you have been after.

Most often students, and sometimes even professionals, are intimidated at the thought of creating a portfolio. Reasons for this could vary from “not being skilled enough” to “I want my portfolio to be the best out there, but I have a creative block”. Or it could be a simple “I don’t know where to start or how to go about creating a portfolio”.

· Planning – it is easier than you think

Planning your portfolio is a very important step. You need to plan how you are going to organise your work, how you are going to present them and what you need to put into your portfolio. At this stage you don’t need to spend a lot of time on the actual design of your portfolio.

For starters, just get your work out there. Collate all your work and organise them into relevant categories. Categories could range from the basic Web, Print and Video to something more specific to your skills or style of work.

To answer the How and Where to start bit, you need not have an elaborate design. But, it is important to categorise your work appropriately. By appropriately, I mean category names must be easy to understand. A category named “Pixelator” or “Snap Shots” does nothing when you meant “Graphic Design” or “Photography” respectively.

When you create your portfolio, there is no need to add the masterpiece you created when you were 10. In short, only add your latest and best work.

· K.I.S.S. – Keep it Short and Simple

As mentioned above, include only relevant work that would add value to your portfolio. Don’t add work just because you have worked on your cousin’s wedding invite and she cousin thought it was cute.

If you are out to get a job or want to get into any art school, the folks scrutinising your work may miss out on the important bits while they rush through your portfolio that contains material that could be easily avoided.

Remember, there are many more folks just like you who are fighting for attention and would like to get what you are after. So make it easy on those going through your portfolio, give them what they want not what you want.

In terms of design, you don’t need to have something very elaborate. In fact many students and professionals miss the bus in the process of creating their “Masterpiece”. You can always build on your current design and layout. But for that to happen, you need to have one in the first place.

· Communicate Communicate Communicate

Your portfolio must communicate your skills and talents. It should communicate what you are capable of. If there are certain skills you need to pick up or improve on, practice those skills. If there is a particular style you are inspired by and want to build on, practice that style. Play with different colours. Don’t be afraid to experiment.

Browse the web for inspiration. Look for styles, typography, colour schemes etc. that you find stimulating.

If you are a student and have little or nothing, you still can build on your portfolio. Walk down your street. Ask businesses if they need a brochure or a website designed. Look for opportunities where you can volunteer for work. If nothing, create mock up of websites, brochures or what ever you need to show your skills.

Try to steer of complicated or difficult themes, unless you are confident you can pull it off and the message passed on. If the folks going though your portfolio find it difficult to comprehend what’s happening or what you are trying to communicate then you are in Big Trouble. Yeah, it’s the one with a capital T.

· Usability

What good is a design if it is not usable? Being different does not mean it will work or it’s better. There are many occasions where designers let creativity get the better of them. They come up with elaborate, complex designs that look great at first, and then make them go “huh? This does nothing but sit pretty”.

Keep your target audience in mind and the purpose of the portfolio. It is a good idea to learn about Usability and User Centred Design to help create a good portfolio.

· Feedback

Getting feedback is good, getting feedback from the right people is better.

Getting feedback from peers and experts in the industry is worth more than feedback from folks who don’t know what you are on about. When you are at a done with your portfolio creation, ask people who know their stuff what they think about the portfolio you put together.

Feedback helps in not only improving your portfolio but also helps to get a different perspective on how or what others think.

So there you are. What you waiting for? Go! Get your portfolio out!!!! ;-)