Showing posts with label design ideas. Show all posts
Showing posts with label design ideas. Show all posts

May 31, 2008

How to create Sign up forms?

Comments (0)

how to create sign up forms

Signup forms is to create a permanent relationship between user and site.

Other experts articles on how to create sign up forms:

March 27, 2008

Blog on photoshop express

Comments (0)

Adobe has launched the online version of photoshop express for free. There is no download required for photoshop express unless if you have lower version of flash player. Flash 9 works fine with express. At present this version of online photoshop express won't replace the photoshop application. In future, adobe might move the features one by one.

Our experience: In the high speed connection, uploading of photos took time. Otherwise they have cool features in online photoshop express.

Do a test drive: https://www.photoshop.com/express/index.html?bypass&wf=testdrive

FAQ: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=74&catid=684&threadid=1344716&enterthread=y

Learn features available in online Photoshop Express: To learn these techniques, visit http://www.photoshopexpresstechniques.com/

  • Crop & Rotate—Turn it, straighten it, crop out the background.
  • Auto Correct—Automatic, one-click, optimal lighting and contrast adjustment.
  • Exposure—Change the brightness of the photo.
  • Red-Eye Removal—Removes red eyes caused by some camera flashes.
  • Touchup—Remove scratches and other imperfections.
  • Saturation—Ramp up the colors to blinding brightness, dampen them down to black and white, or anywhere in between.
  • White Balance—Ever notice how people look different inside an office with the ugly fluorescent tubes, as opposed to outside on a bright sunny day? Adjust the white balance and you change the type of lighting in the photo.
  • Highlight—The brightest parts of a photo are the highlights. This control lets you brighten or darken just the brightest part of the photo, without affecting the darker parts (we call those the shadows).
  • Fill Light—If you take a shot facing into the sun, your subject can end up too dark due to the camera’s automatic exposure adjustment. Fill Light brightens the dark area without overbrightening the background.
  • Sharpen—It’s like putting in your contacts. Suddenly everything comes more into focus.
  • Soft Focus—It’s like taking your contacts out. Soft Focus creates a subtle blur for artistic effect.
  • Hue—This one changes all the colors in a photo at once.
  • Black & White—Control how the colors are converted when you change a photo to black and white.
  • Tint—Imagine instead of black and white, you want red and white, or pale brown and white for that old Western look.
  • Sketch—Makes any photo look like you drew it yourself.
  • Distort—Stretch, twist, bulge specific areas of your photos.

December 14, 2007

Show-Hide Sections

Comments (5)

Expand All modules & Collapse all modules: These interactions are useful while we have more widget based sections in a single page.




December 12, 2007

Complext Data-table design

Comments (3)



In this table structure, data is stacked. Even without grid structure design, data is not clustered. By having first look, the data looks confusing. With in seconds its very simple in mapping with the label and the data. Look at the screenshot below, mapping is done a nicer way. Label "Quantity" is bold, even the quantity in numbers is maintained bold. High & Low attributes under the label "Intra day" is stacked and this is also very easy while reading. This screenshot is from one of the stock exchange website. This forms look simple to design, but its not.

December 10, 2007

Sorting Data in a table

Comments (0)



This screenshot is from batch mates. Its a nice way of showing the sorting and alphabetical listing. These types of interactions will be useful in New Yahoo mail, where all the contents are shown in a single page without pagination.

December 07, 2007

Avoid RadioButtons - New interaction in Digg Submit page.

Comments (0)

Digg has come up with the new interactions on submit link page. In the previous design, the radio button were used to choose a topic.

In the latest version, radio button has replaced with Text Highlighter. It is good, but has bug.

radio button replacement

Behaviours:

  1. User can click directly on topics.

  2. Even in previous version of topic selection, user can click on topics. HTML has option of linking Radio button and topic next to it by providing "label for" attribute. By which instead of clicking over radio button, user can click on topic to select the option. Mostly advance user know about it. With my experience I can say that 80% click only on radio button even by providing "label for". By having this label for and ID activated in HTML, we can say that radio button is accessbility fixed. For example, check the submit page(below screenshot) in digg, you can click on image to choose the media.

    radio button replacement

  3. On mouse over the row highlights with blue background with a border top and bottom. This is controlled via css. But surprisingly in Internet explorer, this widget looks plane, you can see that in 2nd screenshot.

  4. On click of the category, the color of the cateogory changes blue. In Internet explorer, topic turns to Bold and you have click one more time ouside the widget to get the background color for the topics.

  5. Text highlighter is nice and easy to use in this .

  6. Text Highlighter is controlled via css & javascript. This interaction wont work, If javascript disabled in browsers setting.

Firefox - Text highlighter looks neat and color variances are also properly used.
radio button replacement


Internet Explorer: In IE the page looks disturbed and above explained styles are disappeared. This is a bad coding from DIGG development team.
radio button replacement

