September 4, 2010 in Blog, Resources by Hyena

Free Sketching and wire framing KIT

Sketching and wire framing is the core of interaction design. We prepare them to get the concept communicated to the stakeholders and the development team. A typical wire frame has placeholders for each element of the webpage. It is important to use good tool to wire frame, usually they have stencil that makes it easy to create the wireframe.

Below are few of the best sketching and wire frame tools.

1. Sketching & Wireframing KIT

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects. You are not allowed redistribute it.Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects. You are not allowed redistribute it.

Facebook tool kit, will enable to create Facebook UI elements. You can create UI for Facebook applications.

5. Mac OS X Interface

Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors

6. Eclipse Stencil for OmniGraffle(TM)

This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM)

7. Web UI and Buttons

This set contains all of the following elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the psd file). Here are the individual elements included in the set:

• Control buttons including arrows and basic symbols
• Info and text boxes
• Breadcrubs, buttons, and other navigation elements
• Drop-down and collapsible box styles
• Speech bubbles, search forms, loading elements, and more…

8. Yahoo design stencils

Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics:

September 4, 2010 in Blog, Resources by Hyena

CAPTCHA hidden loop hole? Best SPAM protection tools

We all register daily or monthly basis in variety of sites. You must have seen the IMAGE that is there in the end of the form, we have to write the text image. We did registration analysis of few sites. All the sites which we are showing has confusing images in their registration pages.For Xanga.com we tried to register 3 times and we failed to reconize the image.

The solution to check SPAM is

A ‘Captcha’ (completely automated public Turing test to tell computers and humans apart) is a challenge-response test most often placed within web forms to determine whether the user is human or a spam bot. The purpose of CAPTCHA is to block form submissions by spam bots, which are automated scripts that post spam content everywhere they can.It usually involves an image showing some distorted text, requiring the user to type in what they see in the distorted text

CAPTCHA loophole

One in 10 users fail to pass the Captcha test. A good point is captcha  images can make or break the registration process.If users are not able to reconize the images, then they will leave the page. Exactely the same thing we did too.

Who is in loss, absolutley Xanga.com , so our advice is to take a good look when you are choosing the image processer(Captcha)

Best SPAM protection tools

Having said that let us suggest some options to selcet the Image processor.

1. Snapshot

A piece of code inserted in your form, will do the magic.

2. ReCAPTCHA

A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs.

3. Text Disguise

Text Disguise has developed an API that never actually transfers the word to your server, or to the user’s browser – eliminating any fear of someone/something listening in on the conversation and avoids the pitfalls associated with trying to encrypt the word and persist it on the client-side.

4. Mollom

Mollom is a web service that helps you identify content quality and, more importantly, helps you stop spam on your blog, social network or community website. When site moderation becomes easier, you have more time and energy to interact with your community.

5. Asirpa

Asirra is a human interactive proof that asks users to identify photos of cats and dogs. It’s powered by over three million photos from our unique partnership with Petfinder.com. Protect your web site with Asirra — free!

6. OpenCaptcha

Captchas remain the most effective, universal method of preventing automated spam currently available on the web. While services like akismet and linksleeve provide valuable protection, they are dependent upon widespread adoption to be successful. When used correctly, captchas just work.

7. Captcha

What is CAPTCHA?

CAPTCHA is an acronym for Completely Automated Public Turing Test to Tell Computers and Humans Apart. As the name suggests, it’s a kind of test that can determine the probability of the solver being human, allowing webmasters to tell bots and humans apart.

8. WebSpamProtect

WebSpamProtect.com allows you to instantly add verification image (CAPTCHA) to your web site and protect your forms against spam robots.
In order to protect your web form, our system requires that you install a small piece of code onto your web page. Our code requires that your web site support PHP, Perl, ASP or ASP.NET.

9. Form Armour

10. 3D Captcha

3DCaptcha is the “captcha nice to humans, bad to machines”. It is written in PHP and features:

• A new approach to captchas, using human’s spatial cognition abilities to differentiate humans from machines.
• It uses a markov-chain to generate words that resemble human language and are easy to type, yet avoid dictionary lookups.
• It filters profane language.
• It’s easy to deploy.

