background preloader

10 Useful Techniques To Improve Your User Interface Designs

10 Useful Techniques To Improve Your User Interface Designs
Advertisement Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. 1. Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Attention to every detail is what separates a great product from a mediocre one. This gives the whole button a more balanced look and feel. 3. 4. 5. 6. 7. 8. 9. 10. Related:  UX Design

User interface design for beginners, intermediates or experts? Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today. As user experience designers we are regularly in situations where our design decisions will have a significant effect on the end users of the web sites, applications or other user interfaces or services we design. Introduction Prior to starting any experience design work you should be familiarized with the business idea behind the user experience you are designing, the ways you could deliver added value and, probably most importantly, with the end users of your interface. Further reading

Visualizing Social Software Best Practices: Three Approaches - R Here in the US it's the busiest travel day of the year and while media events and new product launches lay low, entrepreneurs and geeks are hard at work building the software that will launch in coming weeks. There's no better time to kick back and let yourself get philosophical. Social software is a whole new world in many ways and people everywhere are trying to figure out how to design effective and compelling applications. Social Software Elements by Thomas Vander Wal Thomas Vander Wal is the man who coined the term folksonomy, meaning classification through collaborative, social tagging. Yesterday Vander Wal posted the following slide from a presentation he gave this month in Stuttgart, Germany. I'd gather, for example, that Vander Wal suggests here that conversation is one place where identity and objects come into contact, involving both relationships between individuals and group membership. OpenSocial's Recommended Practices Factory Joe's Flickr Stash of Cool Design Examples

Data Visualization: Modern Approaches | Graphics | Smashing Maga Data presentation can be beautiful, elegant and descriptive. There is a variety of conventional ways to visualize data – tables, histograms, pie charts and bar graphs are being used every day, in every project and on every possible occasion. However, to convey a message to your readers effectively, sometimes you need more than just a simple pie chart of your results. In fact, there are much better, profound, creative and absolutely fascinating ways to visualize data. Many of them might become ubiquitous in the next few years. So what can we expect? Let’s take a look at the most interesting modern approaches to data visualization as well as related articles, resources and tools. 1. Trendmap 20071 Informationarchitects.jp3 presents the 200 most successful websites on the web, ordered by category, proximity, success, popularity and perspective in a mindmap. 2. Newsmap4 is an application that visually reflects the constantly changing landscape of the Google News news aggregator. 3. 4. 5. 6.

5 Useful Coding Solutions For Designers and Developers | CSS | S Advertisement Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work. As you know, we, at Smashing Magazine, are quite curious folks. We would like to start with 5 advanced elegant coding solutions and ask you if you are interested in this series and would like to have more similar articles. 1. Over the last years we have discovered a strong trend toward sliding horizontal menus (also known as Coda Slider effect). The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. How is it done? 2. 3. How does it work? 4. 5. Let us know!

10 Futuristic User Interfaces | Monday Inspiration | Smashing Ma Advertisement Good user interfaces are crucial for good user experience. It doesn’t matter how good a technology is — if we, designers, don’t manage to make user interface as intuitive and attractive as possible, the technology will hardly reach a breakthrough. To gain the interest in a new product or technology, users need to understand its advantages or find themselves impressed or involved. And here is where creative ideas and unusual interface approaches become important. Below we present 10 recent developments in the field of user experience design. You may also want to take a look at the related posts: Fez: 2D/3D Gaming Experience Over years we’ve managed to get used to traditional 2D gaming experience. Futuristic Glass This futuristic concept5 aims to integrate the capabilities of online-services in our daily life. Aurora User Interface The main idea of the concept is to represent users, places and virtual objects within a three-dimensional user interface (spatial view). Tilty Snake

15 Tips for Designing Terrific Tables Tables of information are boring. In a sense, they’re meant to be that way. A good table communicates a lot of information in a concise, easy to understand way. Today we’ll take a look at several ways you can improve the functionality and aesthetics of your tables. Vertical, Horizontal or Matrix? As always, we’ll start with the obvious. Vertical Horizontal Matrix Start in Excel For the record, this is the first, and hopefully the last, time you’ll here me suggest using Microsoft Office for anything design related. Today I stumbled across a great little web application called Tableizer that allows you to paste in your tables from Excel to magically transform them into HTML. Tableizer Use a Table Generator Hate Excel? Here’s a quick list of free table generators to save you a Google search: A Little Styling Goes a Long Way Now that you’ve got a basic table, the first step towards taking it out of the 90′s is to add some CSS. Here are a few tutorials on how to properly style a table. Use Icons

