Showing all articles tagged with Web Design
28 August 2007
PHP, Programming, Security, Web Design
One thing I keep noticing is the use of background noise or clutter in CAPTCHAS. It's now well known in the OCR (Optical Character recognition) field that background noise can be easily removed by computers. It's basically useless at hindering spam bots.
It's so easy that I was able to clean the following CAPTCHA up in only 20 lines of PHP code.
Here's how...
At a glance, you can see the CAPTCHA's background noise has a blue tint. 
Looking at the RGB value of the image in Photoshop, I can see that all parts of the background have a blue value higher than 180.
That's the only piece of information needed to remove the background.
The code simply loops through every pixel of the image and checks the RGB value of it. If the blue (B) value is higher than 180, color it white.
Here's the final image. The characters can now be easily separated and identified using OCR software.
So you can see why most background noise is basically useless in CAPTCHAS.
02 August 2007
Web Design
So your project is nearly finished, now all you need is a website to get the word out. 
Unfortunately this stage of the project is often neglected, which is understandable. Programmers want to work on the actual application rather then the website. However, your visitors aren't going to download your application if they can't find the download page.
As a developer (and as a consumer), I see lots of software websites that could be improved. Here are a few tips for making a good application website.
- Show a screenshot of your application on the homepage
Most of the time, this is what I look for first. At a quick glance I can see if the application is going to do the job I want. I often download software based solely on the screenshot.
- Make sure the user can get to the download/purchase page within 1 click
Firefox has done this part right. Nothing works better than an eye-catching "Download Now" button. The goal of your website is to convert visitors into downloads, so it's wise to get your users to the downloads page as soon as possible.
- Explain in 2-3 sentences what your program is and how it helps people
This should be the first thing your visitor reads. Make it short and to the point. Crimson editor has an excellent description on it's homepage...
"Crimson Editor is a professional source code editor for Windows.This program is not only fast in loading time, but also small in size (so small that it can be copied in one floppy disk). While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java."
- Host a demo of the application or the application's admin section
Dont make your visitors type 'admin' and 'demo' on the demo login form, it's annoying, auto fill the fields.
- Don't use bad stock photography
Personally, I prefer software websites without any photos. But if you have to use them, don't include cliche photos of people in suits or talking on cell phones.
People associate these type of photos with faceless corporations.
- Include a news bit
Often one of the first things I do when looking at an application's website is scan for the latest news to see how active the project is.
- Screenshots and gallery
If possible, have a screenshots page with at least 5 - 10 good screenshots of your application.
27 July 2007
CSS, Web Design
A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.
First, we need to create the window div. Here is the CSS I used.
.window {
background: #d8e7fe;
position: absolute;
top: 200px;
left: 200px;
width: 350px;
padding: 1px;
-moz-border-radius: 7px;
border: 2px solid #21416d;
}
.window h1 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
padding: 6px;
display: block;
background-color: #9cc6ff;
font-size: 13px;
margin: 0px;
}
And here is the HTML markup.
<div id="mywindow" class="window">
<h1>Example Window</h1>
<p>Click and drag this window around the webpage.</p>
</div>
I've used '-moz-border-radius' for rounded corners because I'm lazy. You'll need to use corner images if you want rounded corners that work in more than one browser.
Now all that's left to do is the javascript. As I said before, we'll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.
Once you've got the library installed, add this short Javascript snippet to the head section of your document.
<script type="text/javascript">
function init(){
new Draggable('mywindow');
}
Event.observe(window, 'load', init, false);
</script>When the page loads, the init() function is called, which tells the library to make the div 'mywindow' draggable!
View the finished product.
25 July 2007
CSS, Web Design
Making a password strength meter is simple, there's no tricky Javascript or AJAX needed, just a simple function and a few divs.
Click to view demo.
I've decided to design the function around a scoring system, the stronger the password the higher the score. We can accomplish this with just a few simple IF statements.
function passwordStrength(pass)
{
var score = 0;
if(pass.length > 2)
score++;
if(pass.length > 4)
score++;
if(pass.length > 8)
score += 2;
if(/\w/.test(pass) && /\d/.test(pass))
score++;
return score * 2 * 10;
}The code is fairly self explanatory, the last IF statement checks if the password contains both characters and symbols. The function returns a percentage of the password's score out of 5, which is the maximum score it can be awarded.
Next, we need a form with a text box and 2 divs for our meter.
<input type="text" onkeyup="document.getElementById('passmeter').style.width = passwordStrength(this.value) + '%';" />
<br />
Password Strength:<br />
<div id="passmeterbg"><div id="passmeter"></div></div>
The 'onkeyup' event calls the passwordStrength() function every time a key is pressed. The 'width' property of our meter div is then given the password's score.
Finally, we need some CSS to style the meter...
#passmeter {
width: 0px;
background: #629d48;
height: 3px;
}
#passmeterbg {
height: 3px;
background: #f1f1f1;
width: 200px;
}
View the finished product.
18 July 2007
Web Design, CSS
Since my last web design article was so popular, I decided to write a similar one.
This time we'll start with an ordinary looking login form. The usability experts reading this will immediately notice a few design flaws.
For small forms like this one, field labels should be aligned to the right to minimize the distance your user's eyes must travel. I've also moved the link and submit button directly under the input boxes.
I've encapsulated the form in a fieldset (<fieldset></fieldset>) and replaced the title with a legend (<legend></legend>). This isn't normally nessesary but it helped define the form within all the surrounding white space.
Styling the legend...
I've added a yellow background and border to the fieldset and given it some rounded corners. I also moved the submit button to the bottom right so less eye movement is required by the user.
04 July 2007
Web Design
I often see folder icons in web applications, so I thought I would write a quick and easy tutorial for creating one in Photoshop.
Create a rectangle with a tab using a gradient similar to mine.
Create a new layer, then make a lighter colored rectangle above.
Skew (edit > transform > skew) the second rectangle to an appropriate angle.
Then do the same to the bottom rectangle and give the top rectangle a white outline. I did this by simply duplicating the layer, moving the bottom one 1 pixel to the right, and 1 pixel up, then increasing brightness so it looks almost white.
I also fixed the tab in this stage.
Add a light shadow and you're finished!
29 June 2007
Web Design
It's not hard making interfaces look professional. I've found that some good looking icons and a bit of cell padding makes all the difference.
Using the example below, we can apply small changes to the design which will improve usability and make this ugly interface look a lot better.
I've removed the table cellspacing which was cluttering up the design, and changed the date/time to a more readable format. Removing the boldness from the opened emails puts more emphasis on the new emails.
Removing the vertical table borders is a great way to open the table up, yet still provides a way for users to easy scan from left to right because we've left the horizontal borders in place.
Adding some more cellpadding and making the horizontal borders lighter makes the design cleaner and less cluttered. The font has been changed from Verdana to Arial which is slightly thinner and makes more space in the table cells.
The finished product. I've replaced all the icons with ones from famfamfam.com, and used a delete icon rather than a 'delete' link. There is now a light gradient behind the table header and some alternating row colors.
As you can see, it's not hard to improve the aesthetics of a table. You can apply these sort of changes to almost any part of an interface.
20 June 2007
Web Design, AJAX
AJAX is a only great technique when used in moderation. It belongs in forms and page widgets, but should never be used for navigational purposes.
Call me a traditionalist, but webpages are pages, not desktop applications. Changing the way a UI component works on your website is unnecessary and confusing for your users.
Normal links shouldn't change page content without warning and pages shouldn't extend when you reach the bottom.
Use AJAX sparingly if you want to make a better user experience.
31 May 2007
Web Design
I wrote the following article for the latest AussieHQ newsletter.
Message boxes are a great way to inform your users but can often be the cause of much confusion. If your user fills out a form with incorrect input and your error message is displayed at the bottom of the page, there's a good chance your user will be left sitting there wondering why nothing happened.
To design an effective message box, I suggest following these guidelines:
- Use icons
- If it's important, make sure it's eye catching
- It has to be short, to the point and readable
- Use Colour coding
Using the above guidelines, we can design a great set of message boxes for a website. I've used free icons from the silk icon set at famfamfam.com.
Information
Displaying helpful information to users is a great idea, but it shouldn't distract the user from their main goal. This is why information boxes are generally a washed out blue colour.
Success
Green is a friendly colour, so we use it to report success.
Warning
Yellow is great for invalid input messages, because it attracts attention, but it's not necessarily a "bad" colour.
Error
In theory, a user should never see this box. Red is often used to indicate danger or emergency, so it's the perfect colour for a fatal error.
Here is the CSS used to create a message box (thanks to bioneural.net.)
.warning {
background: #fff6bf url('img/warning.jpg') center no-repeat;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
And the HTML:
<div class="warning">Invalid input message here.</div>I would also like to point out, that an effective error message should be placed above the fold, so it's the first thing the user reads.
If you would like to learn how to write good error messages, check out Error Message Guidelines by Jakob Nielson.
25 May 2007
Web Design
The header on the CodeIgniter site is awesome. The navigation is laid out perfectly with neat icons and descriptions. Nice work guys.
30 March 2007
Web Design
Friday afternoon Photoshop fun...
