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.

» 10 Brilliant Multi Level Navigation Menu Techniques Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website. Today we wanted to highlight 10 brilliant Multi Level Navigation Menu Techniques built using different Javascript Libraries including jQuery, Mootools along with some CSS magic to give us what you see below. 1. Almost the same top navigation implemented on Vimeo.com is created by Janko. The base for this tutorial is simple CSS drop down menu based on unordered list. As you can see the UL has four items. Demo | Download source code 2. This menu does not only separate HTML from CSS, but even CSS definitions are categorized into structural and thematic types. Features Include: The code and files are well organized. Horizontal Menu Demo | Vertical Menu Demo | Download source code 3. This multi-level drop down menu script weighs in at only 1.2 KB. 4. 5. 6. 7. 8. 9. 10. jQuery File Tree

Operating System Interface Design Between 1981-2009 A Graphical User Interface (GUI for short) allows users to interact with the computer hardware in a user friendly way. Over the years a range of GUI’s have been developed for different operating systems such as OS/2, Macintosh, Windowsamiga, Linux, Symbian OS, and more. We’ll be taking a look at the evolution of the interface designs of the major operating systems since the 80′s. I should mention that this article showcases only the significant advances in GUI design (not operating system advances) and also not all of the graphical user interfaces and operating systems existing today. The first GUI was developed by researchers at Xerox Palo Alto Research Center (PARC) in the ’70s. This research opened a whole new era of computer graphic innovations. The first personal computer which used a modern graphical user interface was the Xerox Alto, developed in 1973. Xerox 8010 Star (released in 1981) Xerox 8010 Star, Source: toastytech.com Apple Lisa Office System 1 (released in 1983) Acknowledgments

Design : UX Apprentice Prototype & Test We created an interactive mockup. This is a script based prototype: customers were asked to order a drink, then appetizer, followed later by an entree, then pay with a credit card. Try out the prototype in myBalsamiq. Sticking to our original guerrilla research approach, we tested the designs on existing customers as they waited for lunch. The results were positive for the simple ordering flow, but the design for Build Your Own Bowl (pick a protein, pick veggies, pick a sauce, and a starch) was cumbersome. Going back to the drawing board, we came up with a casino style spinner for building a bowl. Finale Adam launched his new restaurant, Lucky Robot, in October 2012, 6 months after the initial UX work.

Understanding MVC in PHP by Joe Stump 09/15/2005 This article series (continued in Implementing MVC in PHP: The Controller, Implementing MVC in PHP: The View, and Implementing MVC in PHP: The Model) demonstrates how to build an MVC web framework using PHP 5. This article covers the basics of MVC web frameworks, building the foundation classes for a framework that the other three articles in this series will build. With the introduction of PHP 5 and its new OOP features developers can now seriously talk about building solid APIs and more complex MVC frameworks for the web in PHP. In this article I assume that you have a solid understanding of object-oriented programming and that you have at least scanned the upcoming changes to the OOP structure of PHP in PHP5. What is MVC? MVC is the idea that you have three different pieces that work in unison to form a complex application. MVC on the Web The ideas behind MVC frameworks are quite simple and extremely flexible. For instance, a request for /index.php? The Old Way

30 Essential Controls By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. This is the second article in a three part series on patterns and principles for RIA design. Standard Screen Patterns: 12 patterns w/100 examplesEssential Controls: 30 controls for RIA design and developmentComponents for Commonly Requested Features: 15 patterns and examples Every designer has a set of controls they rely on to communicate an effective UI. Unfortunately, no single RIA framework offers all 30 of these. The frameworks reviewed include: Flex, Laszlo, Silverlight and 12 Ajax frameworks and toolkits: ExtJS, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, SproutCore, LivePipeUI,IT Mill, Backbase. 01. Google’s Auto-Complete 02. Carousel Prototype carousel widget Supported by: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel 03. 04.

Usability Post 30 Usability Issues To Be Aware Of Advertisement You don’t have to agree upon everything. As a professional web developer you are the advocate of your visitors’ interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it’s your job to compromise wrong ideas and misleading concepts instead of following them blindly. In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. Usability: Rules and Principles You can learn more details about Shneiderman’s Rules For Design in Wikipedia: Shneiderman’s rules for design. Psychology Behind Usability It's done.

PureMVC - Home Design To Sell: 8 Useful Tips To Help Your Website Convert | How-To Advertisement As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren’t enough to sell the products or services on offer. For that, you need to introduce the element of marketing. You may want to take a look at the following related articles: 1. Research shows that objects and images you see around you can prime you for certain behaviors. LegacyLocker features a photo of a happy family on its landing page, presumably to evoke in visitors a warm feeling for its product and a desire to care for their loved ones. When choosing images for your website, think carefully about the message you’re trying to send. 2. There is a phenomenon in marketing known as “choice paralysis.” The Highrise pricing list shows a set of monthly payment plans. 3. 4. 6. 7. 8.

10 Useful Usability Findings and Guidelines « Smashing Magazine Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites. 1. Form Labels Work Best Above The Field A study by UX Matters1 found that the ideal position for labels in forms is above the fields. 2Tumblr3 features a simple and elegant sign-up form that adheres to UX Matter’s recommendation. Positioning labels on the left also poses another problem: do you left-align or right-align the labels? 2. People instinctively notice other people right away when they come into view. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study4. 3. 4. 5. 6. 7.

9 Common Usability Mistakes In Web Design Advertisement By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. 1. Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area: Newspond comments link. Why would we want a larger clickable area? <a href=" style="padding: 5px;">Example Site<a> You can read more about padded link targets for better mousing in a 37signals article on padded link targets. 2. Pagination refers to splitting up content onto several pages. 3. 4. The Basecamp landing page. 5.

Getting Real Here are the 16 chapters and 91 essays that make up the book. Introduction chapter 1 What is Getting Real?A smaller, faster, better way to build software About 37signalsOur small team creates simple, focused software Caveats, disclaimers, and other preemptive strikesResponses to some complaints we hear The Starting Line chapter 2 Build LessUnderdo your competition What's Your Problem? Stay Lean chapter 3 Less MassThe leaner you are, the easier it is to change Lower Your Cost of ChangeStay flexible by reducing obstacles to change The Three MusketeersUse a team of three for version 1.0 Embrace ConstraintsLet limitations guide you to creative solutions Be YourselfDifferentiate yourself from bigger companies by being personal and friendly Priorities chapter 4 What's the big idea? Feature Selection chapter 5 Process chapter 6 The Organization chapter 7 Staffing chapter 8 Interface Design chapter 9 Code chapter 10 Words chapter 11 Pricing and Signup chapter 12 Promotion chapter 13 Support chapter 14

10 Tips to Create a More Usable Web Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience. Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said: “Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.” In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project. 1. Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Related: