Simple Tricks for More Usable Forms [JavaScript & DHTML Tutorials] Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I’ll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own. I’m going to start off with some simple tricks, before introducing the interesting stuff later on. If the material seems too simple for you, feel free to skip ahead. It’s the Little Things that Count You will certainly have encountered our first trick before; it’s used by Google, the world’s most popular search engine. This is, more or less, the method used by Google. <script type="text/javascript"> window.onload = document.getElementById('myfield').focus; </script> This can be added to any point in your HTML file, or hidden away in an external script. Labels Why the two cursor declarations?
Vertical Menu CSS - How to create vertical menu Applying CSS to forms CSS has come a long way in the 12 years since this article was written. Read our latest blog article to check out our latest thoughts on where we see CSS going in 2016! Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up. The original form That form looks horrible! <form action="#"><p><label for="name">Name</label><input id="name" type="text" /></p><p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p><p class="submit"><input type="submit" value="Submit" /></p></form> Positioning the form with CSS The first thing we need to do to the form is make it line up nicely. Right, let's go through that CSS bit-by-bit. The margin-right: 0.5em CSS command means the labels will have a small amount of spacing after them, so that the text isn't up against the input box. So, putting that altogether gives us this form: Applying colours to the form
Top Ten Web Design Mistakes of 2005 (Jakob Nielsen's Alertbox) Summary: The oldies continue to be goodies -- or rather, baddies -- in the list of design stupidities that irked users the most in 2005. For this year's list of worst design mistakes, I decided to try something new: I asked readers of my newsletter to nominate the usability problems they found the most irritating. I assumed that asking for reader input would highlight many issues that I hadn't noticed in my own user testing. This was not the case. Instead, all of the top thirty problems were covered in existing usability guidelines. Thus, when you read this year's top ten list, you'll probably say, "Yes, I've heard about this before." There's value in reminding ourselves of past findings and raising their priority on the agenda of things to be fixed. 1. Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. For more info on resizable text and readability, see my 2002 column, "Let Users Control Font Size." 2. 3. 4. Web content should also 5. 6. 7. 8.
How do I line up my textboxes without using a table? html/css Form Design with Sliding Labels « CSSKarma A few weeks ago I was reading an article on form UI by Luke Wroblewski of Yahoo!. For those who aren’t familiar with Luke, he (quite literally) wrote the book on good form design. In the article, one certain section about placing labels inside of form fields stood out to me: Because labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. He brings up a good point. For best practice, Luke talks about leaving your labels outside the form field so it’s always available to the user. Enter: Sliding Labels After reading that article it occurred to me that there’s no reason we can’t have the best of both worlds. View demo The HTML <form action="" method="post" id="info"><h2>Contact Information</h2><div id="name-wrap" class="slider"><label for="name">Name</label><input type="text" id="name" name="name"></div><! At this point we have a pretty basic, and ugly form The CSS The jQuery Try it out and let me know what you think.
Web Interface Design Tip: The Yellow Fade Technique (Signal vs. Noise) Web Interface Design Tip: The Yellow Fade Technique 19 Feb 2004 by Matthew Linderman “Because something is happening here / But you don’t know what it is / Do you, Mister Jones?” - Bob Dylan A lot of web sites & applications make you feel a bit like Mr. Why does this matter? Let’s take a look at an example. Let’s say I want to change the name of the second post on this Basecamp page from “CEO Photo” to “Jim Messier Photo.” First off, I’ll go to the “Edit Post” page and change the post’s title. Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). Voila, the page is back to normal within seconds. To see it in action, sign up for Basecamp (you can try it for free).
how to make asp.net text box and dropdown flat style in css A Better Login System | Nettuts+ Net.tuts+ has published several great tutorials on user login systems. Most tutorials only deal with authenticating the user, which allows for two levels of security: logged in and not logged in. For many sites, a finer degree of control is needed to control where users can go and what they can do. Creating an access control list (ACL) system will give you the flexibility for granular permissions. Introduction Imagine you are running a great tutorial site that lets users learn about a wide variety of web development techniques. Your problem You want to restrict users' to only specific pages that their particular account allows access to. The solution Implementing an access control list will allow you a great deal of control over what users can and cannot access on your site. If you view the demo, available with the downloadable source code, you will be greeted with an index page that tests the ACL for each user. Step 1: Create the Database Step 2: Database Include Step 3: Create the ACL Class
Functioning Form - User Experience Diagrams A collection of diagrams about user experience fundamentals. Last updated June 2011. The Elements of User Experience (PDF) Conceptual model of the considerations involved in designing successful user experiences for Web sites. User Experience Cycle (PDF) The user experience is not one simple action -it is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires. User Experience Honeycomb A tool for advancing the conversation beyond usability and helping people understand the many facets that can impact the quality of user experience. Designing the User Experience This poster illustrates the path to more usable products. The Fundamentals of Experience Design The model covers the basic UX stuff like moving from a focus on tasks to a focus on activities, as well as more theoretical discussions like activity centered design vs user centered design. User-Centered Design Process (PDF) The User Experience Cosmos (PDF) A Cartesian representation of our field.
Two column liquid layout Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
PHP Mail Form: Secure and Protected » tutorialtastic.co.uk The one major downside to the ever-changing fast paced cyber world that we call the Internet is the speed at which code becomes outdated and new security issues are discovered. This tutorial covers the basics as set forth in previous tutorialtastic mail form guides with new, more advanced security techniques and spam-blocking measures. Firstly, the key to any mail form is the actual form — this tutorial is pointless without it. So, we start with the <form> tag — this is where we specify how our data is sent and the file we’ll use to process that data. <html><head><title>My Mail Form</title></head><body><form method="post" action="form-process.php"></form></body></html> (Save this in a file called form.php or form.html) The key to creating a form that you’ll process with PHP is properly naming the form fields. To give an example of a variety of form elements, I’m using the fields: Name, E-mail, Country and Comments. Notice how each field has a name? <? <? <? Phew. …and that’s it!
The $300 Million Button By Jared M. Spool Originally published: Jan 14, 2009 Editor's note: Thanks to Marco Dini, you can now read this article in Italian. [While Luke Wroblewski was writing his well-received book, Web Form Design: Filling in the Blanks, he asked if I could think of an example where a change in a form's design made a noticeable difference in business. How Changing a Button Increased a Site's Annual Revenues by $300 Million It's hard to imagine a form that could be simpler: two fields, two buttons, and one link. The form was simple. The problem wasn't as much about the form's layout as it was where the form lived. The team saw the form as enabling repeat customers to purchase faster. "I'm Not Here To Be In a Relationship" We conducted usability tests with people who needed to buy products from the site. We were wrong about the first-time shoppers. Some first-time shoppers couldn't remember if it was their first time, becoming frustrated as each common email and password combination failed.
Best examples of CRUD Web Form Design