The design profession is full of happy folks, and understanding why so many designers enjoy their work is not hard. But not all are so happy. If you’re not careful, the joy of getting paid to pursue your passion can be tainted by the less joyous realities of the professional world.You see, no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. This is true whether you work freelance, for an agency or in-house with a company.Every week I hear from designers who are struggling to come to terms with these realities. Unhappy with their current circumstances, they write to ask for advice on improving their lot. Usually, they either claim not to understand how things got so bad, or they lay the blame somewhere other than at their own feet. In every case, however, the sole cause is their poor choices and lack of professional acumen. It needn’t be so.Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Professional DiagnosisHere, I’ll paraphrase a few emails I’ve received from designers seeking advice. For each, I’ll diagnose the situation, explain in no uncertain terms what should have been done to avoid the situation and suggest a strategy the designer can follow to improve their circumstances.These circumstances are not uncommon. Many of you reading this are likely experiencing similar problems… or may at some point in the future. I hope that the information, advice and strategies presented here will help you avoid these and other problems.1. From A Freelance DesignerQuestion: “I recently graduated from design school and have started freelancing, and I’m wondering how you get clients? How do you get your name out there?”This person may just as well have jumped out of an airplane and then asked, “Now, how do I go about finding parachute? Oh, and should I land somewhere specific? How exactly do I do that?” Even so, this lack of foresight is quite common. The immediate lesson is that you shouldn’t become an independent professional with little to no professional experience, with no prospects and knowing little to nothing about the business.Fresh out of college or design school, you’re not a professional; you’re a technician (by definition, the opposite of professional). For the next few years you should be acquiring the skills, knowledge and understanding required of a design professional. The place to do this is in the company of peers and under the wings of mentors: at an agency or in house with a company. The successive lessons and built-in support system inherent in these environments are essential to a designer’s professional development.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years, while you let your agency or company carry the burden of acquiring clients and running the projects. If you are any good, in time you will earn the respect of your peers and superiors, establish a good reputation (spread by word of mouth) and acquire professional acumen. If in that time you make any effort at all to share your work and thoughts with the wider design or business community, your name will become known (through word of mouth and your portfolio or blog), and your reputation will be built on substance rather than on social marketing’s smoke and mirrors. This would be the appropriate time to embark on a freelance career.As a freelancer, you’ll be running the whole show. So, you’ve got to be an ace at finances and budgeting; at speaking with and converting potential clients; at knowing what to discuss in order to weed out unsuitable potential clients; at preparing all manner of legal and project-specific documents, writing proposals, project management, intra-project client communications (and being the confident, unflinching pro in the face of every client request, question and distasteful situation); at dealing with dozens of types of unforeseen issues without hesitation; at maintaining tax information and constantly preparing various tax and business forms; at marketing, preparing and maintaining your own branding and identity, with its various elements; and at knowing how to begin and conclude all kinds of projects confidently. Oh, and you’ll also need a constant flow of interested potential clients.If you’re not confident and accomplished in all of these areas, then you’re not ready to be a freelance designer.Freelancing is only suited to seasoned professionals. Pursuing a freelance career as your first step in the profession is almost always a foolish move. Professionalism is maintained by habit. If your first step is a misstep, you’ve set a poor tone for the work ahead. Unless you immediately correct your mistakes, the habits you’ll develop will be clumsy and unprofessional.The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years. You need to be good at whatever it is you are doing. Image source2. From An Agency DesignerQuestion: “I’m not very good at the discovery meeting with clients. I’m never really sure what to ask or how to figure out what sort of design they’re looking for. My project manager or C.D. usually ends up asking most of the design questions. What’s the best way to handle this situation?”This is a common issue for designers at agencies, especially those with little experience. Luckily, an agency is a good place to gain experience and competence. But the question signals a few issues that require attention.First of all, design questions are not really appropriate during the discovery process. Granted, specific branding constraints may need to be defined and understood, but the design you will craft will come not from the client’s judgment and understanding of design but from yours alone. The design will be your articulation of what they need, based mostly on their business aims, the website’s purpose, their customers’ needs and expectations, the end users’ specifics, etc. In fact, if you ask no design questions at all, you’re probably on the right track.Imagine for a moment that you’re a physician trying to determine the best course of treatment for your patient. In that situation, you would not ask the patient what he thinks should be prescribed. Instead you would inquire about his symptoms, history, environment, physical needs (e.g. is he a pro athlete, or does he simply need to be able to get around normally?). The answers to these questions will define the constraints and indicate the appropriate course of action. Your patient’s opinion on what prescription would be appropriate is likely irrelevant; he came to you because he lacks the ability to help himself.Go into the discovery meeting prepared. Before the meeting, learn as much as you can about the company, its history and its past and current activities. Script a list of questions—some specific to this client and some appropriate for any client—to get the ball rolling. These questions will serve as a springboard to more in-depth discussion, which in turn will flesh out what you need to know.One more thing: you’re the design professional and it’s your responsibility to conduct the project successfully. You (not the PM or CD) should be driving the discovery. Use your time at the agency to improve your discovery skills, taking on more responsibility with each successive client. Reflect on each project’s discovery process, and look for ways to improve the process and your questions. With time and effort, you should become competent in this essential part of the design process.3. From A Freelance DesignerQuestion: “Some of my clients expect three or four (or more) comps from me. But that’s a lot of work, and I would prefer to show just a couple. Should I just charge more if they want more comps? How do some designers get away with just one or two for all of their clients?”These are interesting questions, and they beg a couple more:Why is this designer allowing his clients, who are not designers, to set the number of design comps?Why is he letting quantitative preference rather than qualitative necessity frame his understanding of the issue?Good design is not found by picking from a pack of arbitrary options, but is rather the result of deliberate, contextual choices. Taking a scattershot approach to design is in no way effective. Your clients may not appreciate this, but you certainly should! Your responsibility is to ensure that your clients don’t shoot themselves in the foot.The only person who knows how many design options are appropriate is you: the designer who is engaged in the process. And in almost every case there is one best design solution. Sometimes another compelling direction is worth considering and presenting to the client, but this cannot be known until you have fully engaged in the process, conscious of the parameters specific to that project.In most cases, you’ll explore a host of options during the design process. A thorough exploration will cull a majority of the trials, leaving only the most appropriate and compelling candidate(s)—one or two. These and only these design options should be shown to the client. Inferior designs should never be presented, even to fulfill a request for more options (options for what: mediocrity?).As a freelance design professional, or even as an agency designer, your responsibility is to define how many design options to present in a given situation. If a potential client insists on a less effective and less professional process, do not agree to work with that client. Compromise never brings excellence and has no place in design or professionalism. If you become comfortable making this sort of compromise, other compromises will also become easy for you. Your clients deserve and are paying for more than a compromised design.4. From An Agency DesignerQuestion: “I seldom get to meet my clients before I present design comps to them. By that point, the projects almost always become a tiresome series of re-workings of my original ideas. How can I change this?”One wonders what these original ideas were based on if the designer has never met the clients. If so, either 1) this person is at the wrong agency, and/or 2) this person lacks the professional understanding or the backbone to insist that she decide how the agency should structure design projects and client-designer interaction.Relationships are built on trust, and trust is born of experience and understanding. Your client cannot trust someone they have never met and who they know nothing about. So, when designs are presented by someone the client has never met, no wonder the client is a bit reticent and inclined to second-guess the designer’s decisions. These and the ensuing problems are all a result of the designer’s failings. Yes, it’s on you. Always.As the designer and an aspiring professional, you must insist on driving the design process. This means that you must be the one to meet with the client in the beginning. If a project brief is required, you must be the one to create it, based on your direct conversations with the client and his team.If your agency has a process in place that prevents you from fulfilling your responsibilities, your options are either to change the process or to find a better agency. Anything less relegates you to an irresponsible practice in an unprofessional environment. Hopefully, this is not acceptable to you, because it would erode the habits you are professionally obliged to cultivate.5. From A Freelance DesignerQuestion: “I love to design, and I think I’m pretty good at it. But I’m not comfortable talking to clients. Whenever I’m on the phone or in front of a client, I get very nervous. I think my nervousness makes me seem less capable, and I’m pretty sure I lose some of my client’s confidence. What can I do to correct this? Should someone else do the talking?”Effective communication is one of a designer’s most important jobs. Every communication, whether by email or phone or in person, is an opportunity to demonstrate value and win confidence. And if you don’t demonstrate value, you’ll seldom win confidence. Like designer #1 above, you may simply not be prepared to be a freelance professional.If you fail in communicating, no matter how skilled a designer you are, you won’t get the chance to ply your skills very often, and seldom for the best clients. The best clients are those who invest complete trust in their designers. That trust must be earned before any actual designing happens (see designer #4 above).And no, someone else should not do the talking. The design professional’s job is to show confidence when dealing with clients. No one else can communicate your value or win trust for you. The reason clients distrust those who do not communicate with confidence is because this trait signals other incompetencies. This may sound harsh, but it’s a fact: if you’re not confident, it is because you lack capability (whether professional competence, design skill or perhaps vocabulary)… and you know it. Address this void, and your confidence will shine through.If you lack confidence in conversation, start to address this deficiency immediately or find another calling. Otherwise, you may have a bright future as a production artist somewhere, but not much of one as a design professional. Design professionals are experts at every aspect of interacting with people.Confidence aside, it goes without saying that excellent vocabulary is an important component of effective communication. People judge you by your words, as well they should. Knowing this, your professional responsibility is to work on your vocabulary, just as you work on your design ability: daily.ProfessionalismSkill in design is only part of what defines a competent professional. Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others (whether clients, co-workers, employees or others). Professionalism is also measured by how well you uphold ethical standards in making the difficult decisions in every area of your work.Talent and skill can make you a technician; and a technician is, as we noted, not a professional. For context, think of traditional professions: lawyers, doctors, architects. The enormous responsibility they are entrusted with, and their ability to carry out that responsibility across the scope of their work, makes these people professionals. Thus, an able professional would not be troubled by the questions posed in this article. Rather, they would know precisely how to proceed or how to circumvent these issues. If you have any of these questions, you may not be prepared to be a design professional.Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others. Image sourceAll of these situations result from designers believing that being a good designer is good enough. This profession has little room for those who lack a professional’s integrity and broad understanding. Designers who are willing to compromise and simply accept the faulty decisions that are handed to them have had their profession stolen from them. These designers have no business working with clients who pay good money for professional service.Be better than this. Your first step to success is to assume your rightful responsibility for everything that involves you. Dissatisfied with the flawed structure at your agency? You chose to work there; change your circumstances. Frustrated by your perpetual lack of prospects and stalled reputation? Sounds like you’ve got deficiencies to address. Overwhelmed by the challenges and complexities inherent in freelancing? You probably started freelancing without sufficient preparation.Fix it. You fix it. It’s all on you.Designers: you get paid to do what you love. How great is that!? But this fortunate and enviable situation leads to fulfillment only if you take full ownership of your profession. Otherwise, you’re carrying a time bomb. When it goes off, your career will either falter or be blown to smithereens. Don’t let this happen to you. Educate yourself. Have the courage and integrity to habitually make good choices so that you enjoy a long and happy career as a design professional.(al)© Andy Rutledge for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
-
I posted to smashingmagazine.com
Common Questions About Design Professionalism
http://feedproxy.google.com/~r/SmashingMagazine/~3/7qu5CVgPA00/
March 8 2010, 1:48am | Comments »
-
I posted to smashingmagazine.com
Handy Tools and Tips for E-Commerce Websites
http://feedproxy.google.com/~r/SmashingMagazine/~3/k8MVnJnihd4/
Running an e-commerce website is a never-ending task, from trying to squeeze that extra bit of conversion rate out of the check-out page to figuring out which referrers give you the best traffic. There’s also a plethora of tools out there to help you achieve your goals. But which ones do what, and why should you use some of them? This article introduces some of these tools and offers a tip or two on how to use them.If you own or operate an e-commerce webs, you’ll find one or two things that you haven’t tried before. If you’re new to e-commerce, this article should give you insight into some of the possibilities available to you as you enter the market. A plethora of merchants out there could benefit from lower-cost e-commerce help and advice. Covered in this article are analytics tips, visualisation tools, product page tips, checkout tips,li>4 testing tools to try right now and a final tip.This article is only the tip of the iceberg. If you have any tips on usability, the check-out process, product pages, analytics or testing, please add them to the comments, so that this article becomes even more useful to readers.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]AnalyticsAnalytics are the key to knowing what’s going on with your website. This section gives five tips for using Google Analytics to get the most out of your stats. If you have a high-traffic e-commerce website or wish to get even more in-depth with analytics, it might also be worth considering some higher-level analytics packages such as Coremetrics, Omniture or Webtrends.We’ll focus here on more advanced analytics with the Google tool and assume that you know the basics of metrics.Analytics Tip 1: Advanced SegmentsAdvanced segments allow you to do everything you normally do with Analytics, but with only on a small subset of data. How is this useful? Say your e-commerce website serves both the UK and US. You could create two advanced segments, one for your US visitors and one for your UK visitors. This allows you to zero in on how your US visitors differ from your UK visitors in terms of purchasing habits, website usage, searches and so on.Also, why not compare two or more different referrer sources by a number of metrics to see which provides better-quality traffic? The list is endless and limited only by your imagination.Want to find out more with more examples? Read Avinash Kaushik’s advanced segments article.Analytics Tip 2: Custom ReportsLet’s face it: the default reports in Google Analytics aren’t superb; they don’t tell you what you really want to know. That’s where custom reports come in.You can add the metrics that matter to you, on the dimensions you want to see. An example would be a report of referring websites, with their average per-visit value, bounce rates and time spent on site (see graphic above).This report is so much more useful than your standard referrers report, with better information in one place.Analytics Tip 3: Advanced FiltersIn the example above, the report gave me 392 rows of information. In a world of top 10s and top 25s, humans can’t process that many rows and make sense of that information.This is where advanced filters come in. If we want to find the best-quality referrers on the list, we can get Google Analytics to filter out what we don’t want. Click “Advanced filter” at the bottom of the page and add this:This brings our 392 sources down to just 8; knowing what those 8 are is great. The filters above exclude all direct traffic (because we want to identify referring websites) and mail server referrals (we’re looking for websites), and they give us the highest success rates on per-visit value. Quick, valuable data.Analytics Tip 4: IntelligenceThis is a newer feature of Google Analytics, one that does some heavy lifting for you. Intelligence allows you to see changing traffic patterns without having to set up reports for everything you want to track. If one day your bounce rate goes up by 10%, you’ll see an alert and won’t have to rely on spotting it.This is really useful for discovering patterns. The image to the right shows an alert we got for one of our websites for which the bounce rate went through the roof. There was obvious panic until we realized that the last date to submit orders in time for Christmas had just passed. Panic over. The message on the home page was the cause of the spike in the bounce rate. We were notified of the issue quickly and could dig right away for the cause.Other Analytics ToolsWe’ve focused here mainly on Google Analytics because it is so widely used. However, that’s not to disrespect the plethora of worthy analytics tools out there:Clicky An interesting take on analytics: more useful standard reports and immediately accessible data, but lacks power user features.Motally Mobile analytics. If your website has high mobile phone usage, then you should try this tool to see more in-depth analytics.VisualizationData can be pretty overwhelming when you have thousands of entries. Visualization gives you quick insight into your data without overloading.Visualization Tip 1: WordleA genius service from Jonathan Feinburg, Worlde allows you to enter any kind of textual information and get a visual representation of that text on the screen. This is very useful for getting an overall view of your keywords and the structure of what’s going into your website. My blog returns the following visualization.What does this tell me? Well, given how much I’ve written about e-commerce, that word doesn’t appear! So, I need to pay much closer attention to my keyword selection and usage. I also need to pay attention to why the word “offline” is so big.If you need to export more than 500 words out of Google Analytics for your keyword report, check out this tutorial.Visualization Tip 2: Heat MapsHeat maps give you an easy way to look at your important pages without having to scour rows of data on your top content. They also provide much-needed information on what people are doing relative to the page size, length and placement of items, which data cannot do alone.Run heat maps on your most important pages: check-out pages, product pages, search pages. This will give you quick, useful information on whether people seem to be glossing over vital information or ignoring key functionality.Key questions could be:Are people finding my calls to action (such as “Add to basket”) easily?Is an important part of my navigation being ignored?Are page elements taking up space that no one is noticing?Crazy Egg is a decent heat map service. Another good tool is clickdensity.Visualization Tip 3: Website Overlay ToolThis feature in Google Analytics overlays percentages, conversion rates and other usable statistics on pages to tell you what people have done and clicked on different pages. Most usable is that when you click on a link you’re taken to that page, with the overlay in place, allowing you to see how people are navigating the website. Did 20% of visitors go to the next most important page after this one? Is that what you were projecting? Gems of information abound.Visualization Tip 4: ScrutinizerLearning how users view your website without having to ask them can be very beneficial. Of course, user testing has no true substitute, but a few tools can help:Scrutinizer shows you slowly how people may be viewing your website. It applies a filter over top the website, spotlighting the area where your mouse is pointing at. I don’t know the science behind it, but it might be useful to get users to perform tasks while the filter is applied; it would really show usability.Visualization Tip 5: Feng GUIFeng GUI allows you to look at any marketing piece (including a website) to see which parts attract attention and in what order. It uses algorithms to simulate eye-tracking and is useful for seeing whether what you thought was prominent really is. Not a substitute for user testing either, though.Product Page TipsOne of they keys to e-commerce success is a good product page. Here are a few tips to improve your product pages.Product Page Tip 1: Obvious Call To ActionYour “Add to basket” button is obviously key to your e-commerce website’s success. Make sure the button is not hidden, too small or confusing in any way. It should be above the fold and not difficult to click.Get Elastic has a good article on “Add to cart” buttons; an oldie but a goodie on statistics, even if the buttons are a bit out of date.Product Page Tip 2: Delivery InformationDo not withhold delivery information till the last minute when people are checking out. It leads to mass frustration and ill feeling towards your website. Make sure people can see an item’s stock status (”in stock,” “out of stock,” “date expected back in stock”) and the delivery lead time. This will prevent a slew of customers from abandoning their baskets further along the check-out process.The image above is from Play.com: delivery cost, dispatch estimate and stock levels. Great job.Product Page Tip 3: Progressive Disclosure of InformationPeople are very different in how they want to consume information. Some prefer social information such as reviews, ratings and comments. Others prefer technical specifications. Still others like to read a store’s description of a product (if it’s well written).The point is to give everyone access to the information they want without cluttering the page. Whether it’s grouping information under different tabs or providing a “More details” link, there are many ways to give progressively more information. Without compromising the layout, this should give 80% of visitors what they need.The image above is from Currys, an electronics retailer. It has main bullet points for each product and a “More info” link. The link merely takes you further down the page, but it prevents the top of the screen from being cluttered with information that many people may not be interested in.Product Page Tip 4: Copy Is KingMake sure your copy is well written and unique. Too many websites use the standard manufacturer’s description. This harms you two-fold. First, the copy is in so many other places on the Internet that your SEO will be harmed. Secondly, you’re not giving the purchaser any reason why they should purchase that product from you. Good copy should inspire confidence in you and the product as well as give your personal slant on the product, thus building your website’s personality.Hire a copy-writer, or do it yourself. But do it. Even if a product is your top revenue generator, still do something!Check-Out TipsDon’t let this last hurdle of purchasing trip you up.Check-Out Tip 1: Allow Guests to Check OutYou need to be able to give very good reasons why forcing guests to register to purchase products is essential. Think of offline shopping. Do you have to open an account with a news agent to buy a newspaper? Of course not. Don’t make that mistake online. Allow guests to check out.But you also need to sell reasons why guests should register. It’s all about making it easy, now and in future.Check-Out Tip 2: Enclose the Check-Out ProcessOnce someone wants to check out, the process should be as fast and slick as possible. Remove distractions, including ads, navigation and offers that might distract them from what they are trying to accomplish, which is to pay.Some will say this stage is a great opportunity to up-sell or feature related products. I disagree. That can be done effectively on the product page or just after the product has been added to the basket. Distracting the visitor or encouraging them to choose something else before giving you their money is an invitation to them to abandon their cart.Check-Out Tip 3: Ask for Feedback After the Visitor Has Submitted Their OrderOnce a visitor has converted, rather than show the standard confirmation page, why not also ask for some feedback on their experience? SurveyMonkey lets you quickly build an online survey, including questions such as:“On a scale of 1 to 10, were you able to easily find what you were looking for?”“Was there something in you particularly liked or disliked about our website?”“On a scale of 1 to 10, how easy was the check-out process?”“Please tell us what we can do to improve your next visit?”This qualitative feedback is invaluable to e-commerce website owners. Sure, not everyone will fill out the survey, but several will be more than willing to voice their opinions. If you do this, though, remember to follow up to let people know what you’ve changed and why.Check-Out Tip 4: Handle Errors GracefullyProblems occur during the check-out stage. Cards are declined, people enter invalid email addresses and they forget to specify their preferred delivery method. To cover all eventualities, you should display messages that are:Contextual Put the message next to where the error occurred.Useful No “Error code 21″ messages please. Write friendly, useful error messages, such as, “Sorry, we believe your email address is invalid. Did you accidentally add an extra full stop or space?”Conventional Error messages should be red. People understand that red indicates a problem.Luke Wroblewski has a great article on A List Apart about this.Testing ToolsTest, test, test: the mantra of all e-commerce website creators. Only your market knows the answers.Testing Tool 1: UserTesting.comAt only $29 a test, UserTesting.com delivers incredible value for the money. For $290, you choose the test to be carried out and the demographics of the audience, and hit “Go.” Not much later, you get 10 pieces of highly detailed video and written feedback. The information contained in those reports will earn you a lot more revenue than $290.Spend some time thinking about the type of people you want to participate in your testing. If you run a baby clothing website, naturally you would want mothers to participate in the testing. However, it might also be useful to run the tests on fathers as well as aunts and uncles (typical gift purchasers) because their purchasing behavior is very different.Possible briefs are:Find, evaluate and purchase product x.Find the information on delivery.Purchase our gift voucher.Testing Tool 2: Google Website OptimizerA lot has been written about Google Website Optimizer. It’s easy to use, so give it a run. It’s great for testing different “Add to cart” buttons to see which gets a better conversion rate.The main advantage of Google Website Optimizer is that you can test things on your actual market (whereas services like UserTesting.com merely attempt to match your target market). This also means that you’re able to choose how large a percentage of your traffic to test and thus achieve statistical relevance.Bryan Eisenberg has written a great book about it.Testing Tool 3: 5-Second TestThis does what its name implies: gives you quick feedback on your website—entirely subjective feedback, of course, but interesting when used in conjunction with analytics to correlate the data.It can be very useful to testing elements you want to be prominent. What’s the purpose of your website? Where’s the call to action? And exept for some premium features, it’s free. No brainer? Indeed.Testing Tool 4: SEO ToolsSEOmoz, GeoTarget, Linkscape and Trifecta are four among many tools you can use to test your website’s on-page and off-page SEO scores. They can quickly identify problems with your website so that you can fix them and hopefully improve your ranking.Final TipTechnologies come and go. Who knows what we’ll be using for analytics in five years’ time or what kind of information we’ll be tracking across devices and channels. The key to a good e-commerce strategy is customer insight and engagement. In other words, find out what people want, and give it to them (in an engaging way). Always be listening, asking questions and monitoring every facet of your website, business, industry and competition, and use whatever technology is appropriate to help you achieve your goals.(al)© Rob Smith for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ecommerce
March 6 2010, 2:47am | Comments »
-
I posted to smashingmagazine.com
Print Magazines for Web Designers, Digital Artists, and Photographers
http://feedproxy.google.com/~r/SmashingMagazine/~3/T8bvDbQBALw/
Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and high-quality print publications.Print magazines, more often than not, are well-researched and are headed by top-notch editorial staff, usually containing information and resources on the cutting edge of their respective industries’ trends and happenings.To that end, to help you fulfill part of your offline research needs, I’ve compiled a list of print magazines that are of interest to professionals in three different categories: Web Designers, Digital Artists, and Photographers. And be sure to comment so you can tell us your personal favourite print magazine, if you don’t see it listed here.You may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Magazines for Web Designers.net Magazine / Practical Web Design.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today. If you’re serious about web design, then .net is the magazine for you. This is easily the best and most important magazine for web professionals, and it should be noted that .net is sold as Practical Web Design overseas.Visit the .Net Magazine / Practical Web Design official websiteWeb DesignerWeb Designer will help you design and develop stunning websites, providing exclusive interviews, professional advice, behind-the-scenes features with top developers and agencies, site showcases, plus how-to articles and tips for a variety of design and development software.Visit the Web Designer Magazine official websiteMagazines for Digital ArtistsComputer ArtsThe world’s best-selling creative magazine will inspire you, bring you the inside track on the creative industry, and reveal cutting edge skills and techniques. Every issue showcases the best illustrators, graphic designers and web designers from around the world. The tutorials section is the envy of the industry, giving you the skills and inspiration you need to be a better artist.Visit the Computer Arts official websitePhotoshop UserPhotoshop User is more than just an amazing Photoshop resource, it’s also the official publication of the National Association of Photoshop Professionals (NAAPP). Each issue includes behind-the-scenes features, how-to articles, help desk Q&A, step-by-step tutorials, and down & dirty tricks. Photoshop User is widely recognized as the most trusted resource for Adobe Photoshop and Lightroom training, advice, and how-to information for the graphic design, photography, and digital arts worlds.Visit the Photoshop User official websitePhotoshop CreativePhotoshop Creative provides Photoshop users with lashings of practical advice and inspiration. Whether you’re brand new to the program or simply looking to improve your existing skills, this is the magazine for you. We don’t like to leave anyone out, so we want to make sure there’s something for everyone – from the Adobe Photoshop Elements user right through to those lucky enough to own Photoshop CS3.Visit the Photoshop Creative official websiteDigital ArtistDigital Artist is the perfect magazine for anyone who uses their computer as a canvas. It is the only community-focused magazine to cover all art styles and all art software, making each issue a medley of breathtaking images to inspire you to create your own. The magazine includes tutorials and guides, an extensive Q&A section, reports on new artists and their current projects, plus interviews, features, and galleries.Visit the Digital Artist official websiteCorel PainterThe official Corel Magazine, offering professional tips and techniques, digital art concepts and theory, special effects, and more.Visit the Corel Painter official website3D Artist3D Artist is dedicated to bringing you interviews with leading lights in the 3D industry, fascinating features on development and technologies that are shaping what you see on TV and in film, in advertising and architecture and in good old art. The magazine showcases the best and most exciting 3D images every month with a monster 11-page gallery.Visit the 3D Artist official website3D World3D World is a high-quality magazine crammed full of news, inspiration and practical advice about 3D graphics. Includes news and analysis of all the latest trends in the 3D industry, in-depth reports on the hottest new 3D projects, detailed, step-by-step technical walkthroughs, artistic and creative advice from professionals at leading international studios, and impartial reviews of the latest creative hardware and software.Visit the 3D World official websiteLayersLayers is the only magazine that covers everything Adobe Creative Suite 4 has to offer. Each issue is filled with top-notch tips and techniques for Adobe Illustrator, InDesign, Photoshop, Flash, Acrobat, Lightroom, After Effects, Dreamweaver, and more.Visit the Layers official websiteMagazines for PhotographersPractical PhotographyPractical Photography delivers a diverse range of content that teaches photo enthusiasts to take better photos and how to creatively enhance them in Photoshop.Visit the Practical Photography official websitePhoto TechniquePhoto Technique philosophy is that the photographic medium has never existed on the basis of unrelated techniques or unskilled aesthetics. For that reason, they incorporate the technology and methodology used in creating photographs into two categories. The first is a series of portfolio/article combinations that demonstrate both the means and the end result. The second is expanded technical articles intended to completely follow a process in detail, rather than offer short snip-its or tips. The magazine will never address the interest of a point-and-shoot mentality; the intent is to elevate the magazine to a more professional level.Visit the Photo Technique official websitePhoto ProIf you’re a working photographer or have dreams of setting up your own photographic business, this is the magazine for you. Every issue of Photo Pro is packed with inspirational images, expert advice and reviews of the kit that you need to get ahead. There’s also must-read business guidance from successful working photographers. It’s the ultimate manual for modern pros.Visit the Photo Pro official websitePopular PhotographyPopular Photography is the world’s largest photography magazine and the leading technical authority, buyers guide and how-to resource for the photo enthusiast. Geared toward those who are passionate about photography, each monthly issue presents unmatched technical expertise and a wide range of articles on the technique, craft and equipment used in making outstanding images.Visit the Popular Photography official websitePhotography MonthlyPhotography Monthly is the UK’s most interactive photography magazine, featuring expert advice, product reviews, tips and techniques, and more.Visit the Photography Monthly official websiteDigital PhotoOnline and on newsstands, Digital Photo (formerly PC Photo) is the top digital photography magazine. Get the latest news, equipment reviews and previews, photography tips and more.Visit the Digital Photo official websitePhoto LifeFor over 30 years, Canadian photography amateurs and professionals have turned to Photo Life as a partner in furthering their photographic skills. The magazine covers all aspects of photography, including industry news, photographic techniques and tips, field tests, travel, digital, secrets of the trade, and much more. Photo Life has something for everyone, plus it’s supplemented with images from some of the country’s best photographers, including those of our readers.Visit the Photo Life official websitePhoto District News (PDN)Photo District News (PDN), the award-winning monthly magazine for the professional photographer, has been covering the professional photographic industry for over two decades. Every month, PDN delivers unbiased news and analysis, interviews, and portfolios of the latest photographic work. PDN delivers the information photographers need to survive in a competitive business – from marketing and business advice to legal issues, photographic techniques, new technologies, and more.Visit the PDN official websiteRelated Resources12 Print Magazines for Web and Graphic DesignersGraphic Design Magazines at Design Dump14 Essential Magazines for Graphic DesignersRelated PostsYou may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesProfessional Web Design ForumsUseful Podcasts For Designers And DevelopersUseful Web Design E-Mail Newsletters© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
March 5 2010, 5:32am | Comments »
-
I posted to smashingmagazine.com
Usability Review of Charity Websites Taking the Lead
http://feedproxy.google.com/~r/SmashingMagazine/~3/JyflCWoD4zM/
Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.Below we look at charity websites which have successfully developed their online brand using modern and creative ideas. We will also discuss how each charity website can be improved because, as we all know, not every website is perfect. There are always improvements to the design or usability that may have been overlooked by management, designers, or developers.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]1. Red Nose DayRed Nose Day is a fundraising event dedicated to raising money for Comic Relief.As you can see above, the Red Nose Day website design combines many different techniques to achieve a highly-minimalist and playful design. Throughout the website you can find non-web-based font headings implemented using sIFR, feature panels built in Flash and a striking navigation, built using CSS Sprites.The design uses a simplistic colour scheme of white, black and red. Using red along with black and white has a high impact on the user, and of course reinforces the “Red” in “Red Nose Day”. The red is predominantly used on call-to-action areas since it is effective in drawing the user’s eye.Donate button featured in Red Nose Day’s headerBecause the Red Nose Day campaign reaches such a wide audience, the website design achieves the perfect balance between comical elements and factual information. Satisfying the requirements of such different audiences — the younger generation and more mature users — is a tough job and Comic Relief have managed it effectively and impressively.ImprovementsNowadays, making content accessible should be a routine part of any site’s development. Unfortunately, the Red Nose Day design makes heavy use of light grey text on a white background. This lack of contrast can prove difficult for users with poor eyesight. A way to improve this would be to use a much darker grey or black in order to increase the contrast between the text and background. Alternatively, they could offer this option through user-controlled accessibility website tools.As mentioned above, the purpose of the Red Nose Day event is to raise money for Comic Relief. As a visitor to the site, I would be interested to know the progress of the fundraising efforts. While a counter is included on some of the content pages, it would be more beneficial to the user if it was also displayed on the home page. This demonstrates to the user that the charity is currently active. Of course, they may have their reasons for excluding it from the home page that we’re not aware of.Fund raising total featured on Red Nose Day content pages2. Give Us A LiftThe Give us a lift campaign website, run by WRVS is aimed at raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport.The design makes use of a large background image and cardboard cutouts to portray the theme of hitchhiking. Along with a striking colour scheme of a dark background with contrasting pink, green and blue elements, the design makes a big first impression on the user. These contrasting colours are carried through onto the content pages and, in the sidebar, two main call-to-action links in purple and green ask the user to either donate or volunteer.A speedometer Flash element is positioned to the base of the page counting the number of volunteers. Due to this unique idea and design, the user’s eye is drawn down to the bottom of the page where another two call-to-action links can be found.This campaign website makes heavy use of Flash elements in order to display donation totals, volunteer totals (in the speedometer), and the winners to the campaign’s Twitter competition. It is unusual to see such creative elements within a charity design and it’s refreshing to see a website that understands the content that needs to be communicated — but doesn’t sacrifice engaging creativity.Twitter winners from the Give us a lift campaign websiteThough the high impact design would have a stronger response from a younger audience, the website also caters for the older generation with attention to accessibility. On all content pages, a button can be found to increase the content’s font size using jQuery. Also, a dark font colour is used to add high contrast between the text and background.ImprovementsAs mentioned above, the Give Us A Lift campaign website makes heavy use of JavaScript and Flash to display its contents. These elements could become unusable for the older user base as they may not have Flash installed, or have disabled JavaScript — making the video section impossible to use. The heavy use of Flash elements also increases page-load times. When implementing these elements, it is important to optimise the Flash and cater for circumstances where Flash may not be installed or JavaScript is disabled.While the designer of the website has obviously tried to pay much attention to all of the details, with many elements popping out to the user, the main navigation seems to be lost and this can cause a problem for the user if they cannot instantly recognise the main source of navigation. This may be because the navigation not being featured within the main layout container; also, the lack of background colour makes it blend into the dark background image and the user could find it difficult to read the grey text on black. Brightening these elements and making them stand out more would make this design more polished and create a much happier user experience.The Twitter page on the campaign website features a stripped-down version of Twitter’s feed widget. Though it is great to see this integration of social media into the website, the lack of creativity and separation between tweets creates an element that resembles Google Ads. This would obviously cause problems since the majority would most likely ignore this part of the page.Comparison of Twitter Feed with Google Ads3. ChildLineChildLine is a charity set up to aid children with a variety of problems ranging from helping with sexual and physical abuse to answering questions about concerns for parents and other family members.The target audience of the ChildLine website is of a younger age, therefore the design reflects a very animated theme with cartoon characters repeated in the background, large font sizes and a bright colour scheme. The cartoon characters are also a representation of what the child might be feeling when visiting the website — a subliminal message that ChildLine understands what they are feeling, and can offer help.Throughout the website, a yellow tab is fixed to the left side of the page and acts as a panic button for the user to click if they wish to quickly hide the website by sending the user to the Google home page. This implementation is similar to the “Feedback” button that popular sites use as part of the Get Satisfaction service.Hide page tab from ChildLine websiteChildren are always looking to customise anything they can: desktop backgrounds, icons, Myspace layouts, etc. So ChildLine have made use of the MooTools JavaScript framework in order to allow the user to change the background colour and image of the website. After clicking the ‘Change Wallpaper’ tab at the top of the page, a white panel slides down for the user to customise the wallpaper of the site. These slide-down panels are used on many websites to display hidden forms and content.A question is raised as to whether it is appropriate to allow this level of customisation on this kind of website. From a child’s perspective, however, this can create a fun user experience and a safe environment that they enjoy visiting. This creates trust between the child and the charity, which is an invaluable benefit. This sense of fun and trust will also mean the child is more likely return to the site.Change wallpaper panel from ChildLine websiteImprovementsAn important part of the ChildLine website is to offer help and protection to children in need. The “Hide Page” tab discussed above is an invaluable part of this website, helping children navigate away quickly if the need arises. A similar offering is a footer link labeled “Cover Your Tracks”. This gives the child information on clearing traces of their website visit from their computer.Though the pull-down panel is great for small amounts of content (for example, the wallpaper customisation), large amounts of content can disrupt the page flow. At the top of the ChildLine design, “Accessibility” and “Help” tabs are used to display large amounts of text on the relevant topic. This heavy amount of content pushes the main content of the page down below the fold and can cause confusion. A way to improve the usability of these sections would be to take the user to a new content page where headings, white space and imagery can help break up the lengthy content.Earlier we spoke about the bold repeating background that’s heavily featured in the design. When scrolling down a long content page, this repeating background can disrupt the user’s flow and be quite harsh on the eyes. Making the background image fixed (by simply adding background-attachment: fixed; to the CSS), the user will find reading down the page a lot easier and not be distracted by the moving background when scrolling.The yellow “Hide Page” tab can for some users be easily lost in the bright colour scheme and bold background. Due to the idea of emergency and panic behind this button, perhaps swapping the yellow for a red could provoke an automatic user response. The use of red would also mean that this tab would be harder to lose in the colors.4. WWFWWF is the world leading charity in the conservation of wildlife.The design for the WWF website is very different from the other three charity websites we’ve considered. The layout is very clean, grid-based, and focuses heavily on high-quality imagery to add a polished finish. By using a clean, organised layout and relying on eye-catching photography, the user is drawn to focus on what is important to the charity: its content and purpose. The WWF’s user base would be a more sophisticated and older generation than that of, say, ChildLine, so the user may be less daunted or afraid to read the content.The features panel on the home page uses jQuery to rotate through different stories, latest news, and call-to-action buttons. Though the jQuery was custom written, it is possible to replicate using jQuery plugins or following tutorials such as Creating a Slick Auto-Playing Featured Content Slider on CSS-Tricks.A neutral colour scheme of white, black, and grey is used to make any important call-to-action buttons more visible. These buttons have a striking green or orange background. When the user moves into the donate section of the charity website, the design is cut down to the bare minimum, again allowing the user to focus on the core messages. All navigation and unnecessary buttons are removed.WWF donate now sectionImprovementsIn contrast to the other charity websites, it would seem that the primary objective of the WWF website is to teach users their purpose and goals. A lot of the content and call-to-action links are aimed at making the user read about the charity and what they can achieve. The “What We Do”, “How You can Help” and “Donate Now” buttons in the header vary in size, the former two being larger than the latter. This difference in size reaffirms that the charity feels that an understanding of their goals is important prior to donating. Users rank the importance of elements by their difference in size. If the charity wished to push more donations in the future, it would be effective to swap the sizes between these call-to-action buttons in the header, giving the ‘Donate Now’ call-to-action a higher importance to the user.Varying call-to-action sizes in WWF design headerAs part of the WWF design, a description of what a £10 donation could purchase, or how it could help the charity, is featured within a panel. However, when within the donation section of the website, a £10 radio button is not offered to the user, potentially causing confusion. The user is then left with the options of £5.00, £25.00 or entering their own value. There is quite a large leap between the two default amounts, and the user may be inclined to opt for the £5.00 option. Contradictory to the prior emphasis placed on the importance of £10.00 as a donation value, it would be interesting to know how many users opted for £5.00 but perhaps would’ve been willing to donate £10. Perhaps including this as a middle-ground default donation amount would be a nice addition.5. MacmillanThe Macmillan Cancer Support charity offers help to those living with cancer and their families.When the Macmillan Cancer Support website initially loads, the user may feel overwhelmed by the amount of information and links on the page. However, this portrays to the user that the website and charity have much advice and support to offer. A way in which the design tries to break down the information, is by compartmentalising everything into panels which can be closed and re-opened via jQuery as the user sees fit.An improvement on this, and in effect making the initial page load less daunting for the user, would be to have some the panels already collapsed. Therefore the user can expand only those they wish to read more about.Collapsible panels on Macmillan Cancer Support home pageThese panels on the home page use block headings with strong background colours to make defining sections and sub-sections easier for the user. Dark green headings are used to define a new section, whereas a lighter green heading is used to define a new sub-section. By making these headings so definitive the user can break the content down into more readable chunks.The bright colour scheme used in this design can create an emotional response from the user. The user may be made to feel more light-hearted and hopeful through the use of warm earth colours.ImprovementsThe Macmillan design makes use of a lot of call-to-action buttons with distinct background colours. Unfortunately these links are left as inline elements, meaning that only the text is clickable. It would be more user friendly if these were block-level elements where the click area of the link would include these strong background colours. By increasing the clickable area, the chances of a successful click from the user is heavily increased.The charity’s name and tag-line are displayed in the top left, as is customary. These elements, however, are not clickable, so this could cause brief confusion when the user is looking for a link to the home page.Unclickable Macmillan title and tag-line in headerA large usability error on the Macmillan sign-in form is the lack of labels within or next to the appropriate fields. The user is left confused and must guess what information to put in which field. Though users are used to entering two pieces of information (user name and password), it is not clear whether the site requires a username or email address. As internet users, we have a long list of websites which we hold accounts for, all with varying requirements for a successful login. On the “Online Community” page, the same form uses labels within the fields (JavaScript is used to remove these labels when the user focuses on the field). To improve the consistency of the website and allow for a more user-friendly form, these labels should be applied across the website.Sign-In Form without appropriate labels on Macmillan website6. DogsTrustDogsTrust is a charity that aims at finding homes for stray and abandoned dogs.The DogsTrust design uses a high-impact colour scheme mainly consisting of yellow, black and white. The yellow immediately catches the user’s attention, and can be interpreted as a positive, happy colour.The main site navigation features many commonly-used techniques such as rounded corners, gradients, and a subtle 1px white line across the top. These elements, combined with the black create a visually effective navigation. The navigation only consists of five links, therefore giving users fewer choice, and creating a more focused user journey.DogsTrust website’s main site navigationThe home page design consists of minimal content and uses effective white space to allow everything to appear above the fold without looking cluttered. The users of the DogsTrust website are highly likely to be dog lovers and therefore the use of dog imagery on the four main call-to-action areas would certainly draw the user’s attention. These areas also feature four varying colours which contrast well with the yellow and black.Call-to-action areas with dog imagery and contrasting coloursImprovementsThough we briefly discussed above that the home page uses whitespace effectively to reduce clutter, the header contains many links and words; the user could get easily confused. With login, register, contact, privacy and shopping links, a search form, and two taglines, the user is given too much choice, so this section could be improved.While going through the process of donating, there are certain fields that cause the page to refresh and brings the user back to the top of the page again. The user is then required to scroll back down the page to continue filling out the form. During this process, this page refresh occurs 3 times, which can be rather annoying. It would be beneficial to develop the form using alternatives technologies, such as Ajax, which would remove the need for page refreshes.The imagery on the DogsTrust website features happy, healthy dogs that need re-homing. It is assumed that this use of imagery is successful in receiving donations or re-homing dogs. However, similar charities make use of imagery where the dogs appear unhealthy and unhappy. It could prove useful for the organisers of DogsTrust to try out this type of imagery alongside the current images through A/B testing, therefore seeing which type of image is more effective in converting website users into contributors.7. ShelterShelter is a housing and homelessness charity providing advice, information, and advocacy to people in housing need.The logo featured in Shelter’s design is simple and effective. While being easy to read, the typography of the “h” is suggestive of the charity’s purpose. By using the colour red, the user is given a sense of urgency. The audience of the Shelter website varies a lot from a younger to an older generation, therefore the design is very refrained and simplistic. This allows the message to be portrayed through the content rather than through heavily-designed elements.Throughout the design you will notice use of solid horizontal borders and lines which give a sense of structure and organisation. The lines allow the user to break the content up and be more easily read, but can also be interpreted as a symbol of shelter.The footer features links to social media profiles such as Twitter, Facebook, and YouTube. This suggests to the user that the charity is up to date with the latest trends and advertising techniques. Users may be intrigued to click these icons and discover more content.These social media icons also use jQuery to create a nice rollover effect which highlights and changes the text underneath to a descriptive caption of the icon.Rollover effect on Shelter’s social media iconsImprovementsWhen browsing the Shelter website, the user can find themselves clicking through a lot of links until they find the page they want. This can be due to the large amount of call-to-action buttons and lack of whitespace on certain pages. By increasing the whitespace between elements, an easier user experience can be created and also makes content easier to break down and consume.Example page with large amounts of links where whitespace can be improvedAgain, while browsing the child pages of the Shelter charity website, links to the donate section are easily lost among all the call-to-action areas, pictures, and content. Perhaps by making the background of the “Donate” tab in the top navigation red, utilising the red from the existing colour scheme, this may draw the user’s eye. The user would spend less time trying to locate the donate section.8. Sponsor LeeThough not a charity website, Sponsor Lee is a microsite intended to raise money for Action for Kids charity.Using a cool colour scheme of blue, silver, and white, along with friendly vector illustrations, gives the user a professional impression. This is important because the user wants to believe they are giving money to a good cause and not being ripped off. Lee Munroe, the designer of the site has been clever with his use of the fold as all important information is displayed at the top. Though users are not afraid to scroll, they do not have to look too hard to find the information they need.Included in the header is a progress total and aim for the sponsorship. By including this in the design, the campaign is made to feel more realistic and the user can then identify with how much of a difference they, themselves, can make. Now the campaign has finished, users can see how well Lee has done against his target. By putting this total in yellow, the number stands out and the user can see immediately that Lee beat his target.ImprovementsThe Sponsor Lee website displays a lot of creativity from the colour scheme to illustrations in the header. Unfortunately towards the bottom of the design, it comes across that parts are unfinished or broken, for example the social media links and footer. This can give an impression of lack of commitment or a rushed process.Sponsor Lee website footer9. ShelterBoxShelterBox is a charity that helps communities recover from natural disasters. This includes providing “emergency shelter, warmth and dignity to people affected by disaster”.Like many of the charity websites we have already discussed, the ShelterBox design uses a very neutral base colour scheme of grey and white combined with a high contrast green. Main call-to-action buttons are then given a yellow background to effectively stand out to the user. On the right of the home page, the design depicts to the user exactly what ShelterBox as a charity provide along with a counter-style number showing the number of boxes distributed so far by the charity.By showing the counter and including additional zeroes at the beginning of the total, the user understands that this is an ever-increasing number and therefore, an active campaign.ShelterBox panel featuring box shot and box counter totalAdjacent to this panel, an auto-rotating image gallery is displayed using the jQuery Cycle Plugin. This acts as a call-to-action for the user to find out more, but also shows the user the charity’s work first-hand. This makes the user feel directly involved and may want to do more to help. Overlaying the image, a caption with a slightly transparent background that describes the content of the image is displayed. This method is currently very popular in image galleries.Auto-rotating image gallery on ShelterBox home pageImprovementsImportant elements of the website are lost due to the lack of creative design such as the “Latest Deployments” and “International” sites lists on the home page. The charity should style important elements such as these so that they stand out more. This can be achieved perhaps by adding background colours and making them bigger. By increasing the size of elements, the user will recognize these as more important.Latest Deployments section on home pageThe design lacks a sense of containment — the content of the website seems to bleed into the white background of some pages, making reading content difficult. Perhaps by making the background of the body a light grey and keeping the main container background white, a barrier can be created between the content and the rest of the page.10. Action for ChildrenAction for Children is a children’s charity that offers support to vulnerable children in the UK.The Action for Children website design is similar to that of Red Nose Day, using a very neutral colour scheme consisting of cream, white, and a contrasting red. Elements of the design are constructed of sketch-like lines to resemble a children’s drawing.Elements of high importance are given a light cream background to help them stand out against the other sections that have a white background. The user can therefore easily detect which sections to pay more attention to.Embedded on the home page is a video of British actress Davina McCall. By having a frozen shot of a celebrity on the home page, the user is reassured of the charity’s success and credibility. The effect being potential donations from a user who is feeling confident that the charity is well supported and perhaps inclined to become involved because of celebrity associations.Once the user’s eye is drawn to the celebrity viral, they will notice four call-to-action areas displayed on the right. The wording of these are very snappy and simple to suggest to the user that these actions are easy, but meaningful. Alongside the wording, hand-drawn illustrations are used to add interest and creativity.ImprovementsWhen viewing the sitemap of the Action for Children website, there is a bug in the CSS of the columns. Columns are too wide to fit the intended number in a row, meaning columns are misplaced below others on the right and breaks the flow of the page. This can be fixed by either making the content area wider on this page (as there is no sidebar), or adding a clearing element after each row. Making the columns easier to read allows the user to find the page they’re looking for quicker.Another bug is the functionality of the inline popup windows that appear after clicking the “Send Page”, “Feedback”, and “Share Page” links. The windows are cut off underneath the title, making the forms unusable.Example of inline popup window bug on Action for Children websiteSupport Needed: Stand With HaitiAs many are aware, Haiti recently suffered a major earthquake which devastated the country. Stand With Haiti is a campaign website set up by Partners In Health who, even prior to the earthquake, have been providing medical care in Haiti for over 20 years.The first thing you notice about the Stand With Haiti campaign website is the colour scheme. The blue is both soothing and in keeping with the Partners In Health branding. In contrast with the blue, orange and deep reds are used on call-to-action buttons and on important pieces of information that portray a sense of urgency and high importance.Consistency with the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website. The first being to Donate using the large red “Donate” button found at the top of the page within the main header. This element is one of the first things the user’s eye is attracted to when landing on the website.Directly underneath this large “Donate” button are two smaller, slightly darker red buttons. The purpose of these is to help users share the site on popular social media websites, with the goal of increasing the number of visitors and donations.Finally, the user is left to browse and read the site’s content at their own leisure. Being a current crisis, it was an obvious choice to give higher importance to donations and spreading the word. By prioritising areas of the website, a simpler and more effective user experience is created.Prioritised buttons featured in Stand With Haiti headerWhile acting as a medium for receiving donations, the home page of the Stand With Haiti website acts as a news hub for the latest pictures and information. This is crucial for users who wish to be kept up to date with the crisis and know how their donations are helping.A jQuery-built image gallery, similar to ShelterBox, is used to display images of the crisis. Underneath there is a list of recent blog posts and instant updates from the charity’s Twitter feed.ImprovementsAs we discussed above, the design features a lot of orange and red buttons. However, none of these buttons have hover or visited states. Adding these to the links and buttons would increase the usability of the website, showing the user clickable areas more prominently and helping them recognize where they’ve already been.Donations being one of the main purposes of the Stand With Haiti website, it is important that the donate form is usable. Unfortunately, at first glance the donate form looks cluttered.Stand With Haiti donate formThe form would be much more usable and readable with better use of whitespace. It could also improve if the form labels were clickable to their appropriate input field. While this provides easy-to-select fields, it also ensures that people with screen readers and auto-fill functions can use the form.After adding effective white space and increasing the usability of the form fields, a button similar to those used on the home page of the site can be used for the “Process Contribution” button. This should also be repositioned as users expect submit buttons of this kind to either be on the left or right. Few forms, especially this wide, place their submit buttons in the middle.Useful ResourcesMany of the methods mentioned above can easily be achieved yourself:Rich Typography On The Web: Techniques and ToolsThe Mystery Of CSS Sprites: Techniques, Tools And TutorialsBackgrounds In Web Design: Examples and Best PracticesMooTools Tutorials and Resources Round-Up45+ New jQuery Techniques For Good User Experience10 Useful Usability Findings and Guidelines© Ben MacGowan for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: usability
February 26 2010, 11:16am | Comments »
-
I posted to smashingmagazine.com
Designing User Interfaces For Business Web Applications
http://feedproxy.google.com/~r/SmashingMagazine/~3/bkq7EF9NJsQ/
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. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Websites vs. Web ApplicationsConfusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.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). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational. CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.Different Types of Web ApplicationsBusiness applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.First, Know Your UsersYou’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).How to Identify Users?Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.Design ProcessYou can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.SketchingSketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes. Sketch by Jason Robb.Interesting reading on sketching and wireframing:35 Excellent Wireframing ResourcesTools for Sketching User Experiences20 Steps to Better WireframingPrototypingThe next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint. An Axure interactive prototype for an e-commerce website, by e-maujean.Further reading and tools for prototyping:5 Useful Online Tools for Web Design Planning and PrototypingA Practitioner’s Guide to Prototyping: A book from Rosenfeld Media16 Design Tools for Prototyping and WireframingTestingPrototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it. Snapshot of usability testing for Delicious, by (nz)dave.Further reading:Why You Only Need to Test with 5 UsersUsability Testing DemystifiedThe Myth of Usability TestingDesign PrinciplesThere are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.No One Likes SurprisesProbably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions. Although a simple example, SprinklePenny achieves consistency and familiarity across the application.Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.Further reading:Designing and Selecting Components for UIsWhy Consistency Is CriticalUsers Should Be Able to Be EfficientWithout a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on. Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.Help!An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).Further reading:Forgiveness in UI designWeb Form Validation: Best Practices and TutorialsHandling User Error with Care: Getting Users Back on TrackCan’t Get No SatisfactionSatisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects satisfaction. And a few more principles are worth mentioning here.Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem. BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.Further reading:7 Interface Design Techniques to Simplify and De-clutter Your InterfacesRestraint In Defense of Eye CandyOther resources related to UI design:12 Useful Techniques for Good User Interface Design8 Characteristics of Successful User InterfacesPrinciples of User Interface Design (Wikipedia)10 Principles of the UI Design Masters20 Websites to Help You Master User Interface DesignEssential Components Of Web ApplicationsEvery Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.Web FormsForms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.Master-Detail ViewsThis is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.DashboardsMany Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application. Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.Heavy Use of TablesBecause Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.Tables can also be interactive, meaning they can generate additional info and even modify the data they contain. PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.ReportsMost businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers. FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.Don’t Forget UI Design PatternsWe’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it. This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.Further reading:Designing Web Interfaces: Principles and Patterns for Rich Interactions A fantastic book that covers more that 70 Web design patterns.40+ Helpful Resources On User Interface Design PatternsCase Study: Online Banking ApplicationTo take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.Final ThoughtsDesigning user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.(al)© Janko Jovanovic for Smashing Magazine, 2010. | Permalink | 19 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
- Tags:
- design
February 25 2010, 5:55am | Comments »
-
I posted to smashingmagazine.com
Art Manifestos and Their Applications in Contemporary Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/lZOOHpwd-NQ/
The way you express yourself with words is a crucial extension of your creative identity. Professional designers are usually busy focusing on the visual aspects of their craft, but visual arts and literary arts collide and coincide regularly. The two fields meet not just in typography, but also in press releases, social networking communication, slogans, promotional materials, ‘About Me’ pages, marketing strategies, and every single pitch, contract, and email you’ve ever sent to a client.What might happen if you injected some of those materials with a healthy dose of poetry, humor, or bravado? Obviously, doing so will not be appropriate in some forums, but when it is, this may be a good way to express yourself and differentiate your brand from the crowd.Some of the most electrifying examples of writing about art and design come in the form of the manifesto. The manifesto has played a pivotal role in some of the most important creative movements of the previous century: Futurism, Surrealism, and Cubism among them. Most graphic designers working today will probably not require their own manifesto, but it can be helpful to write a mission statement or expression of your creative goals. Likewise, most of us probably don’t intend to launch a full-scale ‘movement,’ but this genre of writing may inspire you to reconsider the literary content of your creative work and its public representation.What is a manifesto?The 1963 Fluxus manifesto by George Maciunas includes rousing proclamations in the form of both handwriting and typewriter copy.The artists’ manifesto is a “document of an ideology, crafted to convince and convert” (Mary Ann Caws, Manifesto: a Century of isms). The word ‘manifesto’ contains elements of the Latin terms ‘manus’ (hand) and ‘festus,’ which may be derived from the root ‘fendere,’ as in ‘offendere.’ In other words, the manifesto is a personal or even handwritten statement intending to shock, inspire, or offend. Most of the artists in this selection lived in times that they felt desperately required change, and their solution was revolution.Artists’ manifestos were being written as early as 1886, but the genre developed into a “new literary sport” after the publication of Italian artist/provocateur F.T. Marinetti’s first Futurist manifesto in 1909 (Marjorie Perloff, The Futurist Moment). Marinetti’s writing had mythmaking qualities; this ringleader of the Futurists “became a public figure as a result of, not prior to the publication” of his manifesto.Here are four artists’ manifestos, beginning with that of Futurism – the lunatic grandaddy of all artists’ manifestos. A review of each manifesto is accompanied by historical context, images of relevant artwork, and inspiration for contemporary applications of the ideas within.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]FuturismAn Overview“Everything of any value is theatrical.” –F.T. MarinettiFuturism originated in Italy in 1909 as an avant-garde movement that glorified technology, modernity, and even war. In their artwork, the Futurists strove to capture the speed and ‘force lines’ of motion and progress. This ideology pushed their work towards abstraction, and Futurism helped fuel the invention of Cubism.Highlights from the ManifestosF.T. Marinetti’s Futurist manifesto was first published in French newspaper Le Figaro in 1909. The manifesto text is preceded by a disclaimer about the author’s “singularly audacious ideas.”“We have been up all night, my friends and I, beneath mosque lamps whose brass cupolas are bright as our souls, because like them they were illuminated by the internal glow of electric hearts… we have been discussing right up to the limits of logic and scrawling the paper with demented writing.”So begins F.T. Marinetti’s Futurist manifesto, which is full of “demented writing” and poetic language (”celestial bivouacs,” “rogue locomotives”) intended to rouse and mesmerize. The concept of the “internal glow of electric hearts” is an example of Marinetti’s glorification of industrial machinery and his desire to emulate it. This fascination with technology is a familiar notion in this current gadget age we live in today.Perhaps even more than most artistic movements, the Futurists were obsessed with demolishing the ideals that preceded them. In his Manifesto of Futurist Painters (1910), Italian artist Umberto Boccioni declared, “We will fight with all our might the fanatical, senseless and snobbish religion of the past, a religion encouraged by the vicious existence of museums. We rebel against that spineless worshipping of old canvases, old statues and old bric-a-brac, against everything which is filthy and worm-ridden and corroded by time. We consider the habitual contempt for everything which is young, new and burning with life to be unjust and even criminal. ”“We want no part of it, the past”, Marinetti wrote, “we the young and strong Futurists!”Futurist Work SamplesFortunato Depero’s book Depero Futurista, 1927.The Futurists excelled at experimental typography, and there’s no greater example than Fortunato Depero’s book Depero Futurista, boldly bound with two metal bolts. Once again, the Futurists are seizing the opportunity to incorporate industrial machinery into their work. This also must’ve made the book annoyingly difficult to shelve, which probably had them brimming with mischievous glee.Two internal pages from Depero Futurista. Depero’s page layouts reveal the force of his bold compositional strength. View the designer’s advertisments for Campari for further evidence of his typographic and compositional muscle.Umberto Boccioni, The City Rises, 1910.Boccioni exalts the colossal energy of the massive horses in this scene of urban labor. The horses test the limits of their harnesses while men direct the explosive equestrian strength. Man and horse appear almost as one. The artist could not have compressed more dynamism onto the canvas.Contemporary ApplicationsIs your business a brand or a bland?The Futurists excelled at drama. Say what you will about their work (the paintings are somewhat repetitive and occasionally, well, ugly), but they were never boring. It is a movement that never murmured, preferring to shout, sing, or scream.Futurism shares a major quality with the contemporary web design community and that is a passion for progressive technology. The Futurists were intensely devoted to smashing the past while realizing the future. Web designers are always pushing the boundaries of what we’re capable of achieving, whether we’re developing new uses for content management systems or discussing the future potential of CSS (see the Surrealism section of this article for some distant future ideas). The lesson here is Always Evolve.Another lesson is to keep it personal. Marinetti’s manifesto obsesses over machines, but it does so with intense emotion, which is a fundamentally human quality. In other words, don’t let your professional writing grow too cold. Those who excel in social networking excel at this aspect. Especially if your business identity is stark and pristine, a human touch goes a long way.DadaAn OverviewTo the Dadaists, logic was a pestilence. They believed that logic had led to a culturally and morally deficient society. These artists were so appalled by World War I that they violently rejected existing notions of culture, aesthetics, and even reason. Their work was anti-war, anti-bourgeois, and anti-conformity. Freedom was the goal; Dada sought to liberate a variety of media and its meanings from the shackles of the past. The Dadaists’ most powerful tools were biting satire and brazen provocation. Their ideology laid the foundation for Surrealism and their delight in anarchy makes them a cultural precursor to the punk movement that was born half a century later.One of the most widely recognized symbols of the Dada movement is Marcel Duchamp’s Fountain (1917). The artist turned a urinal on its back, scrawled the absurd pseudonym ‘R. Mutt’ on its side, and declared it art. It was a lewd gesture towards the notion of contemporary art itself, which Duchamp criticized as being too ‘retinal’ in nature – mere aesthetic decoration. He succeeded with his ‘readymades’ at putting art “in the service of the mind” (hence, the constant labeling of his work as ‘conceptual’). The piece is emblematic of “the vehemently untraditional and bitingly critical nature of the Dada movement” (Marcel Duchamp 1887-1968, an essay by Nan Rosenthal). Dadaism assaulted the traditional values of fine art; Duchamp’s work succeeded in redefining the conception of what belongs in a museum setting, and therefore, the conception of what is considered art.Highlights from the ManifestosThe Dadaists published many polemical manifestoes designed to provoke their critics and un-define their work. They insisted that the word ‘Dada’ was nonsense and that they were not a ‘movement.’ Each manifesto does its best to shatter any conventional thought on the matter. One such manifesto concludes, “Long live Dadaism in word and image! … To be against this manifesto is to be a Dadaist!”Dadaist poet Tristan Tzara’s 1918 Dada Manifesto is a blustering rant. It is full of sound and fury, signifying nada. “DADA DOES NOT MEAN ANYTHING,” it demands. Intoxicated with energy, Tzara delivers stream-of-consciousness poetry that reels from social commentary to dream-drunk nonsense. “I destroy the drawers of the brain, and those of social organisation: to sow demoralisation everywhere, and throw heaven’s hand into hell, hell’s eyes into heaven.”“Publicity and business are also poetic elements,” Tzara writes, foreshadowing Warhol’s claim that “business art is the best art.”Work SamplesThis gorgeous cover design for Le Coeur à Barbe: Journal Transparent (1922) is attributed to the writer and artist Iliazd (also known as Ilia Zdanevich). Publication of this esoteric, single-issue journal was prompted by a feud between Dada leaders Francis Picabia and Tristan Tzara. The cover is regarded as an important example of early Twentieth-century avant-garde page layout.Photomontage by Raoul HausmannPhotomontage and collage developed into two of Dada’s most effective tools of artistic communication. The reappropriation of images from the mass media allowed for deft social commentary. Dissonant combinations of photos, advertisements and text seemed to capture the jolts of modern reality.Contemporary ApplicationsDadaism was a revolt, an “attack on the culture of a bankrupt society,” which “brought about a violent renewal of meanings” (The Dada Movement 1915-1923, by Marc Dachy).Those of us who achieve notoriety as designers face a unique opportunity: the opportunity to be heard. Can you use that power to take a stand for your beliefs, to bring about change through good design and positive values? We make a statement – actively or passively – by every professional association we make, every client we choose to represent, and every product we validate by inclusion in our portfolio. Here in America, our designs exist in a culture fractured by deep ethical fissures. It is a culture where gun violence rears its hideous head in the headlines regularly – recently, on a daily basis. It is a culture where so desperate is the desire for fame that people are willing to infiltrate a White House party or stage a hoax involving the life of a child – all in the hopes of achieving reality television stardom. If the Dadaists realized a desire to shift their problematic cultural values, so should we, no matter what nationality we are. We do not require a ‘movement’ to do so. Cultural change is also affected by the simple choices of intelligent individuals. You do not need a soapbox. But look down; you may be standing on one.If the best thing we designers have to get upset about are the font choices in Ikea brochures, our priorities are unbalanced. There are plenty of better things to rebell against – namely war, climate change, and the filmography of Nicolas Cage.SurrealismAn OverviewRené Magritte’s work is known for clever twists of visual logic.Surrealism is a weird dream. This dream can be a vivid exploration of personal identity (Frida Kahlo) or a startling hallucination fraught with Freudian fears (Salvador Dalí). Oh, and there’s often weird fruit involved (think pomegranates or an orange in a doorway).In short, Surrealism sought to explore the unconcious in order to break creative ground. Their artwork rejects rational thought in favor of absurdity and illogicality, suggesting that these qualities may offer more accurate representations of modern life’s disturbing complexities.Highlights from the Manifesto“We are still living under the reign of logic,” begins André Breton’s Le Manifeste du Surréalisme (1924). Breton rails against the supremacy of logic, and credits the work of Sigmund Freud for unleashing a “current of opinion” on the subjects of dreams and the subconscious. “Perhaps the imagination is on the verge of recovering its rights,” says Breton. “If the depths of our minds conceal strange forces capable of augmenting or conquering those on the surface, it is in our greatest interest to capture them.”Ironically, Breton’s is the most sober and rationally argued manifesto in this selection. He is laying the philosophical groundwork for the artwork that will be built upon these ideals. The wildest language he uses is employed in this assessment of the dream state: “The mind of the dreaming man is fully satisfied with whatever happens to it. The agonizing question of possibility does not arise. Kill, plunder more quickly, love as much as you wish. And if you die, are you not sure of being roused from the dead? Let yourself be led.”Work SamplesA razor is drawn towards a woman’s eye in this still from the film Un Chien Andalou by Salvador Dalí and Luis Buñuel, 1928.Un Chien Andalou is a piece of Surrealist film that has had a profound and lasting impact on cinema. It can be seen as an example of Dalí’s skill with “the usual paralyzing tricks of eye-fooling.” The film has been thoroughly absorbed by pop culture; the rock band Pixies famously refer to it in the song ‘Debaser’ when Frank Black wails, “Got me a movie / I want you to know / Slicin’ up eyeballs!”Max Ernst, The Temptation of St. Anthony, 1945.Goblins and gremlins galore! Ernst’s take on this classic painter’s narrative is visual feast of nightmares, but its monsters are also a bit cartoony with their grinning jowls and muppet eyes. St. Anthony is being overtaken and physically invaded by transforming plant creatures. Ernst described St. Anthony’s plight thusly: “Shrieking for help and light across the stagnant water of his dark, sick mind, St. Anthony receives as an answer an echo of his fear: the laughter of the monsters created by his visions.”Corresponding visual sensibilities might be found in the work of contemporary filmmakers Tim Burton and Joe Dante (director of Gremlins and a memorable segment of Twilight Zone: The Movie). For another Surrealist take on the tale of St. Anthony, view Dalí’s composition of the same title.Contemporary ApplicationsIn many aspects of graphic design and marketing, the idea reigns supreme. A clever concept can be the key to a unique logo design; a startling idea can distinguish an advertisement from the crowd. Surrealists like Dalí and Magritte were idea men. View any of Magritte’s major works and you are looking at a stroke of conceptual brilliance that would humble the cleverest contemporary illustrator.The conceptual strength shows in their words as well. Consider this choice quote from Dalí: “I consider perversion and vice to be the most revolutionary forms of thought and activity, just as I consider love to be the only attitude worthy of the life of a man.”Dalí’s most famous painting is The Persistence of Memory, with its melting clocks, which have become the most recognized symbol of Surrealism. The theme of that painting is time, and the multiple melting clocks imply the simultaneous existence of various temporalities. What if we allowed ourselves similar freedoms with our imagination? What will CSS look like in ten years, or fifty (assuming CSS and civilization are still in existence)? What if there were a ‘Time’ property in CSS, and what would it do beyond mere animation? Perhaps CSS of the future will have a variety of temporal qualities, and perhaps it will go 3D as well. Could tomorrow’s cascading style sheets create a holographic effect? Could the cascade apply to past, present, and future?FluxusAn OverviewLike a cloud, Fluxus tends to appear in a different shape from one moment to the next. Their goal of ‘intermedia’ creativity blurred the boundaries of visual art, music, publishing, graphic design, and performance art. An international movement that began in the early 1960’s, the Fluxus artists entertained the absurdly paradoxical notion of becoming an “anti-art art movement.” Much like their ideological predecessors in Dadaism, this meant that they would attack the reigning notions of what art could or could not be. It also reveals their predilection for the absurd.Highlights from the ManifestoABOVE: A portion of George Maciunas’ Fluxus Manifesto.Like Fluxus itself, George Maciunas’ manifesto is a wild mongrel of a thing. According to Fluxus scholar Simon Anderson, Fluxus “deliberately experimented with, ignored, and tore down so many of the barriers and heirarchies of contemporary culture that no analogy suffices: [Fluxus] defies description, a condition that is perhaps its most potent source of strength.” (In the Spirit of Fluxus, Janet Jenkins, ed.)Maciunas’ manifesto – which includes collaged literary definitions juxtaposed with his ranting handwritten voice – directly reflects the nature of his movement. It’s a good reminder: does the literary content of your design business accurately reflect the voice of your visual content?Maciunas asked Fluxus artists to ‘purge’ their work of “bourgeois sickness” and “professional & commercialized culture.” A professional demeanor in the design industry is of utmost importance. However, if you’ve ever met a branding professional whose entire personality has been crafted into an ‘elevator pitch,’ you know how creepy and cold that can be. Speak to people like friends when you can. Never speak to them like just another potential sale. That’s rude and it makes you seem robotic.Fluxus Work SamplesFluxkit, 1969, various Fluxus artists.Fluxus was a graphic designer’s dream: typographic freedom, multimedia publishing, visual puns galore, audacious self-promotion. Looking for inspiration for your next promotional mailer? The Fluxus artists packed dozens of clever ideas into the diverse contents of their witty, mass-produced ‘Fluxkits’ and ‘Fluxboxes.’ Make absolutely sure to view the dense, inspiring collection in the Fluxus room at the Tate Modern the next time you’re in London.Ben Vautier, Fluxbox containing God, 1961.Fluxus was conceived as a publishing enterprise specializing in pamphlets, flyers, games, and various unpredictable objets d’art. The spirit of publishing remained central to its nature even though Fluxus artists eventually tried their hands at every other medium under the sun.Contemporary Applications“Too bad he died before its advent,” wrote the Village Voice, “(Fluxus founder George Maciunas) would’ve loved the internet.” If the internet is a playground, then take time to play between professional projects. Many of us draw for fun often, but when’s the last time you built a website for fun? Build a site for your own amusement. Build a humorous site that raises money for charity. Build a site in a day.Fluxus artists spent a lot of time probing the concept of ‘intermedia’ art and performances. What applications or intersections of your media haven’t you considered yet? The Fluxus artists were fond of puzzles and games; what if you built a website that had a logic puzzle built into the code, with clues hidden in the ‘target’ function so that users could hunt for them by rolling their cursor over areas of text?Or what if we plundered the online trends of other industries for ideas we can implement in design projects? The first bullet listed in these online media predictions in the publishing industry has ‘viral gold’ written all over it. Who will exploit ‘intermedia’ opportunities like these?Web designers work in one of the only thriving, pivotal industries of this extraordinarily progressive era. Almost all prominent cultural industries have been thrown into upheaval due to the evolutionary progress of the web and a variety of other twenty-first century factors. Cultural monoliths are falling to their knees all around us – the record industry, the publishing industry, and the automobile industry among them. How can we learn from them? And more importantly, how can we help each other evolve?Web design in the twenty-first century means much more than the unfolding potential of CSS and the dead, discarded shells of old browser versions. It means that we will be central to social, cultural, and political revolutions worldwide. It means opportunity – the opportunity to expand and assist the progress of global cultures.In ConclusionBuild your business into a brilliant brand, not a boring bland. Seek new and unusual intersections of media. Look at the big picture. What’s going on in your neighbor’s industry today that will affect yours tomorrow?Go to a museum. Put more art in your design. Always evolve. Be witty and unpredictable. Just remember, as illustrator Sergio Baradat once said, “It’s okay to pull a rabbit out of your hat, but sometimes a rabbit out of a hat is not what’s called for.”Promote positive change in the world around you when you can. Support a charitable cause. Use your voice. Don’t waste words. Make them sing and dance.Further ReadingFortunato Depero Online gallery of works by the Futurist artist and designer.States of Flux The Village Voice on Fluxus founder George Maciunas.Marcel Duchamp (1887-1968) An essay on ‘one man art movement’ Marcel Duchamp. Essay by Nan Rosenthal of the Metropolitan Museum of Art.Dada at MoMA This New York Times review of a 2006 Dada show at the Museum of Modern Art includes a slideshow of artwork.The Many Temptations of St. Anthony A collection of famous artworks on the theme of ‘The Temptation of St. Anthony.’ Compiled by Dan Redding.Dada’s Girl: Hannah Höch Show review and biography of influential Dada photomontage artist Hanna Höch.Would you like to see more similar posts on Smashing Magazine?This article is one of our experimentations of the new content formats on Smashing Magazine. Did you find it interesting? Did you find it useful? Did you find it too easy or too difficult? Please let us know in the poll below and in the comments to this post! We are looking forward to your feedback! Would you like to see more similar posts on Smashing Magazine in the future?(survey) © Dan Redding for Smashing Magazine, 2010. | Permalink | 2 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
- Tags:
- design
February 21 2010, 5:31am | Comments »
-
I posted to smashingmagazine.com
Email Newsletter Design: Guidelines And Examples
http://www.smashingmagazine.com/2010/02/15/email-newsletters-guidelines-and-examples/
The email newsletter is a powerful marketing and communication tool that has various useful functions. It reminds your users about you; it informs users about your products; it tells them what you have been up to; and it helps you build a unique relationship with them. Users like email newsletters if the newsletters bring them value.The fundamental rule for creating an email newsletter is to give it interesting, relevant and up-to-date information that is enjoyable to read. Users sign up for newsletters hoping be informed about things that they would not otherwise be able to find out about. In this article, we’ll discuss some guidelines for designing and distributing email newsletters. Each point will be accompanied by both good and bad examples.Please notice: in this post we features both good and bad examples of newsletter design, so you can get a better understanding of the problems to avoid and good design decisions to make.You may be interested in the following related posts:Design and Build Email Newsletters Without Losing Your Mind (and Soul)[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]Signing Up For A NewsletterThis is an important step in convincing users that your newsletters are interesting and that they would benefit from signing up.Tell Users What They Will GetBefore asking users for their details, tell them what they will receive, and identify the benefits of signing up. If you mention that the newsletters will include exclusive offers and deals, make sure to keep the promise. In addition, let users know how often they will receive the newsletter: weekly or monthly.On the Mulberry sign-up page, the company promises to send users exclusive updates and offers. The Marie Claire UK subscription page clearly states that its newsletters include news, beauty buys, competitions and offers.Marie Claire UK subscription pageReward Users for Signing UpYou may want to consider giving some reward to users for signing up; for example, a free gift, voucher or discount. To encourage users to sign up for his newsletter, Jamie Oliver offers a free £25 wine voucher that can be claimed after subscribing (on the condition that users spend £64.99 or more on the wine). Jamie Oliver sign-up page Jamie Oliver reward pageIf you will give rewards, let users know as soon as possible in the process. James Perse gives users who subscribe to its newsletter a $15 online gift card. However, the reward is not mentioned on the subscription page, and the promotion code is sent via a confirmation email only after the subscription has been received. You would not have known that until you subscribed. The company is clearly missing a great opportunity to get people to sign up for its newsletters. James Perse subscription confirmation emailPreview Your NewsletterOne way to let users know what they will get is to give them a preview of your newsletter. Hershey’s Kitchens has two different newsletters, and it offers examples of both types. The company even gives each newsletter a name and clearly indicates how often it will be sent out.Hershey’s Kitchen sign-up pageKeep Questions Short and SimpleUsers avoid filling out forms and submitting their details if possible. For a newsletter sign-ups, all you need is their email address.Hersey’s Kitchens has 10 mandatory fields. MarieClaire.com has 8 fields, but only the email field is required. We have found from our studies, though, that people often miss the asterisk or do not know what it means. Users who are reluctant to fill in many details may well refuse to sign up in this case. Hershey’s Kitchen sign-up pageContent Of NewsletterBased on our user testing, we found that people look at three things when they receive a newsletter:The sender, to see if it is from someone they know.The subject line, to see if it is of interest to them.The date, to see if the communication is up to date.Write an Attractive Subject LineOne way to encourage users to open your newsletter is to write a subject line that grabs their attention.If you are offering some sort of deal in your newsletter, try to avoid generic appeals in your subject line (for instance, Game July newsletter subject line: “Sizzling Summer Deals”). Instead, mention specific offers, such as Dorothy Perkins November Issue: “25% Off Just for You”. Also, be realistic about your offers, and avoid making them sound too good to be true. Users are skeptical about subject lines like “Get 1000 Extra Points” because they know they will often have to spend a lot to get those points.Provide Useful and Well-Written ContentA newsletter should contain information that users would not normally research on their own. Users take seconds to scan for topics of interest to them before deciding whether to spend more time reading the newsletter. If your newsletter, like Forrester’s, shows only one or two topics, users would less likely to find something of interest to them. Forrester newsletterFurthermore, including links to your website in the newsletter is crucial.Make Content Relevant to Your ReadersMake your newsletter’s content as relevant to your readers as possible, whether through offers, products or images. Superfluous content will add no value and simply be ignored. You could also provide customized content. Personalization can be done in one of two ways:Asking users for more (optional) information when they sign up.Implicitly recording what they buy and view on your website.For example, Amazon sends newsletter with recommendations based on what its users have purchased. Recommendation-based newsletters can be highly useful, provided that your analytics are accurate. Amazon’s customized newsletterOffer Exclusive DealsYou could always offer subscribers special deals or freebies. There are a few ways to go about this. H&M and Photobox ask users to present their newsletters at the point of purchase in stores to receive discounts. Clinique and Airparks include a promotion code in their newsletters that users can redeem when checking out online. H&M newsletter
- Tags:
- design
- marketing
- newsletter
February 15 2010, 5:59am | Comments »
-
I posted to smashingmagazine.com
The Definitive Guide To Styling Web Links
http://feedproxy.google.com/~r/SmashingMagazine/~3/i8-PbBG0QoA/
Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]Styling LinksWhen you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.Let’s start by looking at CSS selectors and pseudo-classes:a:link { }Unvisited link.a:visited { }Visited links.a:hover { }The user mouses over a link.a:focus { }The user clicks on a link.a:active { }The user has clicked a link.The TLC uses not only plaint text links, but also icons to communicate the corresponding file types.Ensure ContrastLinks should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.text-decortation: underline;Underline.font-weight: bold;Bold.font-size: 1.4em;Enlarge.color: #ed490a;Color.background-color: #c0c0c0;Background.border-bottom: 2px solid #a959c3;Border.If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.Don’t Forget About Visited LinksVisited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.Use the Title AttributeThe title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.<a href="example.com" title="This is an example link">Example</a>Use Button StylesTo make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.For more information, check out “Super-Awesome Buttons With CSS3 and RGBA” and “Call to Action Buttons.”Hover StateOffering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.a:hover { text-decoration:none; text-shadow: 0 0 2px #999; }The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.a:hover span { cursor: pointer }Active StateProvide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.a:active { padding-top: 2px; }Apply PaddingHere is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.a { padding: 5px; }Use Icons for File TypesIf your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.For some great resources, check out “Fam Fam Fam Silk Icons” and “Social Media Mini Icon Pack.”Use Icons for RecognitionJust as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.Make Anchor Text DescriptiveUse meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.Link Your LogoAlways link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.<h1><a href="/" title="Homepage">Site name</a></h1>h1 a { background: url(images/logo.gif) no-repeat top left; display: block; text-indent: -9999px; width: 200px; height: 60px; }Don’t Open New WindowsJust don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.Micro-FormatsAs the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…<a href="http://myfriend.example.com" rel="friend met">My Friend</a>tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats.Showcase Of Links In Web DesignKomodo MediaHicks DesignNotable AppUX BoothMax VoltarElliot Jay StocksThe TLCSam BrownAdii RockstarForty Seven MediaStefan PerssonHugeAWPSimple BitsAndy RutledgeBrian HoffSimon CollisonFurther ReadingPadded Link Targets for Better Mousing, 37 SignalsTop Ten Mistakes in Web Design, UseitGuidelines for Visualizing Links, UseitStyling Text Links, Andy RutledgeShowing Hyperlink Cues With CSSDon’t Lose Your Focus(al)© Lee Munroe for Smashing Magazine, 2010. | Permalink | 3 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
- Tags:
- design
February 13 2010, 4:48am | Comments »
-
I posted to smashingmagazine.com
The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)
http://feedproxy.google.com/~r/SmashingMagazine/~3/LHYL-5U5eko/
In recent years Internet Explorer 6 has become the browser web designers love to hate. Security issues, JavaScript errors and inexplicable CSS rendering quirks have made it the brunt of many jokes. With IE6 in its twilight and big companies like Google dropping support, it seems like a good time to take a fond look back at our old foe. In this post we’re looking at what Internet Explorer 6 used to be and why its image changed over the years. You can also see the comic in a larger version.Do we need to review our projects in Internet Explorer 6? Can we stop supporting IE6? If not, how do we handle those users who are still using IE6? And if yes, how can we prompt IE6 users to upgrade? Or how do we convince those who don’t allow their employees to get rid of the legacy browser to upgrade? What do you think? We are looking forward to your opinions in the comments to this post!© Brad Colbow for Smashing Magazine, 2010. | Permalink | 9 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ie, ie6, internet explorer
- Tags:
- design
- ie6
- ie
- internet explorer
February 11 2010, 1:39pm | Comments »