11. Vidoop Captcha

VidoopCAPTCHA is an image-based verification solution used to distinguish a human from a computer program, protecting web sites against malicious bot attacks. When compared to traditional text-based CAPTCHAs predominant on the web, VidoopCAPTCHA is easier on the user.

Supported technology: Multi-platform – PHP, Python, Ruby, .NET.

12. IronClad Captcha

A free solution for your websites.

HYENALABS is a User Experience Design consulting company based in India.

Website

www.hyenalabs.com

September 2, 2010 in Design by Hyena

User interface design for Senior citizens

I have seen senior citizens using technology, computers are used less but you can easily agree that Mobile phones are widely used by senior citizens. We will jot down the design guidelines to follow for senior citizens. Most of the time a mobile phone is made for a user persona of age 18 to 80 years, so we can have a look at some of the good considerations to keep in mind.

Senior citizens are also using mobile devices. What is the basic design idea that needs to be taken care? It is important we design the mobile devices for their use. The below features are very important in senior citizen mobile phones.

• Large keypad with prominent keys

Senior citizen’s hands are less active & not precise when they will punch in the numbers. Their fingertips are large so the key should be big enough to exactly fit. Elder people visibility also gets a little dim so a large key pad will help them to dial the numbers comfortably.

• Bright Screen

The display of the screen needs to be bright as senior citizens vision deteriorates by age.

• Loudspeaker phones

Hearing incompatibility of senior citizens can be handled well by providing loud speakers in the mobile phones. I got this idea as I see my grandfather facing the same problem & not able to converse with me on the cell phone easily.

• Affordable design

Not all senior citizens are so lucky that their family members will give a mobile phone as a gift to them. Senior citizens are on a limited income so the mobile phones needs to be affordable enough for them. 

Mobile phone design is a different aspect in itself as it involves creativity, setting the mental model for the user’s mindset. The content to include is less, a lot of filtering needs to be done for the same. The most important content needs to be displayed upfront, users needs to make the minimum input from the keypads. The context needs not be wiped form the users mind & so on. The above paper can be good collections of design guidelines to see forth when designing handheld devices.

August 26, 2010 in Design by Hyena

Bing – has to also improve spam verification

I agree, there is always a scope for improvement. Bing is a good search engine, but i can tell you why they are lagging behind Google

Bing does not understand its user’s. Ok now you must be looking for a proof.

See the spam verification images from Bing.

A suitable solution for this can be considering the below points.

• Provide a local image reset link
• The image can be more legible
• Purpose of this image – to know that you are not a Spam etc, to prove you are human

Suitable solution sample

August 25, 2010 in Resources by Hyena

Mature UX customers – it is not a myth now days

We got our new client for a UX design project. We respect all our customers and their knowledge about their business and their intentions. We always listen proactively to them, and try our level best to gain their perspective.

Well our new customers sends us their business overview in a word doc with 90% of the business needs. Who are the users, what is their business need, why they are looking for the solution etc was well documented. Our UX experts will have little difficulty in getting in the stakeholders shoes and move ahead for the design.

Our responsibility is capture the Business needs and match them to the user needs. If we are able to do this properly, i guess we have made a good product or application.

How to match the business need and user needs

To match both, i guess and i am sure creating a persona is good way. The persona should have 3 broad categories.

1. High priority
2. Medium priotity
3. Low priority

I have uploaded a sample perosona, for your information.

Download the presentation here: user personas by hyenalabs

Watch it now!

August 23, 2010 in Design by Hyena

Information Architecture design guideline for mobile apps

Information Architecture is the combination of organizing, labeling & navigation schemes within an information system. Content, Context & users are the main areas of focus when we design the information architecture of any applications. The content needs to be scaled down to the minimum for Hand held device IA design. The filtering of content needs to be done, a minimum amount of content has to be provided to the users. Least number of inputs by key strokes is asked from the users.

Some insights for IA design for mobile devices

• Real estate price is too high in handheld devices

The real estate is less in hand held devices. We cannot even think of leaving this idea when moving to the drawing board.

“Less is more in Hand held devices”

• The text “I” in IA of Handheld devices is filtered

Information is of two basic types important & not important in context to a situation depending on the scenario & requirement. The “I” in handheld devices needs to be small “I” instead of the Big “I”. The alphabet “I” is taken as the symbol for INFORMATION here. The stress is use the minimum most important information to play around handheld devices. Asking the users too many inputs is not a good practice.

• Iconic representation of information

Icons are clever way to say long words, after all a picture is worth thousand words. We all are surrounded by icons everywhere. See the image below Handheld devices need intuitive icons that are globally accepted to be effectively used with ease.

• Effective Color combinations can increase the IA of Handheld devices

The focus now days are to provide smaller internet experience to users through hand held devices. The users who are slowly moving towards this trend are well versed with internet technology & personal computers. Taking advantage of this, in an effective manner design the IA in suitable colors. Red text message on internet means some error happened either form your end or system end. Green text message means the good news.

Similar type of color combinations needs to be used in handheld devices. As handheld devices are used in different locations like inside the house, near a water body, in deserts, in icy mountains etc. The intensity of light, falling on the screen will differ; this has to be taken care by appropriate use of foreground & background color usage. If the device is having only two colors like light background & a dark text color then what to do. Here the learning’s can be taken from  earlier non color phones, the way they used to present information focusing on the important information. I.e. making the not read SMS bold & read SMS normal text size.

• Increasing the User Experience on Black & White screens

To provide the basic service to the lower societal pyramid of the people, companies made products that are affordable. A color handset will obviously cost a little more as compared to the non-color one. In some cases, color screens may not be possible or not required, as the utility does not suggest so. To give a better User Experience on non-color phones an effective strategy is to have a static stunning image on the screen as the background. Illuminate it by LED’s on all the sides to make it glow. Display the black text above the screen just placed on the image. Make sure the background image is light enough to display the black text easily. To the user it will be like working on a color screen.

• Importance of intuitive Back button

The users using the hand held devices are coming from an internet background, if not all most of them. They are aware that clicking on back button will take them to the previous screen on the internet however; the case is a bit different here. In case of internet, the previous page information is stored in cache of the computer memory. Hand held device is not designed for such purposes, as there is memory space constraint. Upfront Demarcation of the home link & the back button in handheld devices should be used. Clicking on the home will take the user to the main screen & clicking the back button will take the user to the previous menus.

• Information Depth/Breadth balance

The small screens of mobile Internet devices, combined with the increasing complexity of mobile tasks, create a serious obstacle to usability in the mobile Internet. The complexity of the tasks, the more the number of steps the complex the task completion on mobile phones becomes. The depth of information needs to be kept minimum, instead try to organize the information in a breadth wise structure.

• Circular Key controls Design

The data available on the hand held devices needs to be modified, written, played etc. To accomplish this intuitive & easy keys are required. On the main screen, mostly use of icons is done. The beauty of circular keys is that with one key press you can reach to different section depending on your choice.

• Horizontal layout is dangerous on main page

If the main sections are more & there is a Circular Key available in the hand held device then the best approach is to go for icons. The above approach is appropriate if the only medium for selection is key pads not any stylus/touch screens. Use appropriate icons & displays the name of each icon as the user scrolls through them on top of the screen. In this way, we can represent information easily. Change the color of the text & some areas as the user scrolls through the icons. The color change will grab the user attention towards the name of the section & he can select it properly.

Good to have on main page A bit difficult main page if touch screen/stylus is not present

• Consistency in Handheld device design

Companies usually come up with new models year after year to meet the growing exceptions of the users & market competition. As the company succeeds to sell more of the devices, it should try to achieve consistency in the new designs in terms of labeling & navigation. Most of the cases due to brand loyalty & popularity users upgrade the handheld device from the same manufacture. Consider the case if the manufacture changes the keypad keys & some here & there modifications in navigation scheme. Usability test shows the slower rate of task completion in these new handheld upgrades from the familiar brand users. Maintaining the basic consistency standards will not harm the company much but gain user trust & confidence in the process of usage.

• Lower the rate of screen refresh by horizontal placing of content

It is very important to lower the number of screen refreshes by using intuitive navigation schemes. If screen refreshes while the user is working on the screen he loses the context, as the screen is small to visually attach to his mental model in order to remember.

August 22, 2010 in Design by Hyena

Interaction design for mobile applications

User experience on handheld devices is a critical thing to decide, as there are different types of hand held devices available in the market. Utility of mobile devices are varying. The communication radio made for the defense forces has a different pattern of usage as compared to the mobile phones.

These radios are designed to withstand enormous heat, sound, rains, & tough handling, as they are made for combat situations. The ordinary cell phone may stop working in a combat situation, as they are not designed for the same. If this is the general base line then how we are going to measure the User Experience on these hand held devices? A good question indeed. The answer lies in focusing on three aspects of User Experience.

Interaction Design

Interaction design is the science of defining the behaviors of products & applications a user interacts. Interaction design revolves around software’s, mobile devices & electronic devices. Interaction designers work on the work flow of new applications, they perform task flow analysis & improves the interaction with the applications.

Interaction design areas

The aspects of Interaction are important when we go for Mobile devices. Studies suggest mobile devices are used for a particular context of significant importance surrounded by environmental distractions. Interaction for handheld devices can be summed in few words.

“CONTEXT IS EVERYTHING – When you lose context you lose everything”

The user accompanies mobile devices everywhere. To parties, travelling, office, movies. Mobile devices are inseparable from users. On other hand desktops cannot be taken everywhere so easily, techno-logical advancement like laptops are only taken to meetings & work places or when we travel for a business trip.

The hand held device is also surrounded in different context like connection type, carrier provider policies, type of device from feature to functionality. The interface of the device acts as the layer on which user & his context meets for a purpose. We are at the brink of providing a mini Web experience to mobile phone users. The opportunity looks dormant,  we will engage the customers at any time any place, and the business value implications are immense.

Interaction design Insights for Handheld devices

Interaction design for hand held devices is a bit different in comparison with computers. Let us explore the differences.

• Processing capacity of the handheld device will have a limited impact on the performance
The mobile phones will use the resources from different servers/applications & display the results on the phone. Mobile phone can become a remote control for smart environments, and serve functions including personal identity, wallet, ticket, entrance key, activator and personal display.

• Hand held devices will make Find ability easier
Mobile phones are inseparable from us now. GPRS, RFID, Location tagging on Google maps will encourage the users to become aware about the surroundings with ease. Some smaller companies help you to locate your friends on a map. Find ability will become easier with mobile phones.

• Mobile interactions are small steps of the big user goals
Finding the PNR status of the railway ticket through mobile phones, while boarding the waiting list ticket is a small step helping the user to make his train journey comfortable. Mobile devices will help the end users in making their life simple by taking simple steps.

• Mobile interaction will extend beyond the device
Users can fill a form on the personal computer on the internet & they can see the same information updated on their cell phones. If the flight is delayed, a SMS comes in their cell phone to inform them.

• Mobile as continuous companions will open new experiences of different intensities
Mobile phone gaming have come a big way from the beginning dots to bricks arrangement, the games have matured to provide respectable graphics & videos on the cell phones. This particular area is going to mature & move towards a great user experience in entertainment perspective through mobile devices. Today iPod’s, MP3 players are one-step ahead for a great user experience.

• Silence will be respected by Mobile devices
As continuous companions of users, mobile phones have to respect the privacy & Zen of users. We cannot design the interaction of the mobile devices that makes them noisy, they should avoid disturbing the user unnecessarily & they needs to keep the user focus when it is very important like making a money transaction through mobile phones.

• Handheld devices ease of use is first bait.
To make a good handheld device it need to be easy in use. The interactions should only take the steps that are most important, unnecessarily steps, data inputs should be completely removed.

