Ducks @lexie-ea-blog - Tumblr Blog

Search Function On Mobile Devices

I had thought before today that there was only one type of search but I was wrong. There are in fact seven different types of search in the world of mobile devices. They are: explicit, auto-complete, dynamic, scoped, saved and recent, search form, and search results. They can work by themselves or together.

Explicit Search requires the user to open up the search bar and enter information, and choose to complete or abandon action. This is a great option to have with an auto-complete search.

Auto-complete search shows possible choices while in progress in the search. It allows the user to continue to type or use one of the provided selections. These results can be grouped in like categories.

Dynamic search displays results as you type a search term.

Scoped search allows you to filter your results by category before submitting. A best practice rule for this type of search is to have 3-6 filters.

Saved and recent has a section for the user to choose from one or both before entering a different search path.

Search form has multiple fields for content in the search.

Search results can appear two different ways, either on their own page or within the same page. Then users can sort or filter content from here.

This site below provides lots of well designed interfaces for search functions on mobile interfaces.

Pattern TAP - Interface Resource

Have you ever found yourself stuck searching the internet for examples of a web, tablet or mobile interface? If you have, check out Pattern TAP. You can search the site for different platforms or styles of interfaces.

If you come across a great site you can contribute a screenshot of it; it is a super simple process. Then you can tag it with different styles, typographies and platforms to make it easy to locate.

For the love of wireframes!!

http://www.flickr.com/groups/ilovewireframes

The flickr account above is filled with wireframes from the most sketched out to a completely integrated design. They are all filled with labels and detailed annotations. These annotations outline actions on load, on hover, and on click. They all have an aesthetic that varies as much as any designer's creation. I found this interesting because I thought that it wouldn't change as much due to less personal choice and more dependence on function, which generally follows best practice. However they all follow the intention of a wireframe and communicate the structure and function of the content. I have learned that in agency life these are key documents that get used from the initial client meetings to design comps. and the coding of the live site. Because there is such a dependence on function your wires must annotate any special functions or actions effectively.

#wireframes #ux

UX Tools

This post is about a great little tool designed for web designers or UX fanatics called Mental Notes. We all have got so involved in a project that we forget to stop and ask the question how will it be used/seen? Mental notes is a set of 50 cards, each card describes a psychological insight to human behaviour and suggests ways that this can be used in digital design for things like web sites and apps.

This tool is a good reminder to all of us to pause and think of how users will interpret the content we create. It also reminds us that people are generally predictable and you can't push the limits of human behaviour too far or your design will not work.

#ux

Explanatory Text in a Drop down

Today at work I came upon a question of explanatory text in drop down fields and whether it helps or not. I took some time to research and find the answer. I combed through the internet and found a general consensus. Explanatory text in a drop down that has a label does not need explanatory text because users can use the label to determine what the content is. This can also help users identify fields that they have filled in already be scanning the boxes for content and the boxes will appear empty. However if there are two or more drop downs grouped together explanatory text can help the user determine the content. This can reduce the frustration of the users by reducing uncertainty. So there are two situations that require different treatments of explanatory text. Ultimately it will come down to audience and their needs at the moment that they encounter the drop down.

Drop Downs

I have been exploring drop downs and found a page that provides 50 different examples. Who knew there were so many treatments for one object. Some design elements that are generally treated across the board are:

Rollover affect with color or typography.

Only one level in the drop down.

Categorization or particular order to items within the drop down.

If there are more than ten items in the list they are put into categories and displayed horizontally.

There is an increased use of pictures or icons that reflect the content of the page.

I think that these are important elements to consider as they probably have a significant impact on usability and on users taking the direct path through the site.

Web Forms

I am completing my internship and have been working on redesigning web forms. I love redoing forms because they are such a small but key part in creating a good user experience. If your user experience is poor you may not have many people completing the task and taking their experience/business elsewhere. I have learned a lot about field length, error messaging, alignment, labelling and hierarchy. I am going to list my personal best practice rules.

1. Field length should come in 3 lengths. The longest and then half or a quarter length of the longest field. The length should be appropriate to the content and I think shouldn't be longer than 35 characters.

2.Error Messaging this can be a complicated area of forms because of technical limitations. Having inline errors and errors on submit is my best practice. Showing this is case dependent but shouldn't interfere or distract users from the form.

3. Alignment and labelling. The fields should be stacked vertically and left-aligned and the label placed to the left of the fields and right-aligned.

4. Hierarchy. This is key and requires grouping and logical thinking about what users will expect to see first and need to fill out with the most care. It is that content which should appear first.

These are just a few things that I have noticed that seem to be common in the world of online forms.

Mobile Design Pattern Gallery's Photostream

http://www.flickr.com/photos/mobiledesignpatterngallery/with/6976846763/#photo_6976846763

