People swear by their design processes. Rachel Glaves insists on sketching by hand; Dan Brown urges extensive wireframing; while Ryan Singer goes straight to HTML. Heated debates arise at conferences as advocates staunchly defend their favorite techniques.With all of these different methods to choose from, should you be sketching, wireframing, mocking-up, or prototyping? The answer, simply put, is yes you should.Design methods are not mutually exclusive. Rather, each method exists on a continuum of fidelity, ranging from low fidelity sketches to high fidelity HTML prototypes. Each method is well-suited for a particular phase of the design process, with one level of fidelity often leading into the next.The design funnelIn his book Sketching User Experiences, Bill Buxton portrays the design process as a cycle of elaboration and reduction. The goal of the elaboration phase is to generate as many different ideas as possible, while the reduction phase is meant to select one of those ideas and carefully refine it.Laseau’s overlapping funnels (as portrayed in Sketching User Experiences) indicate the dual nature of design as elaboration followed by reduction.Rinse and repeatWhile it does typify the design process as a whole, in practice the elaboration and reduction process must be continuously repeated time and again throughout the course of design. From information architecture, to visual design, to the functional prototype, each stage must be explored in full, then lovingly honed down to a precise solution.The design funnel illustrates the repetition of the elaboration/reduction cycle from low fidelity to high fidelity, converging into the final concept (inspired by Stuart Pugh’s funnel).Getting it rightUsing a method too high in fidelity wastes resources (both time and material) and risks a mediocre path being selected because better options were never given a chance. Working at too low a fidelity, on the other hand, means that the details never get filled in, yielding a half-baked result.A real world exampleThus far I’ve outlined an orderly model with distinct categories. Reality, however, is much more complicated: various components are often designed in parallel and at different phases; lines blur between information architecture and visual design; and refinement can sporadically revert back into ideation. What does the design funnel look like in the real world?In a nutshellIn late 2009, I teamed up with Nutshell to design a new customer relationship management application. Over the past 9 months we have sketched (a lot), wire-framed (a bit), mocked-up (a whole lot), and coded (continuously) as part of the design process. The first month and a half was made up entirely of discussions in front of the whiteboard and around paper sketches. The month after consisted of turning the selected sketches into wireframes, while sketching continued for other parts of the application.Our media-of-choice over the past 9 months of designing a CRM.At three-and-a-half months in, we had a pretty good picture of the information architecture for 80% of the screens. From then until now, most of my effort has gone into full-fidelity mockups, while I revert to sketches when we encounter less well-defined screens or workflows. As soon as the first mockup was complete, my colleagues began coding an HTML5/CSS3 prototype, which we used (and are still using) to see how our ideas hold up under actual use. We chose to build this Safari-only prototype first so that we could iteratively refine with as little overhead as possible.When the tables turnWhat we discovered is that there comes a point in time where working at a higher fidelity actually requires less time than working at a lower fidelity. For instance, once our visual style had been developed in the mockups, it was no longer beneficial to build wireframes; going straight from sketch to mockup worked just fine. Similarly, when we discovered something in the prototype that didn’t feel quite right, it was often easier to tweak the prototype directly than to go back to Photoshop.Be lazy (in a good way)There is no single correct form of design. Rather, each method is appropriate in a certain context. At the end of the day, it simply comes down to selecting the level of fidelity that gets the job done in the least amount of time. As it’s been said, “Laziness is the mother of efficiency.”
-
I posted to smashingmagazine.com
Concerning Fidelity in Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/cLr_swYbVUA/
June 29 2010, 6:30am | Comments »
-
I posted to smashingmagazine.com
50 Powerful Time-Savers For Web Designers
http://feedproxy.google.com/~r/SmashingMagazine/~3/RHFm_2bQhhw/
Being web designer is not easy. Not only do we need to have a good understanding about visual design, typography, information architecture, psychology and a plethora of other disciplines; in our work, we need to take care of so many details, so that our job becomes more and more time-consuming, requiring dozens of tools, attention span and an effective workflow for beautiful, timely and functional results.And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine’s readers. Whether you like lists or not: this one will probably help you find those little nuggets out there that will help you avoid headaches and stress. Below we present useful time-savers for web designers.You may want to subcribe to Smashing Magazine’s E-Mail Newsletter (32,600 subscribers) to keep updated about new useful tools, techniques and resources. The newsletter is sent out once every two weeks.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Time-Savers For Web DesignersLaunchListThis tool helps you review important items before the big launch. By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. Alternatives: Ultimate Website Launch Checklist and Paul Boag’s The Ultimate Website Prelaunch Checklist.Pencil Project: Sketching and Prototyping with FirefoxPencil is an open source GUI prototyping tool. It contains built-in stencils for diagrams and prototyping, on-screen text editing with rich text support as well as standard drawing operations. Works in Firefox 3.5+.ZootoolZootool is a bookmarking website and tool for collecting images, documents, links and videos from anywhere on the Web. A bookmarklet allows you to collect items quickly and easily. You can then tag and organize your saved items in Zootool’s back end. You can also integrate Zootool with Tumblr, Twitter, Delicious and FriendFeed to share what you find. Screenshot via MacStories.BounceA fun and easy way to share ideas on a website. The tool allows you to make notes, write feedback in an overlay of every site and then share your notes with friends.Ninite Batch InstallerNinite lets you pick your favorite software from among an extensive list (Web browsers, messaging, media, images, documents, security, runtimes, file sharing, utilities, compression, developer tools and more), creates a batch installer for them and then installs them for you automatically. Alternative: Allmyapps allows you to bundle your favourite applications, install them in a single click and reinstall them whenever you need to.Support DetailsWhen in doubt, send your customers to this tool. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved.MugTug’s DarkroomWhen you need to modify a picture but don’t have your favorite software on hand, you can use the all-in-one image processor MugTug’s Darkroom which was created for photographers. You are able to adjust levels, white balance, exposure, contrast and saturation and apply a few photographic effects. In addition, Darkroom allows to upload pictures from Picasa and Flickr. Alternatives: Pixlr and Sumo Paint.Visual Website OptimizerVisual Website Optimizer is undoubtedly the best A/B, split and multivariate testing software ever created by mankind.KeyonaryThis site a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 250 Photoshop shortcuts have been added. Simply type the name of application in the search box, and it spits out a long shortcut list.gridr buildrrrThis generators allows you to choose the grid for your layout, preview it online and generate the CSS code right away.Instant Blueprint – Create a web project framework in seconds.Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!HummingbirdHummingbird lets you see how visitors are interacting with your website in real time. Hummingbird is built on top of Node.js, a new javascript web toolkit that can handle large amounts of traffic and many concurrent users.jsFiddleOnline Editor for the Web, with support of JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. The tool lets you save and run your applications within the web browser.String: create a multi-language website or appEssentially, String is a version control for localization. This tool allows you to manage your language files – from PHP to PO to Rails to iPhone apps. You can invite users to translate your content, and keep track of changes. You can add new sections and languages as you go and then download your updated language files and place them in your app.TitanpadThis tool allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color. Editing is done in true real time. Nice solution for everybody who works collaboratively on text documents, whether in the same office or on the other side of the world.Pixelnovel Timeline: Version Control for Adobe PhotoshopThis tool basically integrates a Subversion client in Adobe Photoshop with an Adobe Photoshop plug-in. You can preview versions right in Photoshop and manage version control directly from Photoshop. Not free.0to255A simple tool that helps web designers find variations of any color. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.Load Impact: Website load/stress testThe tool lets you find out the performance limits of your website before you learn the hard way. It is an online service that simulates users accessing your site and creates test report graphs to find out how many users your site could handle.Ideone: Online IDE & Debugging ToolThis tool is an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages, among them C++, Java, JavaScript, Perl, PHP, Python and Ruby. Nice alternatives online: PHP Anywhere (online PHP editor) and CodeRun (allows you to develop, test and debug ASP.NET, PHP and Ajax applications online).Online Dummy Image GeneratorThis online tool generates dummy images for you site: you can specify size, background and foreground colors, image format and add custom text. You can also use shortcuts for several standard dimensions including ad sizes (mediumrectangle, skyscarper, leaderboard etc.), screen resolution sizes and video standards (ntsc, pal, hd720, hd1080).HiFi RegExp ToolRegular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.TableizerClients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain. This tool generates HTML tables out of spreadsheet data. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and you have a properly formatted HTML table for your data.FollowUpThen: Easy Email ReminderIf you don’t mind sending your e-mails to a third-party, try this tool for easy email reminders. On your next email just include time-interval@followupthen.com and the tool will follow up after the time interval you specify. No account is required.Divine: Conversion tool from PSD to HTMLDivine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. Absolutely free.KaleidoThis tool allows you to create meaningful visuals for code and can be used to plan, organize and navigate code in a more intuitive way.SketchpadThis application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.Unicode code converterType or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.Grid System GeneratorThis tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.ud.com namecheckThe tool checks availability of social usernames, domain names and trademarks.Typograph — Scale & RhythmA useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.ColorBrewer Intro – Selecting Good Color Schemes for MapsColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics. It is free to use, although we’d appreciate it if you could cite us if you decide to use one of our color schemes.CSS Inliner ToolIf you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.HTML Purifier – Filter your HTML the standards-compliant way!HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier removes malicious code (better known as XSS) and make sure your documents are standards compliant.RenderaRendera helps you learn HTML5 and CSS. Type in your HTML code and see it rendered in real-time. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports. The tool supports HAML and SASS, too.RegExrAn intuitive tool for learning, writing, and testing Regular Expressions.try ruby! (in your browser)This tool allows you to try out Ruby code in the prompt command line online. It supports Ruby’s built-in methods, and contains a step-by-step tutorial for Ruby newbies.Google Command LineGoogleCL is a command-line utility that provides access to various Google services. It streamlines tasks such as posting to a Blogger blog, adding events to Calendar, or editing documents on Google Docs.Tiny Fluid GridSimple tool that generates code for fluid grid-based layouts.Fonolo.comThis online tool lets you lets you skip the phone menus for hundreds of companies and makes it less frustrating to call large companies. For business owners, Fonolo allows your customers to actually see your phone menu options, before they call you.Producteev: Creating To-Do Lists with EmailsForward your important emails to task@producteev.com and the tool will create to-do lists on the fly and send you alerts when needed. It can be integrated in E-mails, IM, Web, iPhone, Gmail, Google Calendar etc.AddUse – User research made easyAddUse is a web based tool that helps you create, manage and present your user research in a simple, easy to use and cost efficient way. It’s a tool to use at any given moment in your development process. It presents the results from your user tests, surveys and questionnaires in a graphical way, efficiently helping engineering, marketing and management groups make the right decisions.bookwhenOnline registration for events, workshops, classes and courses. The free version allows for 150 events with 300 bookings per month.Further useful toolssee[Mike]code: tool for remote coding interviewThis simple tool lets you conduct a short coding interview remotely: it creates a disposable page for the job candidate and allows you to discover people who struggle to code on big or small problems.jsdo.itThis tool allows you to write code your browser, fork and modify any code, fix bugs and add features and also ask the community about your problems.JavaScript Error TrackingThe service tracks JavaScript errors that occur on your site and provides you with a stack trace to help you debug. Similar errors are grouped together.Old VersionOld Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.OnbileOnbile is a free platform for creating and managing your Mobile Website version for iPhone, Android and Blackberry usersFree Bookkeeping, Accounting, & Tax Services; Self Employment & Freelance SuccessEasily import from online accounts to put your bookkeeping on autopilot and prepare taxes. Get up-to-date reports that give you visibility into your P&L, income, and expenses.iSendriSendr lets you send files to your friends directly, without uploading to a server.seekWPWordPress documentation search engine.speedtracerSpeed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).the Awesome HighlighterThis tool lets you highlight text on web pages and then gives you a small link to the highlighted page.OpenWith.orgThis page provides detailed information about most file extension and links to free programs that can open and create each type of file.Last ClickKuku KlokOnline alarm clock and wake-up call for those of us who often work too much and fall asleep in front of the screen. Open the website, select the desired alarm time and set your favorite wake-up call. Keep the browser tab open. Happily, this online alarm clock works even if your Internet connection goes down. The available sounds are “Classic Clock,” “Electronic,” “Slayer Guitar,” “Military Trumpet” and “Cockerel.”What the Hex?Among the variety of methods of representing color values, some are easier to identify than others. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then this is a simple game for you. All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers.Would you like to see more similar round-ups on Smashing Magazine? Would you like to see more similar round-ups on SmashingMag?Market Research Related PostsYou may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesUseful Glossaries For Web Designers and Developers10 Useful Usability Findings and Guidelines50 Useful Design Tools For Beautiful Web Typography40 Desert Island Web Development Tools© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: time-savers, tools, useful
- Tags:
- design
- workflow
- useful
- tools
- time-savers
June 28 2010, 6:17am | Comments »
-
I posted to smashingmagazine.com
Web Designers, Don’t Do It Alone
http://feedproxy.google.com/~r/SmashingMagazine/~3/kVCaIhBcM-A/
Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]The Dangers Of IsolationOver time, working in isolation (even if you function as part of a team) can prove harmful to your mental health, business and website. In fact, even if other people are working on a project of yours, if they are junior to you, you can still feel isolated. lifeandlove, ShutterstockIf you don’t find a peer with whom you can share ideas and discuss your business or project, you face a number of dangers:Dry up creatively Creativity is born of interaction. Being consistently creative on your own is hard. The best ideas come from people brainstorming together and from one great idea leading to another. Without someone to bounce ideas around with, your business or project will lack a creative spark.Lose confidence Over time we can lose confidence in our abilities or our business. This is especially true when we make mistakes and things go wrong. Without someone to encourage and reassure us, we can begin to second-guess our decisions.Become over-confident While some suffer from a lack of confidence, others are over-confident and need to be challenged and questioned. This is a trait I suffer from; I would happily dive headlong into disaster if my fellow directors did not constantly question my ideas. Without people like this, moving your business in entirely the wrong direction would be too easy.Reach the limit of your knowledge We can’t all be experts at everything, and yet running a website and a business requires a broad range of skills. When working in isolation and tackling problems beyond your comfort zone, you can easily reach the limit of your expertise and flounder.Have a blinkered perspective Another problem with working alone is that you have only a single perspective on your work. By adding another set of eyes to your problems, you gain a broader vision and can approach your challenges from a different angle.Feel overwhelmed Running a business or a business-critical website can feel like a burden. You are often required to make big decisions, particularly with hiring and expenditures. Making these decisions alone is a big responsibility and can be really scary. Having someone to share that with would make a big difference.So, can you identify with any of these traps? If not, then I suggest you read the one about over-confidence again! I don’t believe a single website owner or entrepreneur couldn’t benefit from an outside perspective.The question, then, is how do you find someone?Getting An Outside PerspectiveThe most obvious solution is to partner with somebody at the outset. Whether you work with someone on a website or form a business with an associate, partnerships can be very beneficial. This is what I did with our company, and I haven’t regretted it for a minute. I would be lost without my two co-founders, Chris and Marcus.That said, I know that not everyone’s experiences with partners have been rosy. Also, by the time you read this, the opportunity for this kind of partnership may have already passed.What can you do then? What other options are available to those seeking an outside perspective and someone to bounce ideas around with?Here are some options:Sleeping partner This is the approach we took. We have a non-executive director named Brian who works with a number of companies and keeps us on our toes. He has a radically different view of business and constantly challenges us. In return, he has a small stake in the business. He is worth every penny.Paid consultant If you don’t fancy having someone so entrenched in your business, why not consider an external consultant with whom you could speak on an ongoing basis? Admittedly, this kind of consultant can be pricey, but they do bring an outside perspective to the table.Mentor Another option is to approach a Web designer or website owner you admire and ask them to mentor you. Obviously, these people are probably busy with their own work, but if you are willing to pay for their time, you might get some valuable advice. You’ll usually need only an hour per month to stay on the right track.Buddy A buddy would be a cheaper option, someone in a situation similar to yours. The two of you could agree to chat regularly and share the challenges you face as business or website owners, discussing different approaches and ideas.Community Yet another option would be to look not for a consultant, mentor or buddy, but for a supportive online community. Loads are around, but make sure the one you join is not too big. You want people to remember you and your circumstances.Whatever you decide is entirely up to you. The point is, if you want to realize the potential of your website or business, you need the help and encouragement of others. Humans by nature work best in groups, and you are no exception. We are not meant to do it alone!(al)© Paul Boag for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: isolation, Workflow
June 27 2010, 4:34am | Comments »
-
I posted to smashingmagazine.com
How To Use Photos To Sell More Online
http://feedproxy.google.com/~r/SmashingMagazine/~3/57wppUDSGGw/
As a photographer and UX designer, I pay particular attention to the effectiveness of photography when I’m testing with users. Regardless of the context, users rarely fail to comment on or be influenced by photography when shopping online.This article pulls together principles from psychology, marketing, UX design and photographic theory. It provides a set of principles to follow when commissioning and editing photography and when planning and designing profitable e-commerce user experiences.Show Off Product BenefitsThe best way to sell products is to let them sell themselves. Consider the Gorilla Pod shown below. The photo demonstrates brilliantly the benefits of the product. The copy is supplementary; the image does the heavy lifting. Let photography do the selling for you as much as possible.Don’t Give Reasons Not to BuyOne client sold flowers online, and many customers were buying flowers for hospitalized relatives. Many of the arrangements were displayed in glass vases in the photos on the website but were not actually delivered in vases. Not knowing this, many users felt that they couldn’t buy from that website, because hospitals in the UK (where the business was located) do not allow vases onto the wards.Create an Immersive ExperiencePhotographs have the potential to elicit an emotional response. They can also communicate information quickly; they are easier to “read” than text. Photographs give depth and context to a story, thereby creating a more immersive experience than text can do alone. Photos can be used to inspire, enrage, inform, provoke or entertain.Make ‘em LaughPhotos have the capacity to entertain as much as to inform. If it suits your brand, why not inject a bit of humor? If your website asks users to perform chores (such as doing admin tasks or paying bills), a dash of humor can ease the burden—and your customers might love it.Educate and Inform“Tell me and I’ll forget, but show me and I’ll remember.” Learning can be difficult, but supporting theory with visual stimuli can help us grasp complex concepts and confirm our understanding. Images are easy to remember; how often have you met a new person and found later that you could recall their face but not their name?Tell a StoryFrom an early age we are told stories, and we spend our lives telling stories to friends and families. We know that pictures are effective storytelling tools. Even in the news media, multimedia slideshows are produced to give life to news stories.Highlight InnovationPeople have certain expectations of how things should look and function. If you have a product that differs from the norm, expect a large portion of interest to come from word of mouth; friends will show it to friends, who will show it to their friends, and so on.Show People How to Do SomethingI’m usually the first one to toss out the instructions and work it out for myself. How hard could it be?! The example below illustrates how useful imagery can be when conveying a complex procedure.Don’t Mislead UsersPeople often jump to conclusions when shown certain types of images. We showed pictures of shirts during some recent testing, and people assumed they would come with cufflinks and ties, but these were added by the stylist to make the shirt look appealing.Evoke an Emotional ResponsePhotography is often used to communicate hard-hitting messages (about the environment or human suffering, for example) because it evokes strong emotions. Charity campaigns, for example, know that by photography can get them the type of reaction they want.Plug AccessoriesShowing the product’s accessories helps users imagine how they could enhance their experience of a product. Photos of accessories stimulate desire and offer suggestions about where to direct that desire (i.e. what to purchase next).Show Features and VersatilityShowing a product in use communicates what it’s for and how to use it, and it helps users imagine how it will fit into their lives. It can result in a feeling of need; it will solve problems the users didn’t realize they had!Understand NeedsI remember doing some testing for a major automotive client. The fellow was a keen kite surfer, so his primary interest was the size of the car’s trunk. He is the perfect example of a customer who has primary considerations, or “deal-breakers”, on which they are not willing to compromise. Photography can help your website communicate that needs are being met; sometimes, the more photos, the better.Match the Imagery to the BrandBrands are created and reinforced by photography. A mental disconnect occurs when photos don’t accord with the user’s preconceptions about the brand. It feels wrong and makes the user question what the brand is all about.Sell a LifestyleWhether it’s rural life, the good life or city living, everyone strives to live what they believe to be their perfect lifestyle, and we buy things that match that lifestyle. So, when products are displayed in the context of a lifestyle, we assign value to the product based on our desires. For a wonderful example from a TV campaign, check out the John Lewis “Never Knowingly Undersold” TV ad.Demonstrate Exciting FeaturesPhotography is instant communication, so make it about the best features of your product. I hate getting wet when I cycle, but a coat takes up loads of space in my bag; imagine how compelling the Montane image (below) was for me. I bought a Montane jacket.Make It BeautifulThe camera generally lies. That is, beyond setting and context, there are all manner of camera tricks to help you make the subject look beautiful and desirable. Consider the iPad as a photo frame, and see how the picture is enhanced.Avoid Clichéd Stock ShotsWe commonly get feedback from users about their universal loathing of stock photography. A recent project for a university client showed how users preferred “real” photos to stock images, despite their less polished look. Users wanted a realistic vision of what actually went on at that university.Create DesireThe Web is about self-service. It’s also an ideal way to escape reality. Travel websites know how important it is for potential customers to see resorts and rooms before purchase and travel. They know that the customer needs to envision themselves in that hot relaxing place when they book tickets from their cold home in January.Be Stylistically ConsistentJohn Lewis, the UK department store, takes a painstaking approach to product photography, often taking up to 30 minutes to style individual items within a vast product range. The company defines and adheres to a particular photographic style. The results are stunning because the style is applied consistently.Convey the IntangiblesBentley’s sales often result from brand values such as quality, craftsmanship, heritage and tradition. Often, the qualities related to a product are hard to put into words. Photography can help convey those qualities clearly.Show Some PersonalityPhotography can convey the essence of a product or service, but it can surprise and delight, too. I was looking for something recently on the Ikea website and came across the page below. It reinforces the fact that Ikea doesn’t take itself too seriously, which is a nice touch, and easy to do.Be Subtle SometimesI recently conducted some research for Wiltshire Farm Foods. The response to this photo was amazing: users got the impression that food would be delivered to their elderly relatives whatever the weather. This was of critical importance to them because of the harsh winter. It’s amazing how powerful subtlety can be.Look ProfessionalThe rules of portraiture dictate that a simple uncluttered background will focus interest on the subject. This rule is applied well on product gallery pages, where product images are cut out and presented against a white background.eBay unavoidably suffers from inconsistency, and the page below illustrates how much easier seeing products against a simple background is. Research into websites such as eBay and Etsy shows how important product photography is to buyers. Would you bid on a TV that you couldn’t see a picture of?Threadless breaks the rules, but with good reason. The varied backgrounds feels relaxed and shows off the product in a natural setting. The crop on the subject is tight enough that you get an impression of the environment that doesn’t distract you from the subject.Be ConsistentConsistency draws attention to the important things (in the example below, shirts for sale). The eye is drawn to inconsistency, so make sure any inconsistency in your composition is deliberate.A studio is the perfect controlled environment; you can ensure that lighting remains exactly the same between shots. The lighting style reinforces the brand’s image. Examples include hard edgy light in photographs for a youth clothing brand, and soft ethereal light in photographs for an environmental lifestyle brand.Use Unusual Vantage PointsYou can make an otherwise everyday object seem more interesting by shooting it from an angle that differs from the normal human line of sight. Sound advice: get high or get low. Do whatever you can to give a unique perspective.Shoot From the Best AnglesYou will often hear people claim that they prefer to be photographed from a certain side or from their “best angle.” Products also have flattering and unflattering angles. Peruse some automotive websites and brochures; see how many cars are shot from a three-quarter angle. This angle suggests power and scale. The shots are clearly designed to appeal to a masculine audience.Show Objects in Their Natural EnvironmentThe environment in which you place the subject helps the viewer understand the product’s purpose and suitability. A shot of a grizzly in its natural habitat seems much more fitting and “real” than a shot of that grizzly bear in, say, a parking lot. Product shots in an appropriate environment suggest both where and how the product can be used.Convey a Sense of ScaleBuying something online can be problematic. Predicting its suitability is difficult without seeing or touching it. (Will it fit? Will it match? Will it look right?) Including an object with a known size in the photograph presents the viewer with an immediate visual reference.Image Size Is ImportantIncreasingly fast Internet connections allow clients to work with large images. On real estate websites, for examples, images can’t be big enough; users want to fully explore their potential new homes. That said, if you will be offering a “larger view” of a photo, make sure it really is significantly larger. (My experience with testing has shown me that users are annoyed by “larger” images that are only marginally different.)Show the Product in UsePeople want to be sure they are buying what they want or need. Show the product in use to help the user see that it suits their needs. Following the advice “show, don’t tell” removes the need for additional explanatory text. Few people will read it anyway, because a picture is worth a thousand words.Show How It WorksConsider the pineapple slicer (below). You’d pick it up in a kitchen shop and think, “What the heck is this?” Now try explaining how it works on a website without a photo. A nightmare. Again, show, don’t tell.Make Choosing EasyA recent client had over 90 variations of an everyday product available for sale. The variations were meant to offer flexibility, but they bamboozled customers. The example from Ben Sherman (below) is another case of too much or poorly explained variety. How does “mod” style differ from “union” style, for example? I have no idea. The photography should make it clear but doesn’t.Enhance the ExperienceI don’t know why Bing decided to put images behind its search screen, but I like to imagine that they thought, “Heck, why not?” We like things that are emotional or visceral. Good experiences with products and services feed on our tastes and bring return business. So, if Bing helps you find what you’re looking for and is also visually appealing, you’ll use it again and again.Show DetailsHere is a true example of why showing details works. I recently bought a bike. A deal-maker for me was the ability to secure a rack to a fixed part of the bike; I wasn’t going to buy a bike without this. The Evans website provided large zoomable photos that allowed me to check for this detail. I bought my bike from Evans.Show Me What It Looks LikeI’ve mentioned this already in a roundabout way, but showing the product piques interest and brings business.Encourage InteractionA recent test I was involved in asked users to try out the websites of different real estate agents. One user completely reversed their initial opinion of one of the agents when they saw the number of detailed photographs available; they expressed delight and interest. Encouraging interaction by providing functions such as zoom and rotate leads to a satisfying user experience.Show Me I’m in the Right PlaceAn important aspect of way-finding in digital environments is showing people where they are. Google accomplished this in a literal sense with Street View on Google Maps; this was an innovative use of photography. When we meet with clients in unfamiliar locations, for example, we can see what the place looks like beforehand. We feel prepared and less anxious about being late.ConclusionPhotographs play a crucial role in informing, influencing, educating and reassuring customers throughout the buying process. Review your website’s photography and question its role. What is the job of a particular photo at that particular stage of the process? Is it effective? When might customers drop out, and how could photos prevent that from happening?The task of image selection often falls to the designer. User experience professionals should actively influence the process of selecting photos for the buying process. The days of having a placeholder for images in our wireframes and prototypes are over. We should be annotating our work to influence decisions that art directors make when selecting images. Consider these principles to ensure that the images you choose not only “look right” but also work well.Website owners should recall the principles mentioned in this article when commissioning new photos and researching stock. Focus on the purpose of the images, and you will turn photos from window dressing into key conversion tools.How have you used photography to maximize conversion? We’d love to hear success stories and anecdotes from user testing.[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!]Further ResourcesIf you liked this article, you’ll love these.Cracking UX Resources52 weeks of UX Weekly doses of UX goodness.Johnny Holland A rather good UX magazine.UX magazine Another good UX magazine.cxpartners blog The latest thinking on optimizing e-commerce websites and broader UX topics.Inspirational Photography WebsitesThe Big Picture Stunning images from the Boston Globe.JPG Great photos form amateurs who contribute to this online mag.Pictory The best photo stories of readers.National Geographic The original and the best.Magnum Inspirational images from the world’s best photographers.Strobist The definitive online resource for off-camera Flash.Scott Kelby Brilliant books and tutorials.Chromasia One of the best photo blogs around.Chase Jarvis Commercial photographer extraordinaire.(al)© James Chudley for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: conversion, photography
- Tags:
- design
- photography
- conversion
June 25 2010, 3:43am | Comments »
-
I posted to smashingmagazine.com
The Ultimate Guide To A/B Testing
http://feedproxy.google.com/~r/SmashingMagazine/~3/mCRbm60Bdes/
A/B testing isn’t a buzz term. A lot of savvy marketers and designs are using it right now to gain insight into visitor behavior and to increase conversion rate. And yet A/B testing is still not as common as such Internet marketing subjects as SEO, Web analytics and usability. People just aren’t as aware of it. They don’t completely understand what it is or how it could benefit them or how they should use it. This article is meant to be the best guide you will ever need for A/B testing.[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!]What Is A/B Testing?At its core, A/B testing is exactly what it sounds like: you have two versions of an element (A and B) and a metric that defines success. To determine which version is better, you subject both versions to experimentation simultaneously. In the end, you measure which version was more successful and select that version for real-world use.This is similar to the experiments you did in Science 101. Remember the experiment in which you tested various substances to see which supports plant growth and which suppresses it. At different intervals, you measured the growth of plants as they were subjected to different conditions, and in the end you tallied the increase in height of the different plants.Large versionA/B testing on the Web is similar. You have two designs of a website: A and B. Typically, A is the existing design (called the control), and B is the new design. You split your website traffic between these two versions and measure their performance using metrics that you care about (conversion rate, sales, bounce rate, etc.). In the end, you select the version that performs best.What To Test?Your choice of what to test will obviously depend on your goals. For example, if your goal is to increase the number of sign-ups, then you might test the following: length of the sign-up form, types of fields in the form, display of privacy policy, “social proof,” etc. The goal of A/B testing in this case is to figure out what prevents visitors from signing up. Is the form’s length intimidating? Are visitors concerned about privacy? Or does the website do a bad job of convincing visitors to sign up? All of these questions can be answered one by one by testing the appropriate website elements.Even though every A/B test is unique, certain elements are usually tested:The call to action’s (i.e. the button’s) wording, size, color and placement,Headline or product description,Form’s length and types of fields,Layout and style of website,Product pricing and promotional offers,Images on landing and product pages,Amount of text on the page (short vs. long).Create Your First A/B TestOnce you’ve decided what to test, the next step, of course, is to select a tool for the job. If you want a free basic tool and don’t mind fiddling with HTML and JavaScript, go with Google Website Optimizer. If you want an easier alternative with extra features, go with Visual Website Optimizer (disclaimer: my start-up). Other options are available, which I discuss at the end of this post. Setting up the core test is more or less similar for all tools, so we can discuss it while remaining tool-agnostic.You can set up an A/B test in one of two ways:Replace the element to be tested before the page loads If you are testing a single element on a Web page—say, the sign-up button—then you’ll need to create variations of that button (in HTML) in your testing tool. When the test is live, the A/B tool will randomly replace the original button on the page with one of the variations before displaying the page to the visitor.Redirect to another page If you want to A/B test an entire page—say, a green theme vs. a red theme—then you’ll need to create and upload a new page on your website. For example, if your home page is http://www.example.com/index.html, then you’ll need to create a variation located at http://www.example.com/index1.html. When the test runs, your tool will redirect some visitors to one of your alternate URLs.Once you have set up your variations using one of these two methods, the next step is to set up your conversion goal. Typically, you will get a piece of JavaScript code, which you would copy and paste onto a page that would represent a successful test were a visitor to arrive there. For example, if you have an e-commerce store and you are testing the color of the “Buy now” button, then your conversion goal would be the “Thank you” page that is displayed to visitors after they complete a purchase.As soon as a conversion event occurs on your website, the A/B testing tool records the variation that was shown to the visitor. After a sufficient number of visitors and conversions, you can check the results to find out which variation drove the most conversions. That’s it! Setting up and running an A/B test is indeed quite simple.Do’s And Don’tsEven though A/B testing is super-simple in concept, keep some practical things in mind. These suggestions are a result of my real-world experience of doing many A/B tests (read: making numerous mistakes).Don’tsWhen doing A/B testing, never ever wait to test the variation until after you’ve tested the control. Always test both versions simultaneously. If you test one version one week and the second the next, you’re doing it wrong. It’s possible that version B was actually worse but you just happened to have better sales while testing it. Always split traffic between two versions.Don’t conclude too early. There is a concept called “statistical confidence” that determines whether your test results are significant (that is, whether you should take the results seriously). It prevents you from reading too much into the results if you have only a few conversions or visitors for each variation. Most A/B testing tools report statistical confidence, but if you are testing manually, consider accounting for it with an online calculator.Don’t surprise regular visitors. If you are testing a core part of your website, include only new visitors in the test. You want to avoid shocking regular visitors, especially because the variations may not ultimately be implemented.Don’t let your gut feeling overrule test results. The winners in A/B tests are often surprising or unintuitive. On a green-themed website, a stark red button could emerge as the winner. Even if the red button isn’t easy on the eye, don’t reject it outright. Your goal with the test is a better conversion rate, not aesthetics, so don’t reject the results because of your arbitrary judgment.Do’sKnow how long to run a test before giving up. Giving up too early can cost you because you may have gotten meaningful results had you waited a little longer. Giving up too late isn’t good either, because poorly performing variations could cost you conversions and sales. Use a calculator (like this one) to determine exactly how long to run a test before giving up.Show repeat visitors the same variations. Your tool should have a mechanism for remembering which variation a visitor has seen. This prevents blunders, such as showing a user a different price or a different promotional offer.Make your A/B test consistent across the whole website. If you are testing a sign-up button that appears in multiple locations, then a visitor should see the same variation everywhere. Showing one variation on page 1 and another variation on page 2 will skew the results.Do many A/B tests. Let’s face it: chances are, your first A/B test will turn out a lemon. But don’t despair. An A/B test can have only three outcomes: no result, a negative result or a positive result. The key to optimizing conversion rates is to do a ton of A/B tests, so that all positive results add up to a huge boost to your sales and achieved goals.Classic A/B Testing Case StudiesHere are some case studies to give you an idea of how people test in the wild.Writing Decisions: Headline Tests on the Highrise Sign-Up Page 37signals tested the headline on its pricing page. It found that “30-Day Free Trial on All Accounts” generated 30% more sign-ups than the original “Start a Highrise Account.”“You Should Follow Me on Twitter Here” (Dustin Curtis) This much-hyped split-test involved testing multiple versions of a call to action for Twitter followers. Dustin found that “You should follow me on Twitter here” worked 173% better than his control text, “I’m on Twitter.”Human Photos Double Conversion Rates A surprising conclusion from two separate A/B tests: putting human photos on a website increases conversion rates by as much as double. Scientific research backs this up, saying that we are subconsciously attracted to images with people.Google Website Optimizer Case Study: Daily Burn, 20%+ Improvement (Tim Ferriss) A simple variation that gave visitors fewer options too choose from resulted in a 20% increase in conversions. The winning version was also much easier on the eye than the control in its detail and text.Two Magical Words Increased Conversion Rate by 28% The words “It’s free” increased the clicks on this sign-up button by 28%, illustrating the importance of testing call-to-action buttons and how minor changes can have surprisingly major results.Changing the Sign-Up Button from Green to Red Along with its other A/B tests, CareLogger increased its conversion rate by 34% simply by changing the color of the sign-up button from green to red!Single page vs. multi-step checkoutIf you have an online store, it is quite common to see visitors abandoning the purchase process at the time of checkout. This A/B test found out that a single page checkout process works much better at completing sales than multiple-page checkout process."Mad Libs" style form increases conversion 25-40
- Tags:
- design
June 24 2010, 3:05am | Comments »
-
I posted to smashingmagazine.com
Decision-Making Models In Web Development
http://feedproxy.google.com/~r/SmashingMagazine/~3/au827KQtfc4/
When was the last time you made a decision? A big one. What was the outcome? Was it good, and how did you get to that outcome? Every day we all make plenty of decisions without a thought to how we structure them or the basis on which we make them. We simply make them. We’re lucky that we work in an industry in which erroneous decisions may have serious financial consequences but rarely, if ever, costs lives.In fields such as aviation and health care, bad decisions can have massive repercussions. As a result, a lot of cash has been spent studying the human factor and developing methods of reducing error. After all, you’d like to think that the person in the cockpit is fully capable of caring for an expensive jet and its passengers.These studies have led to many conclusions and insights on human behavior, and they have also helped to develop formal decision-making and error-checking processes for people involved in making big decisions. These are models we can learn from and apply to our everyday choices, big and small.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Why Do We Need Decision-Making Models? (Image credit: Julia Manzerova)Quite simply, we don’t. We’re all quite capable of making perfectly good decisions on our own with no outside help. However, we also “don’t need” a 960 grid to structure a great Web design, and we don’t need a validator to make clean, valid website code, but they both help ensure that our output is as good as it should be.While some people naturally make good decisions, others struggle and need the support of a model or framework, in the same way that some people naturally make balanced Web designs and others prefer the help of a layout grid.Also, be aware that decision-making models aren’t applied exclusively to rushed decisions on urgent problems, such as unexpected server outages. They can be used to approach any issue, from making an intricate pitch to a client to building or redesigning a website.Bad Decisions and Good DecisionsGood decisions can save both time and money, and experience, forethought and planning can help you make them. The difference between bad and good decisions is not always clear-cut, and our opinion of our own decisions will often change in hindsight. But making measured and well-considered decisions will make us more comfortable with the course we have chosen and more confident in future decisions.Stress and Decision-MakingWe make decisions under a variety of pressures all the time: workload volumes, financial commitments, deadlines. No surprise that the quality of decisions made under stress is not as good as the quality of those made in calmer times.By applying a structure, we can clear our heads in stressful times and make effective decisions when needed.TeamworkFormalizing the decision-making process can be really effective among groups.Most people in the Web design industry regularly work on teams, whether with other designers and developers or clients. These collaborations often come with very large communication barriers, such as remote working and teleconferencing and even language differences, each of which has its own problems. Teleconferencing presents some of the biggest communication barriers. (Image credit: Stuart Cummings)A formal decision-making process helps to ensure that everyone understands what is being done and why it is being done, and it gives them sufficient time and opportunity to give effective input.Basic ModelsWithin the aviation, health care and corporate world, you’ll find a few key decision-making models, all of which aim to provide a sensible, intuitive framework in which to structure better decisions.SHELSHEL is an acronym for Software, Hardware, Environment, Liveware and is used to assess interactions in various situations.The graph is normally drawn out as a cross, with the central liveware (in our case, the end user) in the middle. It can be used as a brainstorming and planning tool to assess the interaction between the elements in the model and the central liveware.For Web design, the diagram could be annotated to show these key areas: A SHEL diagram showing the end user in the middle and including Web design considerations.Using the SHEL model reinforces the point that the end user should be the primary consideration in any planning process.The diagram above shows a typical website scenario, but you can use SHEL to cover all of the areas of any project and to check that you have all the information needed to proceed.Using it as a brainstorming tool with clients, we can ensure that we fully understand the situation and task at hand and can clarify that we are both looking at the same influence factors.By considering every aspect of an interaction or problem, we minimize the impact of any surprises and modifications down the line and help ourselves make better decisions.DODAR The DODAR process is often represented as a circular flow.DODAR is a primary decision-making tool and stands for Diagnose, Options, Decide, Assign, Review. It captures the five key areas of any decision-making process.Diagnose is the first step to solving any problem or decision. Find out the problem and what causes it. Use all available resources to identify the problem or to confirm the lack of one.One of the main reasons for error in decision-making is “confirmation bias,” whereby we make a decision based on a few factors that favor our initial impression, without fully evaluating the problem. How often have you said, “Oh yeah, I know why that is. Won’t take a minute.” And then you find out that the problem isn’t what you thought at all and that the solution will take a little longer. Use the diagnosis stage to make sure you are certain of the issue at hand, by both proving and disproving any ideas or theories.Options, once you’ve decided what the problem is, look at the options available to you. Assess whether the problem is urgent or can be left for a while. But remember, just because it can be left for a while, doesn’t mean it should be!Decide on a course of action that you think is sensible, and check this course of action with the other parties involved.Assign appropriate tasks to people who are capable of carrying them out.Reviewing is the most important stage of all: making sure everything is going according to plan, and making sure you’re getting the results you expect. Question all of your sources again, and if things aren’t as they should be, then find out why and, if needed, return to diagnose the problem and run through the process again.As a tool, DODAR is often overlooked because it follows such an obvious and intuitive decision-making process. But by using it as a mental check, you can confirm that you have come to a sensible and well-considered decision.Facilitating Effective CommunicationYou can see that using a basic decision-making model on your own is a relatively easy process. But the real value of this structured process is in using it with other people.A decision-making model helps teams focus on the task at hand together, whether it be evaluating a website redesign or fixing a server bug.We often struggle to communicate, and our working environment can have huge barriers to effective communication. Remote working and teleconferencing can be the most restrictive because they reduce the communication and interaction available to us to very few dimensions. So, by working in a sensible shared framework, we are able to make effective group decisions despite these restrictions.By using every stage of the DODAR process to confirm evaluations, assumptions and decisions with others before moving to the next stage, we are able to keep everyone on the same page.A Group DODAR ExampleWhen looking at any problem, encouraging the group to work through the process together aids everyone’s understanding of the task.Take a client who is meeting to build a new website. The first step would be to diagnose what needs to be done and why. Does the client need a CMS? Why? Are there hosting issues related to traffic volume or security? Look at your SHEL model here to ensure that each base is covered.Once you agree on the task, you can assess the options. Will you use WordPress, ExpressionEngine or something else? Will you host it on your main server or do you need a dedicated one?When you’re both happy with the options, you can then begin to decide on them. You can also look slightly ahead to the next stage of assigning tasks, if relevant.Having worked through the problem and decided how the website will be built, you can then determine who will do what by assigning tasks and deadlines. Will you write the copy or will the client? Who will supply the photos and artwork?The last stage is review, which can take one of two forms. First is the more immediate analysis of the process that you have just gone through. Are you both happy with the decisions you made and the tasks you are set to carry out? The second form is to set targets for ongoing review throughout the project; i.e. set deadlines, review dates and targets for those dates.NITS BriefA NITS brief is a quick communication framework that is typically used as an emergency brief. But it can be a great mental check list when you want to communicate a task or problem to a colleague or client.NITS stands for Nature, Intentions, Time, Specials:Nature relates to the nature of the problem or task. What is it and why did it happen?Intentions are your intentions, or what you hope will be carried out to solve the task.Time is either the time it will take to carry out the actions or the time you would like them to be carried out.Specials is for anything unusual or unexpected. For example, would a particular colleague normally be expected to do something else? Will they need to contact a different person than usual?As an emergency brief in the airline industry, this is often used to communicate information from, say, the pilot to a flight attendant. Any form of emergency situation can be easily handled by telling the attendant the nature of the emergency, what the pilot plans to do, how long it will take to do it and whether passengers can expect anything unusual in this situation.In the less critical world of the Web, this is still a great mental check list. If a few clients are ringing about a server outage, a quick NITS brief will tell them all they need to know:Nature: it’s a server outage.Intentions: you are rebooting and checking for errors.Timing: it will be back up in five minutes.Specials: clients won’t have email for ten minutes.By using the NITS structure and conveying the problem or task in a sensible and easily understood way, you ensure that all bases are covered.The brief can also be used as a listening and information-gathering tool. For example, when a client rings you with a problem, you would first establish the nature of the problem, find out what they would like you to do about it, estimate the time frame to get it done, and then convey anything else that is unusual for the kind of work you do for them.Rather than merely confirm their telephone number, read back your brief to check for errors. If you’ve taken notes using the NITS structure, quickly read them back to the client to make sure you haven’t misunderstood anything.Trapping ErrorsDecision-making doesn’t have to start when you’re in hot water and everything has fallen apart. It should be an inherent part of the planning stages of every project, to ensure that potential problems are mitigated. Error recovery and error prevention should be integral parts of every project.Swiss Cheese ModelJames Reason’s “Swiss cheese” model is widely used in the aviation and medical industries to identify how both latent (or dormant) failings and active (quick, often one-off) failings of a system can lead to serious and sometimes catastrophic problems. Reason’s Swiss Cheese model shows that when errors in separate layers are not caught, they result in a complete failure.The model is based on the understanding that each layer of protection can be as secure as possible but still have holes. At each layer, the errors on their own are addressed and do not pose serious trouble; but in certain circumstances, all of the errors on the various levels will align to create a much bigger problem. While similar to a domino effect, the problems do not necessarily have to cause or result from each other or be linked in any way. Circumstances simply conspire to create a situation that goes quickly beyond rescue.Such situations often result from both latent and active failures, rather than just one type. Latent failures are those that exist but go unnoticed for some time: unstable code or open loops, for example. Active failures are apparent and cause problems directly: for example, a traffic spike. The Herald of the Free Enterprise, which capsized in the North Sea, is considered a classic example of Reason’s model. No single failure on its own was enough to capsize the boat; but combined, they had disastrous consequences. (Image credit: Wikipedia)Trap, Mitigate, AvoidWe obviously cannot account for every possible eventuality, so by using a three-step model of error management, we should be able to protect ourselves from error chains.Whenever we encounter an error or the possibility of an error, we can apply the simple thought process of trap, mitigate and avoid.Most errors should be trapped as soon as they are detected. This is most often done through techniques such as form validation, by which we trap any errors made and display a message to the user, thus preventing errors from affecting the system.Errors that cannot be trapped should be mitigated. This includes threats from malicious elements, such as SQL injections and other hacking attempts.The use of quotes in query statements is a good example. In this case, an error may have passed unnoticed through a validation check and yet could be potentially damaging in a SQL query. By enclosing user inputs in quotes, we mitigate any possible damage a query error might have.SELECT * FROM sometable WHERE somefield="searchphrase";Catching procedures that are present in various programming languages is another example of basic error mitigation. While we are essentially trapping an error in certain parts of our code, we are allowing the error to happen and mitigating its effects by catching it.Finally, any remaining errors should be avoided by not allowing problems to develop into areas beyond your control, such as setting sensible firewalls and memory limits.To avoid errors on websites, we need to avoid making our code do things it shouldn’t do; for example, by using noscript tags to ensure we do not encounter errors when running JavaScript. Basic error pages such as 404 and 501 also ensure that our website doesn’t exceed its boundaries.Check ListsCheck lists are already widely used in the development industry, and rightly so because they are one of the most effective methods of preventing and recovering from errors. They fall into two main categories.Say and DoWith this model, you read each item on the check list and then carry out the appropriate action. It can be used to prevent and recovery from errors.Prevention is exercised by following step-by-step instructions. The error recovery process usually presents a number of options based on your response to a check. For example, if x, then do y; if not, then do z. The most common example on the Web is troubleshooting. Troubleshooting page on Windows Live Mail.The Microsoft troubleshooting pages follow the form of a say-and-do checklist or, in this case, read and do. They recommend an action to carry out and offer further considerations based on the result of the action.Do and CheckThe second type is an “after the fact” check list, in which a particular task is already done and its completion is checked against certain criteria. This is a tick-box exercise, as found on website launch check lists.Typically, these follow the completion of a memory drill, but in our industry they usually follow the completion of a major action, such as a Web project.Formalizing routine processes is worthwhile, because they prevent problems for those who are unfamiliar with a procedure and those for whom a procedure has become repetitive.Making clients aware that you have these processes in place also instills confidence that you are always working from best practices and ensuring that your products always meet high standards and specifications.Further ResourcesYou may be interested in these further articles and related resources:Fundamental Human Factors Concepts, UK Civil Aviation Authority publication.Human Factors, on Wikipedia.Error Models, on Wikipeida.Human Factors, on Wikiversity.Human Error Models and ManagementMS Herald of Free Enterprise, on Wikipeida(al)© David Sparks for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
June 23 2010, 8:00am | Comments »
-
I posted to smashingmagazine.com
The Ugly Showcase of Military, Intelligence And Defense Websites
http://feedproxy.google.com/~r/SmashingMagazine/~3/cvv-p_J2FPE/
Members of military and intelligence forces around the world risk their lives daily to defend their countries and assist in peacekeeping and aid missions both at home and abroad. The men and women who make up the world’s defense forces make sacrifices that most civilians wouldn’t consider to serve their countries.So, with everything they do for us, shouldn’t they be represented online by website designs that reflect the honor and responsibility they undertake every day? Unfortunately, that’s not the case in many countries out there. Many military websites out there are some of the worst designs in any industry. Whether they’re outdated, broken or designed by amateurs, some of the websites showcased below are bad enough to make you cringe.There are some good ones, though. A number of countries have obviously dedicated the time and resources necessary to project a professional and polished Web presence for their members. A number of other websites have obviously put in some effort and are pretty close. If you know of examples of other great military or intelligence websites from around the world, please add them in the comments! [By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]The OutdatedThe websites featured here might have looked great 10 or more years ago (which was likely when they were created). But either their designs haven’t been updated in a very long time or their designers are still borrowing conventions from the late ’90s.Ministry of Defense of the Republic of Argentina Everything from the color scheme to the header image to the skinny three-column layout dates this design.Royal Bahamas Defence Force This website wouldn’t look quite so dated if it weren’t for the drop-shadows behind the content blocks.Bolivarian Republic of Venezuela The overall layout of this website screams early-2000s.Ministry of Defence of the Republic of Belarus Very minimalistic website with a solid background, gradients, tiny links and many  -empty spaces.Colombian National Police Here’s another great example of a website that would have looked right at home in the late ’90s or early 2000s.Hellenic Navy The thing that dates this website the most is its width: it would look right at home on a screen with a resolution of 800×600.Macedonian Ministry of Defence The layout, the partially rounded corners and the drop-shadow against the background all date this website.Pakistan Maritime Security Agency Using an image like this one as a background was very popular in the ’90s.Serbian Ministry of Defense The layout here is almost grid-like, but it doesn’t quite make it. The color scheme is the most outdated, though.Slovenian Armed Forces Another website that would have been current 8 to 10 years ago.Spanish Armada The rounded colors and glossy buttons would have looked great a few years ago, but now they just harken back to the earliest days of the Web 2.0 style.The Russian Federation Ministry of Defence The design has a striking resemblance to traditional Google AdSense blocks, and the line-height property for the content area certainly should be increased..Sri Lanka Ministry of Defence The color scheme and typography here are definitely reminiscent of Web design 5 to 10 years ago.U.S. Federal Bureau of Investigation The skinny layout, color scheme and overall look of this website feel at least 6 to 7 years old.U.S. National Reconnaissance Office This website screams late ’90s and early 2000s, especially the navigation and typography.Uruguayan Air Force This looks like it was based on a standard template from 5 to 10 years ago.The Poorly CodedThese websites might not have been so bad if they were cross-browser compatible and adhered to Web standards even a little. But they are all so poorly coded that they don’t render correctly in browsers such as Firefox or Safari.Luckily, there aren’t too many of them.Brazilian Army The coding on this website isn’t noticeably horrible… except for all the thin white lines running through the backgrounds and borders of the content blocks.Pakistan Navy I don’t even want to begin figuring out how they got the rounded-corner background to repeat like that in the main content area.South African Army This website wouldn’t be so bad if it wasn’t for the giant gray bar running down the main column, effectively blocking half the content.United States Special Operations Command The headers for all the content blocks here are fine, except the one for the news feeds, which prefers to be higher up on the page.The Poorly DesignedThese websites are just poorly designed. Some look like they were based on stock templates… bad ones. Others look like they were designed in programs aimed at hobbyists or those needing to set up personal websites (in any case, definitely not appropriate for government agencies).Bolivian Army Between the color scheme, the header (which doesn’t come close to spanning the whole design) and the broken icons, this website just doesn’t look good at all.Cuban National Defence I’m not sure where to begin with this one…Egyptian Armed Forces It looks like they couldn’t decide whether they wanted a minimalist website.Republic of Fiji Military Forces This looks like your classic template website, with minor modifications.Ministry of Defence of Georgia This wouldn’t be so bad if the content areas weren’t so disjointed.Indian Air Force This might have been salvageable, except for the horrible alignment.Kenyan National Security Intelligence Service The padding and margins in this website aren’t adequate, and the alignment is off in places. The concept is sound; it just needs to be better executed.Lebanese Army This website might not have been so bad if the colors complemented the camouflage background, rather than clashed with it.The Philippine Marine Corps This is another one for which I’m not even sure where to start.Polish Land Forces Forget for a moment how amateurish this one looks. Notice how the text doesn’t even match up with the navigation buttons.Portuguese Army From the header alone, it’s not so bad. It’s the lower area of this website that doesn’t seem to have any aim.Romanian Land Forces I’m still trying to figure out if that white bar across the top of each column is supposed to be there. Beyond that, they should have paid more attention to how the header colors go with the rest of the color scheme.Royal Thai Army There’s just way too much going on here, and no focal point to grab your attention.Turkish Air Force This almost made it into the “Not So Bad” category below, except that it doesn’t have any focus, and the alignment of some elements is off.Ministry of Defence of Ukraine The ads on this website should be better integrated in the overall design. Other than that, the design looks very dated.United Arab Emirates Ministry of Defence Where’s the content?Zimbabwe Ministry of Defence There’s no color scheme here, and the entire thing looks like something a kid did in class.The Not-So-BadThe websites here aren’t terrible. In most cases, only minor things hold them back. Most of them could be great with just a bit more work.Ministry of Defence of The Republic of Armenia Other than the width of this website (which is a bit narrow for even an 800 x 600 display), it’s not a terrible design.Australian Secret Intelligence Service This design is just fine, other than being a bit boring. And the text could be slightly enlarged for easier reading.Ministry of Defense of Bosnia and Herzegovina If more attention was paid to the baseline or vertical rhythm, this would be a reasonably good design.British Secret Intelligence Service The angles in this design should either be better incorporated into the other elements or removed altogether. Other than that, it’s not bad.Brundeswehr This is one of those websites that doesn’t have anything particularly wrong with it. It’s just underwhelming.Ministry of National Defense of the People’s Republic of China The elements on this website don’t quite have enough continuity, but the color scheme and overall layout are good.Ministry of Defence of the Republic of Croatia This website is also underwhelming. Nothing particularly “wrong” with it, but not impressive either.Ecuadorian Army The header here is great, but the rest of the website doesn’t quite match up, and it feels a bit like a generic template.Ecuadorian Navy Parts of this website are great (the slidehow in the header, for instance) but other parts don’t quite match up, particularly the buttons on the right-hand side and the off-center navigation elements.Armed Forces of Honduras This website isn’t bad. But again, nothing makes it stand out.Norwegian Ministry of Defense Another example of a website that doesn’t do anything to stand out.Peruvian Air Force The idea here is good, but the result isn’t very interesting.Portuguese Ministry of Defense Another inoffensive yet unimpressive website.Portuguese Navy This would be great, but it has just a little too much going on. Some negative space would make a huge difference.Saudi Arabian Ground Forces This website is more interesting than some of the others here, but it doesn’t quite pull it together.Sri Lanka Navy Here’s another website that looks like a template. The use of white space could be better and makes everything look a bit disjointed.Swiss Army Another underwhelming, uninteresting design. At least it looks professional.US Air Force A professional yet boring design. But maybe that’s how military websites should look?US Central Intelligence Agency This website is way too narrow, and overall it’s just not eye-catching.US Department of Defense Too much is going on here, and the social media links (the icons especially) on the left look out of place.US Navy The icons and banners in the header don’t really fit the rest of this design.A Few Good SitesThe websites below are the stars of this post. They are well designed, easy to use, professional and worthy of representing the armed forces and intelligence services.Austrian Armed Forces This one’s clean and well laid out, with plenty of white space and a great color scheme.British Army A professional-looking website, with a background that’s more interesting than most.British Royal Air Force Another website with an interesting background and a clean overall design.British Security Service MI5 The color scheme here is great, as is the overall aesthetic, which is a cross between minimalist and magazine-style.Ministry of Defence of the Republic of Bulgaria A clean, well thought out design that makes good use of textures and gradients.Chilean Navy The header here is fantastic, and the rest of the layout works well.Ministry of Defence and Armed Forces of the Czech Republic Another great header design: this one doubles as navigation. Each section of the website has a different color scheme, while maintaining the same basic look.Defence Command Denmark A minimalist layout that leaves plenty of white space.The Finnish Defense Forces A clean and organized design, with double-tabbed navigation bars.Netherlands Ministry of Defence The purple color scheme here is unexpected, but it works well and sets the website apart.Polish Ministry of National Defense This is one of the nicest designs in this post, especially because of the header.Swedish Armed Forces A good clean design with a minimalist aesthetic and great typography. The transparent titles over the images on the right really take it up a notch.US National Security Agency Professional, easy to use and coherent: everything an intelligence website should be.US Army The US Army website brings together a lot of content of various types while maintaining a usable and consistent user interface.US Marine Corps This website stands out mostly because of the grid used for the main content area and the ample white space everywhere else.(al)© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases
- Tags:
- inspiration
- showcases
June 23 2010, 3:52am | Comments »
-
I posted to smashingmagazine.com
June UX Roundup
http://feedproxy.google.com/~r/SmashingMagazine/~3/J2CFR1dVVq8/
Our field is such an exciting one to be part of. We see continuous growth, and brilliant people are always generating top-notch material for the community to consume, respond to, and grow from. Here are some highlights from the UX community: Agile and UX CoachingOne of the more common challenges in integrating UX work into an Agile team is the push-and-pull between the good Agile practice of having knowledge and expertise distributed across team members, and the desire to have a genius designer just come up with a strong design concept and hand it off to the team. User Centered DesignThe central premise of user centered design is that the best designed products and services result from understanding the needs of the people who will use them. This is an information graphic poster illustrating the underlying lifecycle, methods, principles, and techniques in a user centered design process, where the visual part is only the tip of the iceberg. Usable EfficiencyUsable Efficiency is a new website that showcases videos that improve websites and the way you build them. Topics range from frustrating usability mistakes to white space. One gripe I do have, however, is that I cannot link to specific episodes easily. Wireframe ShowcaseThis site features all styles of wireframes (quick sketches, detailed, computer generated, etc) used to plan websites, web apps, desktop apps, or anything else! Wireframe Showcase is meant to be a place for designers to show off their projects and share something about their process. Web Survey Design, Step-by-StepDavid Travis guides us through the steps to create the perfect Web Survey. He explains that good questions alone are not enough, but all six of his steps will help you achieve web survey nirvana. iPad vs iPhone User Experience: Square at SightglassBold Peters conducted an observation of 14 customers over three months at our neighborhood coffee shop, Sightglass; they just so happened to be early users of squareup.com, on both the iPhone and the iPad. The video compares the real-world usage in a business context of the iPad vs the iPhone. Keep an eye on UX Mag for an in-depth article on this topic. Presentation: Revealing Design Treasures from the AmazonAs designers, we need to know what Amazon does; as designers, we are all affected by Amazon. This slideshow presentation and audio recording of Jared Spool is a must watch (and listen)! Red vs. Green Buttons ReduxLast week, we published some A/B test results showing how a red call-to-action button clearly out-performed a green one when it came to converting people on our homepage (we’ve also put them on ABtests.com). Given the danger of generalizing results for all cases outside of the test, we were anxious to know if anybody else would post similar (or conflicting) results. Remote Usability: New Tools AVALANCHEThere are an abundance of new remote usability tools launching. Nate reviews the new tools that have launched within the last month or two. If you’re interested in remote usability, remoteusability.com is a must read blog. Intentional Communication: Expanding our Definition of User Experience DesignDesign and content. Content and design. It’s impossible (and stupid) to argue over which one is more important than the other—which should come first, which is more difficult or strategic. They need each other to provide context, meaning, information, and instruction in any user experience (UX). Signposts: Helping Users Navigate ContentNavigating unfamiliar information on the web requires aids. These aids don’t have an agenda or bias the way advertising does. Instead, navigational aids help people find the right path based on their interests. Pros and Cons of Remote Usability TestingIn-person user research used to be the only game in town. As with most industry practices, its procedures were developed, refined, and standardized, then became entrenched in the corporate R&D product development cycle. Practically everything gets tested in a lab, hallway, or conference room nowadays: commercial web sites, professional and consumer software, even video games. But nowadays, we’ve got remote usability testing. Agile + UX: Six Strategies for More Agile User ExperienceSix ways to be more agile and better integrate user experience and information architecture into agile development teams. Personas: The Definitive GuideConducting user research can produce some amazing insights… but how do you communicate these findings to the rest of your team? This is where personas can step in. When used effectively, personas can communicate the results of user research in ways that take said results into account throughout the design/development cycle. Usability and Online GamblingHave you ever encountered an ethical dilemma in experience design? What is the dark side for you? What industries would you never design for? Gradual Engagement Boosts Twitter Sign-Ups by 29%Twitter recently redesigned their sign-up process to boost new user engagement. Though the new sign-up process added one more screen, conversions went up 29%. How? Gradual engagement. What Five Users Can Tell You that 5000 CannotWith usability testing, it used to be that we had to make our best guess as to how users actually interacted with software outside a contrived lab-setting. We certainly didn’t have all the information we needed. In a sense, knowing what users did was a puzzle with a lot of missing pieces. Master User Experience DesignUser experience (‘UX’ to its friends) is a term increasingly bandied about. Currently in that strange position of being excitingly new to many, touted as an essential component of web design process by industry experts, and seemingly on the way to becoming ubiquitous, UX also has an air of mystery about it. This is partly because it’s tricky to pin down. Quotes from the User TumblogI think all of us can sympathize with this Tumblog. Ever have a client think that users only say nice things? Here’s the place to prove them wrong. And of course, you can submit your own quotes. Design Better And Faster With Rapid PrototypingThe old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. Progressive Disclosure: Presenting Information On A Need-to-Know Basis Do you sometimes struggle with how many links to include in the main navigation of a fairly large site? Maybe the issue is where the secondary navigation will be located in your design. UX LeadershipThis website was created to address the many issues we face as designers related to power, authority, influence and leadership. It started when the author began writing the presentation for CHIFOO called “Traversing Power Structures,” and realized the problem was much bigger. It needed room to grow—a forum to discuss leadership in the context of the UX community.Hot UX Booth ArticlesHere are our top three articles from the last few months: Complete Beginner’s Guide to Design ResearchResearch actually begins the moment we learn about a project, whether we acknowledge it or not. As user experience designers we aren’t content simply designing to specification. Instead, we ask questions; we take notes; we learn everything we can about our client and their audience—and that’s before we even begin! In this article, we explore the (purported) method to this (seeming) madness, appropriately known as design research. About Pages: Good, Bad, and MissingJohn Hyde has uncovered a variety of approaches while researching About Us pages. This post catalogs some of the most notable, eventually exploring why some of the biggest names decide to go “without about.” 43 Essential Controls for Web ApplicationsFamiliarize yourself with Rich Internet Application technologies and the best UI controls for creating your application. Rich Internet Application technology has empowered us to create really amazing user experiences. The best RIAs on the web today rely on a discreet set of UI controls to provide a lively and timely experience.In Love?Are you in love with these resources? Then you better head over to our resource section ASAP! Additionally, as a lover of UX, you have a moral obligation to submit future UX resources that you find to our resources form.
- Tags:
- Blog
- Roundups
- agile ux
- iphone user experience
- personas
- remote usability tools
- user centered design
- ux coaching
- web survey design
- wireframes
June 22 2010, 6:00am | Comments »
-
I posted to smashingmagazine.com
The Beauty Of Typography: Writing Systems And Calligraphy, Part 2
http://feedproxy.google.com/~r/SmashingMagazine/~3/TxT6p4WQQkQ/
The beauty of writing systems is that each has something unique from which to draw inspiration. Two weeks ago, in the first part of this article, we covered Arabic and East-Asian languages (Chinese, Japanese, Korean and Vietnamese) and a few Indic scripts (Devanagari, Thai and Tibetan).We are now back for the second (and last) part, which is a bit different but just as interesting. You will see that some features of the languages presented here clearly correspond to our Latin-based system, while others are unfamiliar. The point of this second part is to complete our look at writing systems of the world and to think more generally about what they signify. We’ll cover the following:HebrewModern European scripts (Latin, Greek, Cyrillic, Armenian, Georgian)MongolianInuktitutInternational Phonetic Alphabet[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.]Writing Systems Of The WorldBefore we get started, let’s take a moment to understand where everything fits in: Click on the image to see it full-size.Figuring out how many languages are spoken in the world is hard, but estimates are at around 7000 languages and dialects, with hundreds of script for writing them down. Fortunately, the major writing systems fall into four broad categories:Alphabetic As you probably know, an alphabet is a segmental writing system in which a standardized set of letters (graphemes) roughly represents phonemes. The word “alphabet” is derived from Alpha and Beta, the first two symbols of the Greek alphabet. Two types of alphabets are important in classifying writing systems:Adbjad, which contains symbols for consonants only, or vowels optionally written with diacritics (e.g. Arabic and Hebrew).Adbugida, whose basic signs denote consonants with inherent vowels. “Following” vowels other than inherent ones are denoted by diacritical marks or another systematic modification of the consonants (e.g. Devanāgarī).Logographies In a logographic system, each character (logogram) represents a single complete grammatical word and is more precise than a morpheme (e.g. Chinese).Syllabaries As the name suggests, in a syllabic system, characters represent or approximate syllables (or more precisely “moras”), which make up words. A symbol typically represents a consonant sound followed by a vowel sound, or a vowel alone (e.g. Japanese).Featural A featural writing system represents finer details than an alphabet. Each symbol represents not a whole phoneme but rather the phonetic features that make up the phoneme, such as voicing or place of articulation (e.g. Korean).Unluckily for us, most writing systems cannot be classified as purely one type. Indeed, many languages include several of these features. In English, for example, the clusters of phonemic letters are a complex match to their sounds.End of parenthesis. I could go on, but then this would not be the article you signed up for. So, we’ll go back to our subject and start exploring the typographic beauty of languages. If you’re interested in this classification of fascinating writing systems, then this Wikipedia article is a great start.HebrewThe Hebrew alphabet is a descendant of the Aramaic alphabet, which is itself a descendant of the Phoenician alphabet. Like Arabic, the Hebrew alphabet is an abjad in its traditional form (i.e. an alphabet consisting only of consonants), written from right to left. It has 22 letters, 5 of which have different forms at the end of a word (called “sofit”). The Hebrew alphabet has only one case, so capitalization is not used, and it is often called the “alefbet” because of its first two letters.DiacriticsAgain like Arabic, modern Hebrew orthography includes several types of diacritics as aids to pronunciation. These are written above, below or inside the letter, in ways that do not alter the spacing of the line. Text containing these markings is referred to as “pointed” text and contains three types of marks:The niqqud (points) are used most. They represent vowels or are used to distinguish between alternative pronunciations of several letters of the alphabet.The geresh (indicating initialisms) and the gershayim (indicating acronyms) are diacritics that affect pronunciation. They are also used to denote Hebrew numerals but are not considered part of the niqqud.The cantillation are accents that show how Biblical passages should be chanted and that sometimes function as punctuation. Letters are in black, points in red and cantillation in blue.Fonts The Hebrew letter ה (heh) in four fonts (from right to left): modern Hebrew block, modern Hebrew handwriting, Torah scroll writing, “Rashi” script.Hebrew can be written in three main scripts:Cursive Hebrew Used almost exclusively when handwriting in modern Hebrew, because it is faster to write than traditional Hebrew.Rashi A semi-cursive script used in books for editorial insertions or biblical commentary. (Named after Rashi, one of the great medieval Jewish scholars and biblical commentators.)Block Used mostly in books. A stylized form of the Aramaic script.GematriaIn Hebrew, each letter is also used to denote numbers. One interesting thing about Hebrew is “Gematria,” the system of assigning numerical value to a word or phrase, in the belief that words or phrases with identical numerical values bear some relation to each other. The best-known example is the Hebrew word “Chai” (meaning “life”), which is composed of two letters that add up to 18. For this reason, 18 is a spiritual number in Judaism, and many Jews give gifts of money in multiples of 18. The word “Chai” is composed of the two letters: Chet (ח) and Yod (י). There are 22 solid figures composed of regular polygons (5 Platonic solids, 4 Kepler-Poinsot solids and 13 Archimedean solids). Because the Hebrew alphabet has 22 letters, we can infer a correspondence between these two seemingly unrelated categories. The art of gematria is knowing which solid to associate with which letter.This system is used to gain insight into related concepts and to find correspondence between words and concepts. According to most practitioners, there are several methods of calculating the numerical value of individual words and phrases. When converted to a number, a word or phrase can then be compared to another word or phrase, from which a similarity can be identified.CalligraphyOver 150 laws govern how the Hebrew alphabet can be written by a Jewish scribe. Needless to say, we won’t list them all here, but a few are below, including the standard for writing the letter “tsadi,” which consists of the letters Yud and Nun. For more information, this website is quite extensive.European AlphabetsIn this part, we’ll cover the five modern European alphabetic scripts: Latin, Greek, Cyrillic, Armenian and Georgian.LatinThe basic modern Latin alphabet (containing 26 letters, possibly also used in combination with diacritics) is the best known of the Latin alphabets. The writing system is not only the most used in Europe but is the most widely used alphabetic writing system in the world today. Consequently, we have many Latin-derived alphabets.Some languages have fewer than 26 letters, such as the Italian alphabet, which has only 21 letters (thanks to the person who pointed this out in a comment). Most Latin-derived alphabets use the basic 26 letters, plus extensions. Diacritics are the most common way to extend the alphabet, but not the only way, as we will now see.1. Adding diacritics One way to extend the basic alphabet is by adding diacritics to existing letters, a practice followed by most Latin-based languages (English pretty much being the exception). The illustration below is from the very interesting article “On Diacritics” from I Love Typography, showing various diacritics in use.2. Joining multiple letters to make ligatures Another way to extend the alphabet is by joining multiple letters to make ligatures. Fusing two or more ordinary letters creates a new glyph or character. Typical ligatures in the Latin script.3. Clustering letters Diagraphs and trigraphs are pairs and triplets of letters to which a special function has been assigned. They are not proper characters and do not correspond to the value you would get by combining two or three characters normally. Rather, they are pairs or triplets of letters with a special function. In Welsh, the digraph “Ll” is fused as “ll” to form a ligature.Digraphs and trigraphs are found in alphabets other than the Latin one, and we can discern various patterns in their form:4. Collating The question arises: how to sort all these modified letters? This is where collating comes in handy. Collation is the assemblage of written information into a standard order. One common type of collation is alphabetization, although collation is not limited to ordering letters of the alphabet.These additional letters can be regarded as distinct new letters and are assigned specific positions in the alphabet (such as the symbols Å, Ä and Ö in Swedish):A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z · Å · Ä · ÖIn other cases, especially with letter-diacritic combinations, extensions are identified by their base letter (as with Ä, Ö, Ü and ß in German).A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z ( + Ä · Ö · Ü · ß)To complicate things further, there are languages in which certain extensions are regarded as new letters and others are not. For example, in Spanish, the character Ñ is considered a distinct letter and is sorted between N and O in the dictionary; but the accented vowels Á, É, Í, Ó, Ú are not distinct from the unaccented vowels A, E, I, O, U, respectively.A · B · C · D · E · F · G · H · I · J · K · L · M · N · Ñ · O · P · Q · R · S · T · U · V · W · X · Y · Z ( + Á · É · Í · Ó · Ú · Ü )Cyrillic AlphabetThe Cyrillic alphabet was developed by the Slavs in Bulgaria in the 9th century. It is based on the system of Greek capital letters, augmented by ligatures and consonants from the older Glagolitic alphabet to account for sounds not found in the Greek. The Greek alphabet. The Russian Cyrillic alphabet.The early Cyrillic alphabet came to dominate over Glagolitic in the 12th century. Since its creation, it has adapted to changes in the spoken language and developed regional variations to suit the features of national languages. Variations of the Cyrillic alphabet are used nowadays for languages throughout Eastern Europe and Asia.It is interesting how different some of these letters can be depending on whether they’re written in regular or italic cursive:Likewise, uppercase, small caps and lowercase can be quite different:ArmenianThe Armenian alphabet has been used for the Armenian language since the 5th century. Until the 19th century, the Armenian language had only one written form: Old Armenian. Since then, phonological changes have split it into two dialects: Eastern and Western Armenian. A typeface created by Khajag that improves on the legibility of current typefaces used in school textbooks.Schools nowadays teach only the Eastern dialect as the written form because it is closer to the historical Old Armenian form, even though the Western dialect is more widely spoken. The following chart shows the alphabet, with its Eastern (EA) and Western (WA) phonetic values:Punctuation in Armenian is quite interesting, because it is completely different than what we are used to: The Erkatagir script is monumental in style. The majuscule letters are large, erect, with gracefully rounded lines that connect (or spring from) the vertical elements of the letters. All letters are written on a base line between two imaginary parallel lines, with ascending and descending elements only slightly extending beyond. Round Erkatagir is characterized by a contrast of thick vertical forms and razor-thin connecting curved strokes. [text from 15levels]The Bolorgir, or minuscule, ancestor of modern Armenian type fonts, dominated scribal hands from the 13th to 16th centuries and continued well through the 19th. It has developed more elegant and graphic forms, and although by definition a round script, the characters are slanted and the letters have sharp corners. The contrast between base shapes and connecting strokes is not as extreme as in Erkatagir; it is a more cursive script (characters are closer to one another), smaller in size and different in shape. [text from 15levels]The Notrgir, or notary script, is a blend of Bolorgir and Sła’gir, dominated by small cursive forms. Back in the 17th and 18th centuries, the secretary—working as a scribe in the royal court or Catholicosate—employed as a matter of necessity time-saving cursive versions of Bolorgir and even smaller Notrgir letters. The structure may have entered Armenian writing traditions in the late Byzantine Greek or Latin periods. [text from 15levels]GeorgianGeorgian (ქართული დამწერლობა) is the writing system of the Georgian language (of course), but also of other languages in the Caucasus, mostly South Caucasian languages. Georgian has always used three distinct alphabets: Asomtavruli, Nuskhuri and Mkhedruli. They have progressed through three forms, all dissimilar, even though they share the same letter names and “collation” (now you know that’s just a fancy way of saying alphabet order). The word meaning “alphabet” (ანბანი [anbani]) is derived from the names of the first two letters of each of the three Georgian alphabets, the modern one containing 33 letters.Georgian is interesting because of its double influence. Like its neighboring language, Armenian, it displays Greek influences in its letter-ordering, while Iranian influences are visible in the cursive shapes of the letters (especially the ancient forms), and the abundance of sibilants are reminiscent of Pahlavi, an ancient Iranian script.MongolianThe Mongolian script has a long history. It was developed as an adaptation of the script of the Uyghurs, who were captured by the Mongols during a war against the Naimans around the 12th century CE. But it didn’t fit the Mongolian language: the spelling was ambiguous because Uyghur letters represented multiple sounds. In addition, the spelling fossilized while the sounds naturally evolved, thus separating the written and spoken language. Language reform during the 16th century CE alleviated the problem, and the resulting script is known as Mongolian:Mongolian is special for its vertical writing. The Uyghur script and its descendants—Mongolian, Oirat Clear, Manchu and Buryat—are the only vertical scripts written from left to right. This happened because the Uyghurs rotated their script (which was derived from Sogdian, a right-to-left script) 90° counter-clockwise to emulate Chinese writing, but without changing the relative orientation of the letters.For more inspiration from the Mongolian script, don’t miss these antiques of Mongolian calligraphy.InuktitutInuktitut (ᐃᓄᒃᑎᑐᑦ, literally meaning “like the Inuit”) is the language of the Inuit people, specifically the Inuit of the Canadian Eastern Arctic. It also refers to the Inuit language as a whole, which itself is more of a dialect continuum than a single language. Roughly four dialects and variants groups are on this continuum, depending on the region where they are spoken. The Canadian census reports that approximately 35,000 Inuktitut speakers are in Canada, including about 200 who reside outside of traditionally Inuit lands.With only 0.01 people per square kilometer of land, Nunavut is one of the least populated regions in the world. And yet it has four official languages: English, French, Inuktitut and Inuinnaqtun. For this reason, the government of Nunavut adopted a clean sans-serif font called Pigiarniq (designed by Tiro Typeworks) that enables its people to use all four languages in a uniform manner. The result is a professional-looking free font family: Preview of the Pigiarniq font: regular, light, italic, bold, heavy.International Phonetic AlphabetLet’s finish this series with the International Phonetic Alphabet (IPA). This system of phonetic notation is based on the Latin alphabet and is designed to represent only distinctive qualities of spoken language: phonemes, intonation and the separation of words and syllables. Phonetic transcriptions of the word “international” in two English dialects.The general principle followed by the International Phonetic Association is to provide one symbol for each distinctive sound, meaning:Individual sounds are not represented by letter combinations, and multiple sounds are not represented by individual letters (the way “x” represents [ks] or [ɡz] in English);Letters do not have context-dependent sound values (as “c” does in English and other European languages);Two sounds are usually not given separate letters if no known language distinguishes between them (a property known as “selectiveness”).Interestingly, all pronunciations in the languages we have looked at can be summarized in the following IPA chart. That’s right: one page! Occasionally, the International Phonetic Association adds, removes or modifies symbols; but as of 2008, the IPA proper has 107 distinct letters, 52 diacritics and 4 prosody marks.Obviously we won’t look at the chart in detail. Below, though, is the IPA chart for vowels, mapped according to the position of the tongue.The IPA is a special type of notation, and yet we can still make out familiar words and names:ResourcesHebrew GematriaFinding numerical relationships between words and phrases.Writing SystemWikipedia’s article about writing systems.Ancient ScriptsA compendium of world-wide writing systems from prehistory to today.Hebrew diacriticsA Wikipedia article about Hebrew diacritics.Hebrew scriptsThis page presents various forms of the Hebrew script.Sacred Hebrew CalligraphyAn article covering various aspects of the Hebrew calligraphy.On DiacriticsArticle from “I Love Typography” exploring diacritics.Chai symbolA Wikipedia article about the Chai symbol.Digraph A Wikipedia article about digraph.ArekAn Armenian typeface.Ruben MalayanThe vision of this project is to create a book that encompasses most fascinating examples of Armenian calligraphy through time.Mongolian Calligraphy in Contemporary ArtHistory and analysis of Mongolian calligraphy.InkwayAntiques of Mongolian Calligraphy.International Phonetic AlphabetA Wikipedia article about the IPA.DisclaimerThis article is partly based on the copyrighted Wikipedia articles (“Writing System“,”Hebrew diacritics“, “Chai symbol“, “International Phonetic Alphabet“); it is used under the Creative Commons Attribution-ShareAlike 3.0 Unported License (CC-BY-SA). You may redistribute it, verbatim or modified, providing that you comply with the terms of the CC-BY-SA.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: script, typography, writing system
- Tags:
- design
- typography
- script
- writing system
June 22 2010, 5:39am | Comments »