A Summary of User Interface Design Principles by Talin This document represents a compilation of fundamental principles for designing user interfaces, which have been drawn from various books on interface design, as well as my own experience. Most of these principles can be applied to either command-line or graphical environments. I welcome suggestions for changes and additions -- I would like this to be viewed as an "open-source" evolving document. 1. -- Know who your user is. Before we can answer the question "How do we make our user-interfaces better", we must first answer the question: Better for whom? One way around this problem is to create user models. What are the user's goals? Armed with this information, we can then proceed to answer the question: How do we leverage the user's strengths and create an interface that helps them achieve their goals? In the case of a large general-purpose piece of software such as an operating system, there may be many different kinds of potential users. 2. 3. 4. 5. 6. 7. 8. 9. 1. 10. 11. 12.
4 Lessons From The Web’s Most Ruthlessly Addictive Site During the average workday, I allow myself to take a couple “Internet breaks,” little bursts of Tumblr and Gawker and other forms of web candy that tug at my attention span like a needy kid. There’s one web threshold I never step over on a weekday, though: the Mail Online. The online outlet of the British tabloid is a one-way ticket to an hours-long surfing spree of celebrity gossip and moral outrage. It’s not web candy--this is web crack. And it’s not just me. That question was partially answered this week, when the Mail Online was singled out for a Design Effectiveness Award by the British Design Business Association. More Is More, Ad Placement Be Damned! Brand42 started off by throwing out traditional ideas about above and below the fold, a model many news sites have maintained online. Like A Maze With No Deadends An average sidebar on a Mail Online story has nearly 70 stories, each with its own image. Okay, So This Rule Is Pretty Standard Win The Ladies, And You’ve Won The Web
40+ Helpful Resources On User Interface Design Patterns Advertisement If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating. A design pattern refers to a reusable and applicable solution to general real-world problems. For example, a solution for navigating around a website is site navigation (a list of links that point to different sections of the site), a solution for displaying content in a compact space are module tabs. There are many ways to tackle a specific requirement – and as a designer – the most important thing you can do is selecting the option that best reflects the needs of your users. Yahoo! Flickr Collections and Groups
User Interface Design and Usability Consulting | Tuitive Best User Interface Design Resources: The Round-up at DzineBlog Learn how to earn $125 or more per hour as a freelancer - Click Here Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off If you strive to be a great designer (like most), then you’re more than likely to know that a web application or websites success many times rely solely on how well designed the User Interface may be. When in reality you should do what works best for you and your users. Interface Design Libraries 1.) MephoBox houses various interface patterns and designs that showcase the different trends within them. 2.) This beautiful and large collection of user interface patterns allows designers to absorb great inspiration. 3.) The Yahoo! 4.) PatternTap is one of the most notorious UI pattern design libraries created and developed by Matthew Smith and Chris Pollock. 5.) Here we have the UI Pattern Factory which like the rest listed above is a UI design library/gallery. Interface Design Blogs 6.) 7.) 8.) 9.) 10.) 11.) 12.) 13.) 14.)
20 Websites to Help You Master User Interface Design By Jacob Gube As web technologies progress, websites and web applications are becoming more responsive, providing us with more ways and techniques to interact with the users. Form, more than ever, has been superseded by function. The following websites deal with interface design, user experience, user-centered design, usability, and everything in between – all with the goal of enhancing the user’s interface. 1. Boxes and Arrows Boxes and Arrows is a peer-written journal and a premier source for information on interaction design, usability, and information design. 2. UX Magazine deals in the topic of user experience. 3. UXmatters is a non-profit web magazine devoted to sharing information on effective user experience techniques and becoming a leading resource for User Interface (UX) professionals. 4. A List Apart – the leading resource on standards-based design and development articles – has a User Science topic that covers various parts of designing the user’s interface. 5. 6. 7. 8. 9.
Designing User Interfaces For Business Web Applications Advertisement Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. So, we will cover the basics of user interface design for business Web applications. Websites vs. Confusing Web applications and websites is easy, as is confusing user interface design and website design. A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work. Web applications require a higher level of involvement and knowledge of the system on the part of the user.
14 Useful online tools for webdesign planning and prototyping If you fail to plan, you plan to fail. An old adage and one that still rings true. With any website project, it can be easy to just jump straight in and start developing, once you have client approval before taking time to plan. By the time you show your first iteration of the design to the client, they could have considerably changed their minds about the details of the project, and you end up having to re-engineer your partly baked solution at the last minute. Many developers and designers use good old pen and paper to plan their designs, however this doesn’t really fit well with larger projects, where collaboration / signoff is required from many different people. URL: Jump chart was created by the guys over at Paste Interactive, a great little company that create useful software such as this. URL: URL: URL: URL:
Rosenfeld Media - Prototyping Book Site Prototyping is a great way to communicate the intent of a design both clearly and effectively. Prototypes help you to flesh out design ideas, test assumptions, and gather real-time feedback from users.With this book, Todd Zaki Warfel shows how prototypes are more than just a design tool by demonstrating how they can help you market a product, gain internal buy-in, and test feasibility with your development team.One quarter of the way through this book, we threw out our requirements docs and started using photos of our whiteboard sketches to communicate instead. Thanks to Todd for consolidating and analyzing the wisdom and case studies from a variety of practitioners to identify what prototyping techniques will work, now.
16 Design Tools for Prototyping and Wireframing Article This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about wireframing, you may find this recent article on free online wireframing tools of great interest. In recent years the number of tools available to help you document and design your web site has just exploded. It seems that we all need a wireframing or prototyping tool at our fingertips (at least in the design arena). So in order to save you the hard work required to find one, I’ve assembled this list. The tools tend to fall into two categories: purpose-built applicationsmultifunctional applications Within these two groups I’ve found that usefulness can vary markedly among tools; some are only suitable for diagramming and wireframing, while others focus only on prototyping. 1. I will state upfront that I’m not a big fan of Visio (price: from $US259, demo available); I’ve used it from time to time on various projects, but I’ve always found it fiddly and time-consuming. 2. 3. 5. 6.
Designing & Selecting Components for UIs As a user interface designer, one of the most exciting changes I've seen in last few years has been the growth of rich Internet applications. Although I designed many good standard Web applications, interactions and components have long been limited. It was like trying to build a Lego sculpture with only three shapes. To me, having a full range of Legos is necessary to meet the complex challenges of designing interfaces for RIAs. I have to think much harder when I design rich interfaces than when I work on standard Web applicaitons. With the increased flexibility and more components comes a higher risk of making silly mistakes. The purpose of this article is to help designers avoid mistakes and to help them choose (or design) components based on sound, fundamental principles of usability. Before I get into that, let me explain what I mean by a component. Selecting and using good components is a very important part of the design process. But back to usability. Vision and Seeing Examples