• Handheld device interactions are task oriented
Hand held devices are smaller & easily carried. The area of interaction is less for the users. The data that can be displayed is also smaller. Content and activities must be desired & requested. This makes the interactions task oriented; we cannot beat around the bush here. The context’s are chosen & solution is provided to resolve that.

• New mobile experiences compete with legacy user models
As mobile services expand, design must take into account customers’ reliance on user models that come from prior technologies. We still use the word “dial” to refer to using phones that no longer have rotary dials, experiences using personal computers and landline telephones will shape initial interaction design schemes on handheld devices.

August 22, 2010 in Design by Hyena

Mobile apps are here to stay

Handheld devices are common today. They have become our constant companion. Mobile device are always with us i.e. Travelling to office, in office, in park, in malls. What is making them eligible to stay close? We are looking for similar answers in below sections & Mobile device design for good user experience to make our lives comfortable.

The time span for which we live with Mobile devices is going to be larger sometimes more as compared to our loved ones. Close proximity of mobile devices suggests us to design a good user experience with them. Users are expecting small internet experience on mobile phones. To provide rich internet type of experience on mobile devices needs UX expertise & common sense. The hand held device interface is an interaction area overlapped by User activity, environment & culture. The roots of user experience on handheld devices are deeper than what we think. In this paper, we would try to explore the different aspects, future, design guidelines for hand held devices.

Human Computer Interaction
 

HCI – Convergence of HCI towards Mobile devices

Most of us have heard about HCI, for the readers who are new to HCI the question comes to them, What is HCI?
“Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.”
HCI focuses to improve the interaction between users & the computers to make computers more receptive towards user needs. The computers are shrinking themselves into mobile devices now days due to the growth of embedded operating systems. There are many other factors which is making this convergence at a fast pace. Now the question is should we fear this convergence, as we cannot match the internet richness on the Mobile devices. I suggest we should welcome the transition with a warm heart & user UX skills to design usable, user friendly devices that makes the target audiences happier.

User Expectations form the Mobile Devices

Mobile devices are supporting multiple services for users. They help users do many things other than receiving & making calls from them. As per user survey, 21% of the users want to browse the internet & 13% users are keen to share content on their mobile devices.

Factors promoting Mobile devices services popularity

Technology is helping Mobile devices to evolve at a faster rate. Businesses are keen to provide Industry specific services for customers to win their loyalty & develop business edge. Below are some of the factors, which are making the mobile services more prominent.

• IT & Software majors like Google, Microsoft, Symbian, Qualcomm, Montavista software, SavaJe, are actively entering into Embedded Operating system. Microsoft with Embedded Standard 2009, Google with Android, Simian OS, iPhone OS, Palm OS are fueling the Mobile device services market.
• Mobile phone penetration is increasing rapidly, as per Portio Research; a market-research firm global mobile penetration will reach 75% by 2011.The mobile users will be seeking mobile-based services.
• The convergence of internet and mobile phones creates the mobile internet, which in fact provides the user with extended possibilities in the mobile communication.
• WAP (Wireless application protocol) is growing supporting developers of mobile, interactive data services for the GSM (Global System for Mobile Communication). All contemporary mobile application rely on WAP.

As we are slowly moving from computers to hand held devices we are looking for other alternatives for interaction with these mean small machines which are capable of tracking your position using GPRS, sending messages, e-mail & get specialized services like tracking the trains in Germany. You can track your luggage, car, even your wife by fixing a RFID (Radio frequency identification) tag under her shoes. Just using your cell phone. Quite impressive, there are immense possibilities hidden in Mobile devices.
Now days technology has given better interaction tools like stylus, touch screen, biometric identification to make our interactions more sophisticated with handheld devices.

August 15, 2010 in Design by Hyena

Best UX cartoons for you

We have collected some inspiting UX cartoons. These cartoons, are illustrative in nature and storkes a smile on your face. You can comment on these cartoons. Each one of them try to teach a lesson.

You can download the UX Cartoon pdf here.

Where is the UI team
Usability testing Lab
Super ATM
Save and Cancel
One size fits all
Mera wala blue
I am also a user
Designer Help