November 29, 2007

Designing Invisible Interfaces

Comments (0)

Designing Invisible Interfaces - An Approach to User Experience for Software No One Wants to Use




Most interface designers assume that users actually want to use their software. But what if focusing on the software is the last thing a user should do? Pathfinder Development introduces the concept of designing "Invisible Interfaces" for this type of user, and illustrates our point with examples from a recent project for health care providers

November 01, 2007

Application design in health care domain

Comments (0)

Microsoft has developed what they call a Clinical UI guidelines document.

Here is an article about it:
http://www.examiner.com/p-37868~Microsoft_Helps_Developers_of_Clinical_User_Interfaces_Improve_Efficiency__Patient_Safety_With_Free_Toolkit.html

October 31, 2007

Dasher: information-efficient text entry

Comments (0)

Keyboards are inefficient for two reasons: they do not exploit the redundancy in normal language; and they waste the fine analogue capabilities of the user's motor system (fingers and eyes, for example). I describe a system intended to rectify both these inefficiencies. Dasher is a text-entry system in which a language model plays an integral role, and it's driven by continuous gestures. Users can achieve single-finger writing speeds of 35 words per minute and hands-free writing speeds of 25 words per minute. Dasher is free software, and it works in all languages, and on many platforms. Dasher is part of Debian, and there's even a little java version for your web-browser. http://www.dasher.org.uk/

October 30, 2007

Student wins design awards for stove

Comments (0)

This is very interesting and about the design.
Media Credit: COURTESY OF RUSSELL HENNING
Russell Henning's backpacking stove, the Phoenix, includes a stove, stand, fuel, and wind screen, which can be assembled into one piece or taken apart.


When SJSU graduate Russell Henning created a portable backpacking stove for a senior project in the spring of 2006, he had no idea that the environmentally friendly cooker would go on to garner international recognition and become an award-winning design.

BraunPrize and Red Dot, two international organizations dedicated to finding and acknowledging innovative designs, selected Henning's design as part of their exhibitions. The latter also presented a 2006 Red Dot award to Henning for his backpacking stove. more...

October 19, 2007

Information R/evolution

Comments (0)

This video explores the changes in the way we find, store, create, critique, and share information. This video was created as a conversation starter, and works especially well when brainstorming with people about the near future and the skills needed in order to harness, evaluate, and create information effectively.



Download Hi-res of this video. Also visit Everything Miscellaneous

October 18, 2007

Form fields - Exceptions

Comments (0)

When we provide the width of text field especially to date field, we usually give values 11 or 16 pixel width based on the date format. But there are scenarios like shown below (screenshot from picasaweb) width of the text box is extended to maximum for design purpose. To make the design prettier width of date field is extended equal to other text fields and pages looks neat. These are exceptional scenarios.

screenshot from picasa web

While creating complicated forms we are lot more concious on spacing and providing width to form elements.

Subscribe to Suggest Usability | Mails I Read in Google reader with your gmail ID.

October 02, 2007

iPhone Human Interface Guidelines

Comments (1)


Apple has published an iPhone Human Interface Guidelines
document. Guidelines has details on user environment, principle and guidelines for iphone content, metrics, layout guidelines and tips.
Apple’s iPhone presents a revolutionary user interface and interaction model. Users can view webpages, use web applications, and use built-in iPhone features, such as the email application, the iPod, and the digital camera, wherever they go. Safari on iPhone, a unique implementation of Safari, is the application users use to browse the web on both iPhone and iPod touch. more ...

PDF version is available here.

August 31, 2007

Yahoo Mail Vs. Google Mail - Which is best? Answer is here...

Comments (0)

Two month before, we did a comparative study on Yahoo Chat & Google Chat integration with their email services. Below table has the differentiation between Google & Yahoo's chat integration with email. Gmail was good in this front.

Also see:Chat integration in E-Mail: Google Vs. Yahoo

In HCIIDC Interaction designers group, lots of discussion were happening under the topic "The better email - Yahoo mail or Gmail? Anirudha Joshi posted a nice explanation Yahoo Mail or Gmail in HCI IDC forum.

Digital Inspiration has posted video on Walt Mossberg of WSJ posted Vlog on same topic. Walt Mossberg is saying that Yahoo Mail Beta is better than Gmail & Live Mail.

These discussions will help us in lots of design ideas & insights.

August 30, 2007

Usage of Alt Text in blog & websites.

Comments (1)

Showing an example for Alt text attribute for images
Alt is the Attribute of image <img> tag. Alt is the short form for "Alternate". Provide alt text has become mandatory.

Few advantages of providing alt-text:

  • Alt text helps search engine to bring up the pages
  • Helps Screen reader softwares to understand the page, which helps visually challenged people to understand the content of the page.
  • Improves overall usability
  • Helps users using text based browsers.