This flickr account can be a great research tool when trying to design a mobile interface. This site contains screen shots from the most regular to the most irregular interfaces. Each page contains a screenshot and a page name. This site has everything from document pages to login and shopping features. Some of my favourites on this site are the tube station site and new evernote page. I think that both of these are super functional for smart phones and touch experiences.

If you're ever in need of inspiration or examples for best practice rules I would recommend checking this out!

#Flickr #mobile #ui

Creative UI Design Examples for Great UX

http://www.awwwards.com/creative-ui-design-examples-for-great-ux.html

In the world of UX we have the ability to design or influence the design of a user interface for the web. As we make advances with technology and the way we can interact with it we can become more creative with the design of it. This webpage outlines some great designs for web tablet and smart phone use.

I observed a large emphasis on the dynamic way users interact and the heavy use of icons in all of these designs. All the designs have a clean appearance to them with the option to explore content in more detail. Some of my favourite things are the slide action used to fold pages to look at other content or expand and collapse sections.

#ux #user experience

Google Goggles

I have just been introduced to google goggles and my mind is blown, so today I will talk about how google markets this app on the web and how it the usability and user experience within this app.

First I will talk about this app on the web. I was curious about this app and consulted "the great google" and arrived on their webpage. I got to see how this app works with different objects and got the app directly sent to my phone. I think that as far as web content containing related apps this is a great practice to have the content messaged directly to the users. It allowed me to choose a iPhone or android device and have the app sent to my phone sent via message to my phone. I loved this experience because it reduced my effort to go search for it on my phone have have the possibility of not finding it.

Once I opened the app it has a great introductory page using icons to explain the best and worst functions for this app. I immediately started to explore it and love the user experience created and would recommend others to take a look.

Which Test Won

http://whichtestwon.com/

This has become my favourite weekly site to visit. Every week there is an A/B test that you can guess on that has a substantial affect on the site's performance. I love comparing the two versions and seeing if I'm right then reading what the differences are. The results often shock me that the change made such a difference or that the version I prefer was not the most usable. They offer free tests sometimes on your own site which might be helpful for any web designers or web based experience architects.

#usability #user experience

90 percent of everything

http://www.90percentofeverything.com/

This is a website for the experience designer, user researcher, and usability-concerned individual. It offers a wide range of topics from dark patterns to mobile. In each section there are a number of postings that you can review. They also provide an interesting reads category which is packed full of great content.

My favourite article on this site was the "5 stages of coping... with user research." The five stages are denial, anger, bargaining, depression, and acceptance. I have definitely found myself going through these emotions myself. At the end of the article they recommend having a facilitator that is aware of basic usability practices to help moderate this with clients to help you move through these stages efficiently.

#UX #usability #User experince

Konigi - Showcase

Konigi is a online tool for ideation and wireframing. This site offers a showcase of different interfaces recently created. The showcase offers a wide variety of examples with a search feature to draw inspiration from. They have popular interfaces like that of Pinterest and Nike.

This site also offers wireframe icons for omnigraffle and axure for purchase, however the templates and stencils are all free downloads. All of these can be great tools for wireframing and can help make them all look as professional as possible.

#wireframing #konigi #user experience #ux

NN Group

http://www.nngroup.com/

This site belongs to the Nielsen Norman Group. The site's tag line is "Strategies to enhance the user experience" which fits the site's intention well. It offers information about usability events, services, documentation and competitions. If you need any foundational information about usability this is a great site to explore.

#usability #user experience

User Experience with Dr. Susan Weinschenk

Watch this Video about user experience:

http://www.youtube.com/watch?v=O94kYyzqvTc

This video talks about user experience and the importance of this area of design. This video talks a lot about the return of investment in this type of work. The three top reasons why projects fail have to do with UE. They are: badly defined requirements, poor communication among the team, and stakeholder politics. UE designers can fix these by using some of the tools they possess and conduct stakeholder interviews, user research, user testing, and user centred design. UE designers can prove that the company can improve their business by creating a better user experience and they can recoup their investment. Some areas that you can look at to provide a measure is the site's conversion rate, abandonment numbers, help contact numbers, training needs, errors, and user or development time on the site.

#user experience

Auto Advance to Next Field

An auto advance field is a text field that jumps from one field to another as soon as a field is completed. Currently they are not treated consistently throughout the web which begs the question of how to use these?

After looking at the stack exchange question and answer about this, the most consistent answer about this is that that it is better not to use them. This is because it can shock or mislead your users to the wrong field especially when users use the tab key. However if you have an experienced user that fills out the same form often it may be more appropriate because the users won't be shocked by the movement and it could help them complete the task quicker. Another instance where it is appropriate to use this function is when there are multiple fields linked together like a phone number, where the area code and first three digits and last four are in separate fields. So this function is dependent on the experience level and frequency of use the form will receive from your users.

#Forms #fields #user experience

Stack Exchange

http://ux.stackexchange.com/

This is a great question and answer site for user experience if you are stuck on a problem of just want to explore the world of UX.

Trending Blogs

Recently Viewed Blogs

Ducks