Drag Drop Javascript Library for iPad & iPhone In large part, the iPad's magic comes from its touch-based interface. Touch-based interfaces are generally "incompatible" with those made for a mouse and web technologies are still beginning to explore this new medium. We hope to shed a speck of light on this problem by distributing a free javascript class we developed for gotProject, enabling any website to add draggables and droppables for an iPad or iPhone. To see the full potential of this library, grab an iPad, create an account on gotProject, and play around with the amazing interface. It's the first web clipper & information manager for the iPad with a drag drop interface! If you'd like to use the library for your site, simply download it using the green link above. Draggables are divs that can be moved around the screen using your fingers. Syntax //To make an element draggablevar D = new webkit_draggable('id_of_element', {options}); //To stop an element from being draggable D.destroy(); Options Examples Drop A Draggable on Me
Native HTML5 Drag and Drop Introduction For years, we've been using libraries like JQuery and Dojo to simplify complex UI elements like animations, rounded corners, and drag and drop. There's no doubt, eye-candy is important for making rich, immersive experiences on the web. But why should a library be required for common tasks that all developers are using? Drag and drop (DnD) is a first class citizen in HTML5! Feature Detection Many apps that utilize DnD would have a poor experience without it. If you need to rely on an API, always use feature detection rather than sniffing the browser's User-Agent. if (Modernizr.draganddrop) { // Browser supports HTML5 DnD. } else { // Fallback to a library solution. } Creating draggable content Making an object draggable is simple. As an example, let's start creating rearrangeable columns. It's worth noting that in most browsers, text selections, img elements, and anchor elements with an href attribute are draggable by default. Result (draggable but won't do anything): 1. Result:
10 User Interface Design Fundamentals It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way. Free trial on Treehouse: Do you want to learn more about web design? Click here to try a free 14-day trial on Treehouse. ‘Staying out of the way’ means not distracting your users. Check out our other design courses at Treehouse. When getting started on a new interface, make sure to remember these fundamentals: 1. “Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Your user’s goals are your goals, so learn them. 2. Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). CoTweet uses a familiar UI pattern found in email applications. 3. “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson Your users need consistency. 4. 5.
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.
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: