background preloader

UI Design Pattern Library

UI Design Pattern Library
Related:  UX/UI repository(design patterns and templates)

Interaction Design Pattern Library - Suggest a pattern Have you seen new examples of patterns out there that have not been described on this site? Send me a link to an example and I'll add it to my to-do list. Suggest a pattern Latest comments Form (Lucas Gwadana) Sometimes the ERROR handling is not explicit enough because when a user makes an... Map Navigator (Marcus) For print pages etc static maps are still relevant. Accordion (dellmre) Ajax accordion samples with source code Autocomplete (Zorg) I believe the name of this pattern to be misleading. Slideshow (Joshua) Slideshows on Homepages can be very beneficial.

Main Page - Social Patterns amazon Main Page - Social Patterns Persona Format - Fluid Project Wiki Fluid Persona Format This persona format was created to organize information in the Fluid Personas. The format chosen was based on the competitive analysis of many persona examples below. Page 1: Summary Page 2: More Details Comparative Analysis Todd Warfel Example Persona From: Positives Nice categorization: "The Moderately Seasoned Professional" Nice tagline: "I'd like to see a good, better, best." Negatives Persona doesn't have a ton of personal details, so he may not be as humanized as he could be. Chopsticker Example Persona PDF version of Timothy Powell Persona Nice graphic design Very compelling picture Very interesting personal details that give you a sense of his personality ("I don't suffer fools!) Tagline is a little long Details in the left sidebar aren't arranged very well (no headings) Not super easy to get an "at a glance" sense of who he is Kivio Persona Chart From: Student

Axure Design Pattern Library v2.0 | A Clean Design This is Version 2 of the first Axure stencil library. Demo the HTML OR Download the Axure (.rp) File What’s new in this version? I’ve gone a little nuts with some of these. There are a few new techniques, described in my last post about Click and Drag simulation, as well as some simpler but useful widgets. AJAX Field ValidationCarouselCarousel with simulated “Click and Drag”Field ValidationHover TipiPod MenuMapMap with simulated “Click and Drag”Progress BarSelf-Healing Delete from ListTabs Left The “Click and Drag” widgets are still a bit rough around the edges, so I’ve marked them “beta” and recommend against using them for user testing. What if I want to add something to this library? People have contacted me interested in contributing to the library, and I think that’s a great idea.

amazon Five kinds of 'alt' text Virtually every web designer I speak with is familiar with the ‘alt’ attribute: the part of the html ‘img’ tag that you use to provide an equivalent alternative for people who are unable to see the image. This includes people who are using a screen reader or people who are browsing the web with images turned off. What’s less commonly known is that there are five different classes of image used on web pages and each of those images requires a different approach to writing the ‘alt’ attribute. The five different classes are: Eye candy.Clip art and stock images.Images that express a concept.Functional images.Graphs, complex diagrams and screenshots. The ‘alt’ text you write will be different for each of these classes of image. Eye candy: use an empty ‘alt’ attribute Most web pages are full of eye candy, like horizontal rules, glyphs and spacer images. In this screenshot from the New York Times, I’ve used a feature in the Firefox Web Developer toolbar to overlay the ‘alt’ text for each image.

UX Design Defined 2 - User Experience - UX Design « Continued from UX Defined. What User Experience Designers Do User Experience Designers, like Web Designers before them, usually have a visual design background. Visual designInterface designNavigation designInformation architecture (IA)Information designInteraction design (IxD)Functional specificationContent requirementsUser research (user needs)UX strategy (site objectives) After UE/UX Designers discover a project’s context as fully as time and experience allows, an approach to design aspects of it is formulated. Communicating design in abstracted, element-specific vocabularies (visual and written) can be quite a challenge in itself. Design specification documents can include any of the following, and others including those synonymous with them, here as sub-bullets to Garrett’s Elements of UX in order of probable sequence: Though few User Experience Designers are also programmers, they must also have a solid grounding in interactive media technologies. Web Job Titles – A Short History

Smashing Magazine Web Site Usability Tips Here are the general categories the tips fall into: Navigation Related Usability Tips Tips on Improving Readability Usability Tips on Using Search Usability Tips on HTML Coding Tips for More Usable Forms Usability for Design and Layout Usability Tips on Using Color Ecommerce Usability Tips Tips on Usability Testing Usability Tips for Graphics and Flash Advice on Frames General Web Site Usability Practice Advice on Following Usability Guidelines 1. 2. Putting together navigation and search results can be even more powerful -- it provides context and eliminates guesswork. If you have a site search you might want to consider putting together search results and navigation (i.e. bread crumbs or cookie crumbs, depending on your culinary preference). 3. 4. You are currently browsing this page: Home > Our Services > SEO Services > Pricing From Kal Ethical and effective global search engine marketing services 5. 6. 7. Yes, people do use them! 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

CSS3 Progress Bars I made some progress bars. They look like this: View Demo Download Files They use no images, just CSS3 fancies. As you might imagine, in browsers that support no CSS3 at all will look similar to the above, only even more simplified. HTML Base The bar itself will be a <div> with a class of meter. The basic: Start of CSS The div wrapper is the track of the progress bar. Then span inside will be the fill in part of the progress bar. Thems the basics. Other Colors Let's make it as easy as possible to change the color. Candystriping We can get a cool striped effect by adding another element on top of that span and laying a repeated CSS3 gradient over it. I first saw and snagged this idea from Lea Verou. Animating Candystripes Only Firefox 4 can animate pseudo elements, and only WebKit can do keyframe animations. The span will be exactly the same as the pseudo element, so we'll just use the same values... .meter > span:after, .animate > span > span { ... and avoid doubling up: And call that animation:

4 forgotten principles of usability testing Over the last few months I've sat through dozens of usability tests run by design agencies. Clients have asked me to oversee the tests to make sure that the agency really puts their design through its paces. This is a good thing as it shows that usability testing is now becoming a mainstream activity in the design community. But many of the usability tests I've sat through have been so poorly designed that it's difficult to draw any meaningful conclusions from them. No wonder that Fast Company mistakenly believe that user centred design doesn't work. Picture a usability test If I ask you to picture one of these usability tests, you'll probably conjure an image of a participant behind a one-way mirror, with video cameras and screen recording software. Here are 4 principles of usability testing that have been absent in many of the tests I've observed. Screen for behaviours not demographics Test the red routes Focus on what people do, not what they say Don't ask users to redesign the interface