There are 4 types of images used in a blog or website.
  1. Decorator Image - Decorator images are generally used to bring up the aesthetics of the website. For example a spacer.gif or a Curve image or a hidden transparent gif. For those types of images we should provide a blank alt. Like alt="" . Its very important to make sure that, there should not be any space between double quotes.
  2. Showcase Image - These are types of images which will be used in ecommerces websites to show products.
  3. Link Image - Which has some action to it. For example a submit button. Its very important to provide what action its going to perform.
  4. Repeated Image - Mostly decorative are repetitive in website. Some time buttons. Its very important to provide the same alt text to follow consistency.
Few Exceptions:
  • Dont' provide the alt text if label is placed next to a icon.
  • For bulleted list, don't use bullet images directly rather provide it in stylesheets.

As per the WCAG - Web content accessibility guidelines, Alt text is the basic fixing to get priority 1 compliances.

Yahoo Mail Vs. Google Mail

Comments (0)

HCI IDC is one of and only Interaction Designers group of India. HCI IDC group is popular among Indian IT companies and User experience professionals. It is so popular that total Number of members count in HCIIDC will say total number of interaction designers in India. This group is moderated by Anirudha Joshi - Indian HCI Guru.

There were some hot discussions going on about the best email services i.e. Yahoo Mail vs Gmail.

I request every one to join the HCI IDC group. For those who are not member of HCIIDC, I have copy pasted Anirudha's reply on that topic. Its nice & here you go -

Here is Anirudha Joshi - Indian HCI Guru reply on that topic
Back in 1999 in the hey-days of the dotcom, at a seminar in IDC, there
was some corridor talk about how Yahoo! had emerged as a leading
search engine, and everyone (including myself, I confess) thought that
Yahoo! has a fantastic momentum and no one can touch it now. We were
all wrong - and Google proved it.

Personally, gmail is my favorite webmail service (and I have been
through Yahoo, Hotmail and our own Squirrle Mail in IITB, though not
recently) but I must admit that gmail took some getting used to.

The concept of labels was different in itself. But gmail disturbed one
other of my important email habits - before gmail, I used to 'leave
behind' actionable mails in my inbox till I was done with them. So a
blank in-box meant that I have been a good boy. A swollen one meant
that I have things to do. Even if you label a mail, it still stays
behind in the in-box, so in gmail this didn't work. But I got over
this one by changing my habit - I created a label called to-do and
started labeling only those emails that I had something actionable
from my side. Voila, I discovered that I have fewer to-do mails than
not-to-do mails. That actually reduced my labeling / filing effort
(though my mind went through the usual resistance curve before I hit
upon this solution). Now my swollen inbox merely means that I have not
downloaded a backup to my hard disk in a while.

So gmail forced me to change my habits, which might sound contrary to
user-centred design, but it isn't. Allow me to explain. Email is a
frequent, long-term use application to most people and in frequent-use
apps, it may be OK to compromise learnability with speed of use of
frequent tasks. (If you don't use email frequently, perhaps gmail
isn't going to come in the way - only frequent users file if at all).

And I have some data. In my teaching, when I talk about designing
'known products' I give the example of gmail. At this time, I usually
ask if there was anyone in the class who did not have a gmail account.
Ever since I started asking this question, I have not yet found a
single person who doesn't. (The same does not apply to almost any
other email product, though I must confess that data is not rigorous
there).

So why does everyone (in my class) have a gmail account? When gmail
was launched, it was certainly not the first webmail app. There were
dozens of free webmail apps around for over a decade and anyone who
had an email account already had one. So here is an attempted answer:

OK, gmail had a few of technology firsts - one GB email was a big draw
(many people first associated the name gmail to that) and so was AJAX
- it saved a lot of round-trip times (e.g. expanding the reply box
in-line, attaching a file in-line etc.). And of course there was the
automatic contact building that was Google page-ranked (not
alphabetically sorted). Then there was integrated chat that was added
a few months into the product. But all these technology features were
fairly quickly copied by other, established providers. What's more,
gmail still does not support IMAP (and I used IMAP for a while, just
before I switched to gmail). So technology and features is not the
answer.

Gmail also had an interesting marketing first (at least for webmail
products) and this one was completely counterintuitive - you COULDN'T
just sign up, you had to be invited and had to have another email
account. I remember this made a big buzz for a few months after the
launch, and I think the curiosity ensured that many who had an email
account managed to get themselves an invite and gave it a try. The
fact that Google was already an established brand of young, cool
technology helped.

But all this has now become passe, but gmail continues. Why? One
answer could be thread view, and this is true at least in part -
though there are many email products that support thread view, none
are in the sense of gmail. Thread view in gmail actually saves me time
(for example, this thread was lying in my in-box for the past 10 days
with dozen+ replies, but I could read it all in one go, in context,
and then reply - other thread views that I have used in the past
required me to still open each mail separately).