12 Useful Techniques For Good User Interface Design | How-To | S Advertisement Last week, we presented 10 Useful Web Application Interface Techniques471, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. You may also want to take a look at the following related articles: 1. One of the most significant elements of a good user interface is visibility of the system’s status. 7Yammer8 applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. One great way to do this is with animation. 2. ... 3. 4. 5. 6.

10 Backgrounds that Could Make Your Website Look Like the New En While searching the Web for our Webdesign Trend Hunting series, we’ve discovered a new small trend that could go bigger in the next few weeks – the blurry light bubbles background used by the new Envato website. And if the biggest inspirational web network isn’t enough for you, take a look at the new Opera website. So, if you like ‘em and want to be among the firsts who spot and use the new hype, we’ve made a roundup of 10 backgrounds in the same style. All of them are available in the Graphic River marketplace, also owned by Envato. Sight! Sparkling Dots | $3 | Buy A nice layered package with amazing backgrounds, available in 5 colors Light Effect | $4 | Buy Hight quality abstract backgrounds contain 2 groups, one with 10 and the other one with 20 color variations Spring Abstract | $2 | Buy An abstract background depicting the freshness of spring – and the related nature rejuvenation. 3200 X 2400 at 150 dpi – layered and named for easier editing Web 2.0 Background Pack | $2 | Buy

The 20 Most Practical and Creative Uses of jQuery - NETTUTS There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. One of our sporadic writers, James Padolsey, has a nice feature on his website. A "customize" bar in the top right portion of the screen allows you to change the background color of the header. I've saved my absolute favorite site for last. Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level.

Powerful CSS-Techniques For Effective Coding | CSS | Smashing Ma Advertisement Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without where we provided references to the most useful CSS-techniques which are often used in almost every project. In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. Thanks to all developers who contributed to the CSS-based design over the last year. CSS-Techniques 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 13 Awesome Javascript CSS Menus 13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. Further Techniques 44. 45. 46. 47. 48. 49. 50. It's done.

Les méthodes d’inspection des interfaces J’ai rédigé initialement cette définition pour le petit dictionnaire du design numérique. Les méthodes d’inspection des interfaces consistent, selon les ergonomes Bastien et Scapin : « en un examen d’interfaces par des spécialistes (évaluation experte) ou des non-spécialistes au moyen de diverses techniques d’inspection, essentiellement basées sur certaines dimensions de l’utilisabilité tels que les Critères Ergonomiques. » Le but des méthodes d’inspection des interfaces est de détecter les aspects de la conception des interfaces pouvant entraîner des difficultés d’utilisation ou alourdir le travail des utilisateurs. Ces méthodes portent donc sur l’utilisabilité d’un service et non sur son utilité. Les méthodes les plus judicieuses sont : L’inspection cognitive (Cognitive Walkthrough).L’analyse de la conformité à un ensemble de recommandations.L’analyse de la conformité à des normes ou heuristiques (on parlera aussi d’évaluation heuristique). L’inspection cognitive Sources :

Game Mechanics for Interaction Design: An Interview with Amy Jo Game design expert Amy Jo Kim shares her insights into applying game principles to the design of online communities. Amy Jo Kim is a game/social/web designer known for bridging the divide between game and web design. She has designed software UIs, games, online communities, and wrote the seminal book Community Building for the Web way back in 2000. I have long admired her work, and I am grateful that she recently sat down for an interview on the basics of game mechanics and how they can be used in interaction design. You have a background in software interface design. I have an eclectic background in neuroscience, computer science, and psychology. In 1995, I left Viacom and launched a consulting business (Shufflebrain) focused on “social architecture for online environments.” What are game mechanics, and what is the primary value of thinking about game mechanics in interaction design? What are the primary principles in gaming that might be useful to interaction designers? Thanks Amy Jo!

Pushing the boundaries of web design. The ultimate user interfac Designers by nature love to change things. If they aren’t dropping caps to suit a design, they are trying to push the boundaries of what the browser can do. I’ve recently been involved in a project that has needed some different looks for standard user interface elements such as forms. While I wouldn’t normally condone such activity (from a usability point of view, its a bad idea to change standard UI elements) sometimes graphic designers need “appeased.” JQuery related I looooove jquery. JNice JNice takes us to a fancy form, with fancy dropdowns. Load Content While Scrolling Demo: If you ever wondered how DZone or WikiSearch manage to allow continuous scrolling, then this is the snippet of Jquery for you. Interface Elements for JQuery Demo Page: JQuery scrollTo

Related:  usabilityweb designtypographydesignusabilityforms