Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times

    When designing usable websites, one key priority is to convey messages to your users. Be it for contact forms, polls, file uploads. Any kind of form needs some kind of response. We've dug up three of the best CSS based message boxes, which will help you show responses to user actions, in a beautiful way.

    Elegant CSS Message Boxes
    The folks over at Cheth Studios came up with some great CSS message boxes, for Blogger! Obviously they can be easily adapted to work on any site with some minor location changes to the CSS file. They are by far one of the best CSS message box designs around!

    CSS Valid Message Boxes
    Based on the design of the K2 wordpress layout’s message boxes, Bruce over at Bioneural decided to make the boxes CSS valid and provide the code that generates these beautiful and user informative boxes.

    And Finally…
    I saved the best for last! I’ve personally used Janko’s message boxes on no less than ten websites. I find the designs to be hugely informative. The colors used help express the message without even having to read it. For example, a red box with a cross – you know something went wrong. A green box with a tick, you know it was a success. These simple, yet highly desirable boxes get the message across instantly!

    Further Reading

    There are many other message box designs out there. One such website that has a list of great message box designs, including some of those above is woork.

    Have you designed a CSS message box? Would you like us to design one for the world? Post your comments below and be heard by all!
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member
    Join Date
    Nov 2005
    Posts
    488
    Member #
    11940
    When designing usable websites, one key priority is to convey messages to your users.
    When designing usable websites, one key priority is to Never Have To Convey System Error Messages to Users. They don't care. And it's not their problem.

    All the examples are, like most gimmicks, devoid of any purpose. This insures messages are used where they don't belong, and with scant consideration for the user.

    Usability's key priority is to not remind the user they have to adapt to the dictates of the computer to get anything accomplished. Messages do just that.

    You could have done a whole other tutorial just on writing the few proper messages -- in a proper human context -- but nobody does that. Usability: Fail.

    Bottome line: Message boxes indicate to users something is broken or too system centric, so depending on the message, they leave.

  4. #3
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    Quote Originally Posted by DC856 View Post
    When designing usable websites, one key priority is to Never Have To Convey System Error Messages to Users. They don't care. And it's not their problem.

    All the examples are, like most gimmicks, devoid of any purpose. This insures messages are used where they don't belong, and with scant consideration for the user.

    Usability's key priority is to not remind the user they have to adapt to the dictates of the computer to get anything accomplished. Messages do just that.

    You could have done a whole other tutorial just on writing the few proper messages -- in a proper human context -- but nobody does that. Usability: Fail.

    Bottome line: Message boxes indicate to users something is broken or too system centric, so depending on the message, they leave.
    By that logic, lets say someone fills out a contact form - they miss out a field and hit submit. What would you like to happen? A message box, like those above alerts the user to the fact that there was an error. Saying they don't NEED to see or care about seeing an error is ridiculous. Feedback is critical so that people know if what they just did worked. Obviously you don't go into technical details with them, hence the simple alert boxes.

    How about if they fill out a form correctly - you want to just redirect them to your homepage after? No, you tell them that their action was successful.

    In addition, these are very useful for web based applications.

    I highly recommend you read up on usability before slagging off something that, in every day use is very valuable. The coloring of the boxes makes a strong point of usability (e.g red = error/warning, green = success). What you decide to write inside the box is entirely irrelevant, and not something I even hinted at making this article about.

    You even use a method of message boxes on your own website! http://designcrux.netfirms.com/how_t...te.html#bottom Hitting submit without entering an email address provides a message box telling you something was wrong.

  5. #4
    Senior Member
    Join Date
    Nov 2005
    Posts
    488
    Member #
    11940
    By that logic, lets say someone fills out a contact form - they miss out a field and hit submit. What would you like to happen?
    I'd like a tutorial about contact forms that include the messages, tested as getting the best result. Just a smidgeon of extra added text about what goes INTO the box.

    It does not require me -- nor anyone else -- be a usability expert to tell there is not one little thing about usability in that tutorial.

    lets say someone fills out a contact form - they miss out a field and hit submit. What would you like to happen?
    I'd like programmers doing CSS trick tutorials to not use the word usability, but that's a futile wish. It's not a message box tutorial, it's a CSS box tutorial.

    Usability Expert Question: Precisely how many Usability experts of your ilk suggest Lorem Ipsum filler as giving a usability boost?! Is the markup REALLY the hard part of message boxes?

    Let us say you left the CSS markup to the imagination as you do with the actual substance of the message box. Might one not be skeptical of calling it a CSS tutorial, then?

    Hey, sexy CSS was fine. You had me with sexy. Then you had to drag usability into it.

    Actually, had you answered your own question within the tutorial, none of my posts would be necessary.


    ============= Error 411 : Information Not Found =============

    For all the people who were looking for a message box tutorial to which CSS might play a role, but is rather besides the point:

    Avoid Being Embarrassed by Your Error Messages not a hint about your Lorem Ipsum usability breakthrough, however. You might send in the "This is a neat box to show some text with a favorites symbol" ...it's a keeper for anyone wanting to improve usability.

    Sensible Forms: A Form Usability Checklist "When I began work on this article, I spoke with my mother, a reasonably “average” home user, about the topic. The issue of form errors was the first thing she spoke, or rather, ranted about. "

    Funny thing about that ...CSS markup turns out Not to be the issue.

  6. #5
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    I'd like a tutorial about contact forms that include the messages, tested as getting the best result. Just a smidgeon of extra added text about what goes INTO the box.
    This isn't a tutorial about contact forms - its an article providing a couple of resources to the boxes that would be displayed after a form has been submitted. What you put inside them is down to you.

    It does not require me -- nor anyone else -- be a usability expert to tell there is not one little thing about usability in that tutorial.
    I never said it was a usability tutorial, thats an assumption you drew in your first post. I responded to your first post attempting to explain how they would be used, and how a visually appealing box would be more use than plain text (from a usability perspective, if you want to go that way).

    I'd like programmers doing CSS trick tutorials to not use the word usability, but that's a futile wish. It's not a message box tutorial, it's a CSS box tutorial.
    Again, never said it was a tutorial. Its an article titled "Sexy CSS Message Boxes" - I never explained how to make one. I'm not sure where programmers came into this.

    Usability Expert Question: Precisely how many Usability experts of your ilk suggest Lorem Ipsum filler as giving a usability boost?! Is the markup REALLY the hard part of message boxes?
    Is that what this is all about? Someone putting Lipsum inside the box?! Wow. You do know the purpose of Lipsum, right?

    Let us say you left the CSS markup to the imagination as you do with the actual substance of the message box. Might one not be skeptical of calling it a CSS tutorial, then?
    Again - never called it a CSS tutorial. Your quarrel seems to be over the name of the article. 'CSS Message Box' - Is it a message box? Check. Does it use CSS for all its styling? Check. Hence 'CSS Message Box' - Google it and look at the results - all the same stuff.

    Hey, sexy CSS was fine. You had me with sexy. Then you had to drag usability into it.
    Again - I didn't drag it in. If you concluded that I was intending it to be a usability tutorial from the line 'When designing usable websites, one key priority is to convey messages to your users.' you have looked into this WAY too much.

    The line simply states that if you're going to have forms - its best to show messages in an easy to read, informative way. Using CSS to improve the display helps (for both design purposes, and yes - I would personally say it DOES help usability. But that is not the purpose of the article, and I never said it was).

    Actually, had you answered your own question within the tutorial, none of my posts would be necessary.
    Question? What question? I asked YOU a question because you effectively said that any form of response was pointless:

    one key priority is to Never Have To Convey System Error Messages to Users
    (you should note: I never said system errors - you did. The boxes can be used for anything)
    was the first thing she spoke, or rather, ranted about. "

    Funny thing about that ...CSS markup turns out Not to be the issue.
    No idea what you're on about here as this is not really related to your rant about usability.


    --


    I'll state this again: This is NOT a usability tutorial. It is a bunch of links to CSS message boxes. The TEXT on those boxes is down to you.

  7. #6
    Senior Member
    Join Date
    Nov 2005
    Posts
    488
    Member #
    11940
    Again - I didn't drag it in. If you concluded that I was intending it to be a usability tutorial from the line 'When designing usable websites, one key priority is to convey messages to your users.' you have looked into this WAY too much.

    Yup. Usable just kinda happens. Good point.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Quote Originally Posted by DC856 View Post
    When designing usable websites, one key priority is to Never Have To Convey System Error Messages to Users. They don't care. And it's not their problem.
    Who said anything about System Error Messages? I don't recall seeing anything in his post about what you should put in the boxes at all....

    I use error message boxes often in applications... 99% of the time to convey User Error Messages, e.g. "You have to log in to access this page" or "You're trying to access a file that doesn't belong to you."

    It's helpful to have a framework for rendering these messages to a user.

    Personally, I like jQuery UI's message boxes... very nice, and consistent with the rest of the UI themes they come with.

  9. #8
    Senior Member
    Join Date
    Nov 2005
    Posts
    488
    Member #
    11940
    99% of the time to convey User Error Messages, e.g. "You have to log in to access this page" or "You're trying to access a file that doesn't belong to you."
    Nothing in the tutorial said a thing about users. Why are you dragging user errors into a thread where the term user obviously doesn't belong. (see how that happens)

    No problem, I'll play along ....

    Okay, Sourceforge gives me the "you have to log in." In programmer-speak this is a user error, because hey -- I didn't log in.

    However, this is a sham. Sourceforge does have a "remember me" function. It just doesn't work. Remember Me works just about everywhere else ...programmers haven't been allowed to run wild and blame the user for the system's inabilities.

    It's not a user error. It's a system error which has been scapegoated to the user. The system error could be "The system is too under resourced, so we dump your login the instant you leave the site."

    Or it could be "The system programming is too inept to keep track of you."

    It's not a user error. The user didn't forget to log in. The user did not forget to register. The user did not fail to tic the Remember Me checkbox. It's a system error. As are file permissions, security, format, and so on.

    Unless you want to expunge the sentence containing usable websites. Or you think a usable website is whatever you say it is, no user need apply. All are system errors -- blamed on the user.

    Let us take format for a telephone number from a user error to a non issue.

    There are three ways to handle this. The first method tells the user that a specific format of input is required and returns them to the form with an error message if they fail to heed this instruction.

    The second method is to split the telephone number input into three fields. This method presents the user with two possible striking usability hurdles to overcome. First, the user might try to type the numbers in all at once and get stuck because they’ve just typed their entire telephone number into a box which only accepts three digits. The “ingenious” solution to this problem was to use JavaScript to automatically shift the focus to the next field when the digit limit is achieved. Has anyone else here made a typo in one of these types of forms and gone through the ridiculous process of trying to return focus to what Javascript sees as a completed field? Raise your hands; don’t be shy! Yes, I see all of you.

    Be reasonable; are we so afraid of regular expressions that we can’t strip extraneous characters from a single input field? Let the users type their telephone numbers in whatever they please. We can use a little quick programming to filter out what we don’t need.

    -- Sensible Forms: A Form Usability Checklist
    But wait. What if the user doesn't give a telephone number? Well, rather than accepting they don't want to, or will give a 555-FAKE number if it's a required field, we need to slap them down hard and fast with a message. That'll learn them uppity user folk what usable means.

    Because, the horror-filled alternative would be to take that refusal as feedback that you asked for a telephone number at the wrong time or in the wrong way. Perhaps because you didn't establish how or why a phone number would be used, or didn't provide a link to a privacy policy, or didn't establish enough credibility with the user to get a telephone number submitted.

    (I'll bet the girls love the "you are required to give me your telephone number" bit at the bars.)

    Again, it is totally my fault for taking the concept of designing usable websites and blowing it all out of proportion. Just like if the user can't learn a database programmer wants a number in a certain format for database integrity, that's clearly a user error of not loving database integrity and records protocol.

    Hey, you make usable and usability mean whatever you want. There is no system error you can't spin into the user's fault. So make them all user errors. Users will certainly get the unmistakable impression you've designed a usable website then.

    "When I use a word," Humpty Dumpty said, in rather a scornful tone, "it means just what I choose it to mean ? neither more nor less."
    It worked out well for Humpty Dumpty. Should work out equally as well for you experts in designing a usable site.

    Here's wishing you a great fall. (Hey ...it's October. Don't take a couple of words I write and blow them all out of proportion)

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    DC, your last post makes a lot of assumptions, e.g. that everyone who implements a "You must be logged in" error message does it as poorly as SourceForge or that everyone who implements a phone format error does it exactly as you mentioned.

    Re: phones: If a phone number is required, it's required... you can't form an argument based on the assumption that all users implement phone number requirement at the wrong time, and you can't honestly tell me that you believe there's ever a time in form development when some fields are not required. Since you must concede to the last statement, then you must also agree that your implied assumption that status messages to users are inately poor usability is misguided... Instead of arguing against the use of messages, you'd probably state your cause better to explain what's the right and wrong time to use them in an informational rather than argumentative manner. Making a tutorial on this would not be a bad idea, and would earn you great props in the community.

    From what I've seen of your posts here (and trust me, I read most of them), I have noticed that when you find statements lacking useful information, you reply to them aggressively as if they state the opposite of said useful information, and with a disdainful tone as if the lack of information necessarily means that the creator of said statements is lacking said knowledge. This demeanor tends to put people off from the valuable information you have to share, as people may easily mistake your posts for simple insults and stop reading after the first sentence. This is not good... people should all read your posts rather than being offended by them... I guess even you could use a lesson in usability... in terms of forum posting, anyway.

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    PS - The Bottom Line:

    Message boxes are a tool. This tutorial shows a few examples of pretty message box templates that can be used and suggests that using them can increase website usability. This is essentially the same as telling people where they can get a good hammer and explaining that they can use hammers to hang pictures in their home. If someone takes that hammer and puts a hole in his wall with it, he used the tool poorly.

    You can't blame Craftsman for making a tool that can be used poorly, and you can't blame the guy suggesting to buy Craftsman hammers for not explaining how to use them. The only derivable conclusion is that the person who suggested the use of the tool was assuming that people interested in those tools know how to use them, and that if they need help on function, they'll find that info elsewhere.

    Your above are akin to the following:

    Some guy: "Anyone who needs a hammer I suggest Craftsman and Stanley - both make great looking, long lasting hammers with a lifetime warranty! By the way, you can use hammers to hang up pictures and other neat stuff!"

    You: "The above post is ridiculous. Hammers are dangerous and possibly deadly tools. Telling people to use a hammer will ultimately lead to many, many broken thumbs when they misuse them. Here are 10 links on how to properly use a hammer."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

beaiful message box
,

beautiful css message box

,
beautiful css msgbox
,
beautiful message submit box css
,
best boxes design css
,
best error message box design
,
design css message box
,
elegant css alert box
,
get a sexy css form
,
sexy alert box css
Click on a term to search for related topics.
All times are GMT -6. The time now is 01:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com