In the end, I think everyone in my class still has a gmail account now
due to its (as has been pointed out) better information visualization
and less visual clutter (though I find the colours and rounded corners
a bit dated).

So, in summary, you don't have to be the first to make a 'dent in the
universe' (it helps, but you don't have to be). You don't even have to
be 100% compatible with what exists - 80% will do just fine. Thinking
out of the box, breaking the rules, brand and clever marketing plans,
including viral effects, help to get you a foot in the door. What
sustains in the long run is good, simple design that works and solves
real problems.

So, do you think you can beat gmail?

Anirudha

August 28, 2007

Adobe Dreamweaver cs3 review - 2

Comments (0)

Dreamweaver cs3 not only attracts developers, but also designers. Adobe has integrated lots of nice feature in Dreamweaver which a designer can enjoy, its an intelligent integration with Flash, Flex, Photoshop, fireworks and contribute.

CSS: Dreamweaver cs3 is tuned to create CSS layouts. cs3 has also has the advantages of viewing, editing, moving styles within or between files. There is also a facility to do a browser compatibility check for CSS layout.

Coding: Coding in Dreamweaver CS3 is very very easy than any editor available now. Apart from the color coding, line numbering can also be colored. Commenting is very simple.

Editing code: If there is a 100 line of javascript, that function of code can be collapsed for easy editing. XML can be integrated into any code by Drag & Drop.

Support with Technologies: HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion®, ASP, ASP.NET, and JSP.


Style Rendering toolbar: This is another cool feature Dreamweaver CS3. Page can be viewed as just as how end user will see it. HTML can be simulate to see PC screen, handheld device, or printout.

Latest Dreamweaver cs3 has nearly 1000 downloadable extensions. And this is one of the best version of CS3.

If you are using Dreamweaver 8, Its recommended to upgrade to CS3. Request you company / department for the upgrade of dreamweaver CS3.

Online free photoshop - Mini version

Comments (0)

Photoshop is one of the expensive tool for a designer to buy. But for ameteur who does smaller task on picture editing tool need not to buy photoshop here on. Flotoflexer is an online photo editing tool smaller tasks can be achieved. This software can be really a useful tool for bloggers. This tool has five main menu - Basic Tools, Color Effects, Distort, Beautify, Text Tools, Advanced. Under each there is a tool by which image can be edited. We tried with image resize, image cropping, rotate, flip, draw, erase, fill & Color Grab, it works nice.
Fotoflexer has various features -

Color effects - Bronze, Sepia, Grey, Invert, Rotate, Painting, Stamp, Cartoon, pop art,
Distort - Twirl, Bulge, punch, stretch, squish
Beautify - Autofix, smooth, sharpen, fix red eye, fix blemishes, smooth wrinkles
Text Tools - Add text, Speech Bubbles, thought bubbles
Advanced - Web cam, smart cutout, smart recolor, opacity, adjust, contrast
Best part is you can take snapshop from webcam, As this option is not available with the windows pc. There is also a facilty to upload photos from Fotoflexer to flickr, myspace, picasa and facebook.
You don't need to sign-in to use all these features, to save file its asks for login details. And signing in is also as easy.
Thanks to Techcrunch to let us know about Fotoflexer.

August 15, 2007

Usable content for Blog & Websites

Comments (0)

Most important thing apart from design, navigation, and interaction is "Content ". For a successful blog or website proper content is the primary key. Which is the appropriate content for the readers and customers?

Product: Coppertone is a very famous UVA/UVB protection for kids.



Lets take a scenario: On Sunday morning Kathy (mom of 3 years) is helping his son tom to get prepare for swimming lessons. And accidentally tom sprays Coppertone into his eyes and he started crying & screaming. Immediately mom understands the situation and reads the instruction provided over the spray and it says, "Rinse the eyes thoroughly". And now mom faces the problem, his son is so young and he doesn't allow her to rinse the eyes. Since its Sunday morning her pediatrician is not reachable over phone. Now she immediately login to internet and looks at the Coppertone website to find what needs to be done.

Now with this scenario, what type of content does a user needs? Coppertone Website says "Rinse the eyes immediately". But situation is different for the mom.

One of the most efficient ways to write content should be Scenario Based. Apart from the technicalities, it’s also very important to understand what exactly user wants from a website. It’s always very important to write down different scenarios of the specific persona of the product. And validate the content with the listed Scenario. Scenario based content & being honest with customers real time issues with improve the loyalty over the product.

Now, you can do a task analysis of yourself with this scenario in http://www.coppertone.com/

August 11, 2007

Innovation & User Interface

Comments (0)

Douglas Merrill, talks about innovation at Google. Good video to watch.