SEO vs PPC

Wednesday, July 18, 2012

So you want to increase the amount of visitors to your site? Hopefully you already have great content and design taken care of. This gives you two main online marketing choices when it comes to generating more traffic for your website. These two basic options pay-per-click advertising (PPC) and search engine optimization (SEO).



With PPC advertising, you pay search engines (like Google)  to display ads for your company along with searches for certain keywords. When someone clicks on your ad, you pay a certain amount. You can learn more about PCC advertising in our blog post about it.


SEO is getting your site to rank higher as a result in searches for targeted keywords. This is done by putting those targeted keywords in the meta descriptions, title, header tags, alt tags, and content of your web pages. We have an article about how SEO strategies are changing with Google’s search algorithms.


PPC campaigns tend to work better for those who have more money and less time. SEO work favors those who have time, but not as much money. Here are a few things to consider when choosing one.

BUDGET

SEO can be free, if you learn how to do it yourself. You can even hire a company to do SEO work for you at a fairly low price. With PPC ads, you are definitely going to spend some money. You do have some flexibility here, as you can decide how much you’re willing to pay per click. You just have to realize that the less you pay, the fewer people see your ad.

TIME

You will have to dedicate time to either of these methods, but with SEO you have to be ready to update your site whenever search engine algorithms change. If you don’t update your SEO work, your site will drop in the search results.

COMPETION

If you have a PPC campaign targeting a very popular keyword like “laptop computer”, you’re going to have to pay quite a bit per click. For example, the average cost per click (CPC) for the keyword “auto insurance” is $28.55.


If you are using SEO techniques, you can run into a similar problem. If you are trying to get in the first page for search results for a popular keyword, you’re going to need a lot of time and money to do so. Most keywords are dominated by authority websites, and these are very hard to one-up.


Both techniques can help your business grow, especially when combined. The important thing to remember is that you want to get customers, not just visitors. Your site itself should be your main focus. If it doesn’t serve the visitor well, all the SEO and PPC in the world can’t help you.

Interactive Prototyping with Fireworks - How

Tuesday, July 10, 2012

We’ve talked about why Fireworks is a great tool for prototyping. Now let’s talk about some of the features it gives us to work with. Since Fireworks was designed to create web graphics, it has some very helpful tools.

PAGES

Let’s say we’re creating an interactive prototype for a website. The first step is to set up a document with multiple pages. Each of the names of these pages should be web-safe (They should contain no capitals, spaces, or special characters). The home page should be named “index”. You can use a master page for all the elements that will be consistent throughout all views.

STATES

States give the client even more interactive feedback by allowing you to make hover states for navigation elements. Simply add a new state in the states panel (you can even do this on the master page) and place the hover state of only the changing elements in the new state.

SLICES & HOTSPOTS

Slices are used to define interactive regions and regions that link to other pages. Hotspots define linked areas. To turn a slice into a hotspot, you click and drag the target from the middle of the slice back to the same slice. After you have done this, Fireworks will ask you which state you want to use for the image swap. The “Preview” button at the top-left of the PNG document will allow you to test any hover states you have created. If any of these hover states will be on all pages, you can make them in the master page to save time.


 

LINKING PAGES

You can also use hotspots to create linked areas. These links can be either internal or external. For external links, you need to type the entire address (i.e. http://www.itzetta.com) into the Link field on the properties panel. For an internal link, you can type in the page name like pagename.htm or select the correct page from the dropdown menu. This is where things will break down if your page names are not web friendly.

HTML SLICES

There are three types of slices: foreground image, background image, and HTML, with foreground image being the default. HTML slices allow you to place any HTML code into the area where the HTML slice is. This includes Google Maps, videos, animations, and more. Just remember to use an iframe to insert these elements and make sure the height and width of the element matches that of the HTML slice.

EXPORTING

After you’re done creating all the pages, states, slices, hotspots, and links you need, it’s time to export. Before doing so, you can go to File à Preview in Browser à Preview all Pages in Browser. This will allow you to see all the pages with any interactions and internal links working.


Once you’ve tested out everything in the browser preview, you can go to File à Export… In the dialog box that pops up, you should choose “HTML & Images”, “Export Slices”, “All Pages”, “Include Areas Without Slices”, and “Images in Subfolder.”


When it’s all done saving, your interactive prototype is ready to show to the client! If you get any feedback, it’s easy to make changes to the Fireworks document and save a new prototype to show the client.


Just remember, Fireworks uses simple HTML files and images to build interactive prototypes. These files should not be used for the final product, since they contain subpar code. However, they are great for a quick prototype. 

Interactive Prototyping with Fireworks - Why

Thursday, July 05, 2012

Mock-ups are great, but when designing with interactivity a prototype will give your client the best idea of how the finished project will look, as well as work. Prototypes are essential for web, mobile, and rich interaction applications. This article describes the benefits of creating an interactive prototype instead of a static one and how to do so in Adobe Fireworks.


WHAT IS A STATIC PROTOTYPE?

A static prototype shows individual images for each screen view of the project being created. It usually includes some notes to explain different aspects of different pages. Any interactivity is either implied or described in the notes.

WHAT IS AN INTERACTIVE PROTOTYPE?

An interactive prototype simulates the interactivity that the final product will have. For example, if the final product is a website, the interactive prototype will be viewable in browsers or as a PDF with clickable buttons that navigate to different pages. This specific kind of interactive prototype is known as a click-through prototype. This type of prototype makes it easier to stop issues with the interaction flow or user interface design before you get to the development stages. It also gives a better picture of how things will work to both your client and the developers.

WHY SHOULD YOU CREATE AN INTERACTIVE PROTOTYPE?

An interactive prototype allows for better communication with the client. Since you are providing the client with more information on how the final product will look and work early on, they are able to give more specific and helpful feedback before lots of work is done.


Interactive prototypes can be used for usability testing so you can find and fix errors before any coding is done.


The developer is provided with more detailed direction on how the project should work and look when coded.


The interactive prototype saves time and money by reducing development changes. You can also use the exported images from the prototype for the final project.


Your client will be impressed. If your client has worked with web designers before, they will be happily surprised to get a live preview of their project early on in the process.

NEXT WEEK

Check back next week to learn about how exactly you can create an interactive prototype using Fireworks.


Using Multiple CSS Classes Per Element

Tuesday, June 26, 2012

A great feature of CSS is that it allows you to use multiple classes on a single element. Using multiple CSS classes on one element is supported in all browsers but the very oldest, so it is a pretty safe tactic to use. Here at ITzetta, we use this function to streamline our code and make it more consistent.  


Here’s an example of how this would work. Say you have two divs and you want them both to float left, be 200 px tall, have 10 px of padding, and have a blue background. However, you want one to be 200 px wide and the other to be 400 px wide.


With the traditional method, you would write your CSS classes for each div like this:


.firstBox {

float:left;

height:200px;

padding:10px;

background-color:blue;

width:200px;

}

.secondBox {

float:left;

height:200px;

padding:10px;

background-color:blue;

width:400px;

}


And your HTML for the divs would be like this:


<div class="firstBox"></div>


<div class="secondBox"></div>


Now here’s what your CSS would look like if you took advantage of using multiple classes per element like we do here:


.fl {float:right;}


.h200 {height:200px;}


.p10 {padding:10px;}


.bgBlue {backgroundcolor:blue;}


.w200 {width:200px;}


.w400 {width:400px;}


And here’s what your HTML would look like with those classes:


<div class="fl h200 p10 bgBlue w200"></div>


<div class="fl h200 p10 bgBlue w400"></div>


As you can probably tell just by looking at the code, this will become increasingly convenient as you write more code and have to style more elements. It allows you to keep consistency because you are recycling the same styles over and over. It also prevents you from having to write a new CSS class for every single element. If you want a padding of 10 px on multiple elements, you can just reuse a single class.


I hope this article gave you a little tip on how to increase your CSS coding skills and some insight to how things work here at ITzetta. Check in next week for another article!




Pay Per Click Advertising

Tuesday, June 19, 2012

One of the services we offer here at ITzetta is pay-per-click advertising (also known as PPC). This can be a great way to drive traffic to your site. PPC ads are the ones you see on sites like Facebook and Google and in the content of other sites. Pay-per-click means you choose the amount you are willing to pay for each user that clicks on your ad. Whoever is willing to pay the most for a targeted keyword gets the most exposure, making it an auction-style system. Here are a few tips to ensure your PPC campaigns help you and don’t just drain your bank account.

USE SPECIFIC KEYWORDS

It is important to recognize the difference between specific keyword matches and broad matches. With specific keyword matches, your ad will only show up when the specific keyword you set is present. With broad matches, your ad will appear next to similar phrases to or variations of your keyword. Here’s an example. You may use “show ideas” as a broad match, but that could be displayed next to a search for “baby shower gift ideas”.  


If you have loads of money, broad matches may give you more exposure by appearing to people with irrelevant as well as irrelevant interests. However, it is a much better idea to use specific keyword matches. These may be displayed to a smaller pool of viewers, but you have a higher chance that those viewers will be interested in what you are offering.

SEPARATE SEARCH AND CONTENT ADS

There are two kinds of pay-per-click ads: those that appear in search results and those that are displayed among the content of a site. The search results and the websites that are triggered by your keywords to place your ad can be quite different. It is important not to set the same keywords, ad content, and payment amount for both of these. You might do this to start out, but look at the results to see where your searches are coming from and where you lose money. Then you can start tailoring your ads to better benefit you.


USE NEGATIVE KEYWORDS

Negative keywords allow you to specify which words you do not want to trigger your ad. For example, if you used “show ideas”, specifying “baby”, “shower”, and “gift” as negative keywords could keep your ad from showing up to searches for those terms and websites containing those keywords. This will cut down on irrelevant ad placement.

TARGET YOUR AD CAMPAIGNS

Targeting your ads to a specific group of people based on factors you’re aware of can increase the usefulness of your ads.  If you’re going to advertise in different companies, set up an individual campaign for each country. If you are a local business, you can use micro-geographic targeting to advertise to only certain zip codes. If you find that your ads are most effective during a certain time of day, you can set your ads to run only during those times.

TEST YOUR AD COPY

Your ad copy should be thoughtfully written, but even that isn’t enough. Write a few different versions of your ad, adjust the setting so a random version is displayed, and see which one gets you the most traffic with the most returns (forms filled out, products purchased, most time spent on site, etc). Then you can eliminate the versions that aren’t as effective and try for even more effective ads.

TRACK YOUR RESULTS

You can tie your PPC campaign to a Google Analytics account to see which ads bring visitors to your site and which ads create sales. This information gives you the knowledge to be able to fine-tune your ads. Then you can adjust your keyword bids and trash in-effective ads and keywords to maximize your ROI.


I hope this article allows you to use your PPC investment to its greatest capacity. We would love to be the company that gets your PPC ad campaign off the ground. We offer SEO marketing as well as PPC campaigns and can analyze and modify any marketing we do for you to increase your ROI. Check out our services page to learn more.

Using the Priority Guide for Responsive Design

Thursday, June 14, 2012

Responsive design for websites is becoming a necessity. People expect to have to have a good user experience and to be able to access the same content whether they are using their computer, tablet, or phone. This forces web designers to create their website mock-ups in a new way. No longer can designers simply focus on how the website will look on a computer monitor.

OUT WITH THE OLD

The problem with only creating a mock-up that fits a computer monitor view is that it forces the developer to make design decisions when scaling the site down for other screens. This can cause problems and force the developer to make assumptions when they don’t have all the information they need. Here are some of the major issues:


  • A traditional mock-up does not show how the layout should adjust for smaller device screens.
  • It doesn’t provide a hierarchy of importance based on purpose for the page elements.
  • It doesn’t show how the navigation will be displayed on smaller screens.

IN WITH THE NEW

Drew Clemens has thought up a new design process that caters to responsive design. He has created a mobile-sized content prototype wireframe that he calls the Priority Guide. The Priority Guide is a “single deliverable that provides direction for content-focus design and mobile-first development in something resembling a wireframe.”

Since this wireframe is shown in a mobile-sized view, the content is forced into a single column layout that shows a linear display of content and features.  This makes it easy to see the priority and hierarchy of the page elements. After the designer has the Priority Guide ready to go, it’s easy for them to create the computer monitor version of the site.


THE BENEFITS

With the Priority Guide, the developer is provided with direction for the smallest and largest views of the website. This still means the developer will have to do some guesswork for tablet views, but they will have a lot more information to go off of.


The Priority Guide gives the designer a wireframe that dictates hierarchy, but still gives them lots of creative freedom when it comes to the desktop-size view.


The hierarchy can be easily seen in the Priority Guide. The guide also gives a foundation for the mobile-view layout.


The Priority Guide saves time and money with its two-deliverable process.


Gamification - Using Gamification

Tuesday, June 05, 2012

“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave it. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty”


This quote from Jakob Nielsen illustrates why it is important to put a lot of thought and effort into usability and user interface design. Gamification is not about turning your website into a game, but taking some tips from an industry with very engaged clients. Here are some ways to do just that.


Tangible User Interfaces
The type of controls you use differ with the platform. A computer has a mouse and keyboard. A PlayStation has buttons and joysticks. An iPhone has a touchscreen and an accelerometer. Take advantage of this and cater your design to the platform it’s viewed on. Let iPhone users scroll by swiping the screen and let PlayStation users scroll with the joystick.


Location-Based Websites
Some popular games allow the location of the user to affect the gaming experience. Amazon checks your location and offers to direct you to the version of the site for your area. Social media sites allow users to check in to different stores and get a discount. This also provides free advertising for the store.



Helpful Feedback
Games provide immediate feedback for your actions. You can receive a reward for completing a task or be warned when you are low on health. Providing your site’s visitors with direct feedback can help them from becoming confused. This can include indicating which page they are on, using consistent colors for links and headers, or alerting the user of what went wrong if a form is not completely filled out.

A “Did you mean?” feature like Google search has can be extremely helpful. Many people cannot always spell something correctly, but that doesn’t mean they should be hindered from finding the product or information they want.

Some sites also provide a chat window with a “Can I help you?” message for instant guidance from an employee if they might need it.



Great Content
The quality of your site will always come down to the content. You might have the greatest, gamified user interface in the world, but it is nothing without great content. Gamification should only be a tool to help users more easily reach your site’s amazing content.


Engagement
Engage your users. Ask them for their feedback and actually take it into account. Create pages on Facebook or Twitter so you can interact with your customers. Contests are always great, too. Give away free stuff if you can afford it; it’s great for spreading the word about your company.

Lots of shops offer punch cards where you get a discount or a free item after buying a certain amount of things. This is a great way to engage users. Customers will feel motivated to complete a stamp card if it’s already been started. You could do something similar to this in an eCommerce store by providing a discount to shoppers depending on how often they buy from you or by giving a first-time customer a discount.



Personal and Fun
A greeting on your website for registered customers that includes their name will make them feel cared about. You could also use custom “Thank you!” messages for when a shopper has made a purchase. Sites like Amazon show personalized recommended offers depending on what you’ve purchased previously. Flickr says, “Hi” in a different language every time you log in.


BUT BE CAREFUL

There are definitely limits to all this gamification. These are the “Thou shalt not”s of gamification in web design.


Don’t put the experience over the product.
Don’t get me wrong, the experience is important. If you go to a store the sights, smells, and sounds are carefully thought over. The employees are trained to treat customers in a way that creates a great experience, and it should be the same on a website. But a great experience is nothing without substance behind it. If you don’t have a great product, creating one should be your primary goal. Then you can get to the experience.


Don’t make it difficult.
Games have difficulty levels, but websites shouldn’t. Games aren’t fun without a challenge, but no one wants a frustrating experience just trying to find a product they want to buy. You should make navigating, purchasing products, reading information, viewing photographs, and anything else easy on a website.


Don’t spam.
Bad publicity is actually better than no publicity. Alerting all your followers on Facebook or Twitter every time someone visits your site would get old fast.


Don’t force visitors to play.
Your customers may not want to check in or collect badges and you should respect that. It’s one thing to give a discount to those to choose to, but it’s another to force them to in order to make a purchase.


Don’t ruin your reputation.
Take into consideration how gamification will affect your reputation. Some features of gamification won’t be taken seriously, and would detract from the good standing of a bank or

lawyer. As Peter Steen Høgenhaug says, “Imagine getting a 10% discount from your lawyer for liking them on Facebook.


WRAP UP

Everyone loves a great, unique experience. This is what keeps customers coming back for more. When used well, gamification can help create that experience. Just be careful not to let it get in the way of actual information or product purchases.  

Gamification - What Makes a Game

Tuesday, May 29, 2012

A game can keep someone hooked for hours, or even days, at a time. A gamer will stick with a game even during the boring and repetitive parts. Obviously a game is not the same thing as a website, but you can use some of the same principles to make your website as addicting as a game. This is called gamification. If you use the methods of gamification right, you could keep your visitors occupied for a long time without them even realizing how long they’ve been sitting in front of the screen.


Gamification does not mean you add the graphics, missions, and high score rankings of games. It means you use the theories behind the games. This article is an introduction to the theories of a game. Our next article will cover some of the ways to implement gamification into your websites and applications.


WHAT MAKES A GAME

Let’s start with the basics. First we need to know what components make up a game. In Andrew Rollings and Ernest Adams on Game Design, Rollings and Adams write about the four components of any game: play, pretending, rules, and goals.


Play
Play usually involves no goals, it is simply for enjoyment. In a game, when you are simply playing around, you are creating your own storyline. You actively create your entertainment in contrast to just accepting it, like while watching a TV show or reading a book.

Clear is an app that allows users to simply play. It was designed to let users create, keep, edit, and delete lists of tasks, but some people said they would create lists just for the fun of checking them off.


 

Pretending
Part of the allure of a game comes from the user’s opportunity to be whoever and do whatever they want. This often allows people to act very differently than they would when they are not anonymous. Some people love chat rooms for this reason.


Rules
Every game has rules or limits on what the player can do. There are four different kinds of rules in a game that can apply to websites.


  • Semiotics is how symbols are used and interpreted. Icons are the symbols of web design. It’s important to always use icons that have a clear meaning to the user, or to back them up with text.
  • Sequence of Play is the order in which the game progresses. An eCommerce site could have a sequence of play that goes something like this: Find product > Read product description and reviews > Buy product > Go through the checkout process.
  • The Main Goal is just that, the main goal of whatever you game you’re playing or process you’re going through on a website. Sometimes users can be motivated to set their own goals.
  • The Termination Condition determines when the game is over. On an eCommerce site, this could be receiving a confirmation email about the product you just ordered. The user will not return if they haven’t had a good experience at this point.

Goals
It’s always a great feeling to accomplish a task. Achieving even a small goal can provide lots of satisfaction. Giving your website’s users goals to tackle, encouraging them to complete those goals, and rewarding them when they do is a great way to keep visitors on your site. For example, many sites have a progress bar shown throughout their sign-up process to give you an idea of how far along you are and how far you have to go.



Cooperation and Competition
Games are always more fun when you’re playing them with someone else. Social networks provide great ways to allow user to cooperate and compete with their friends. Companies like Fab give you the option to post to your Facebook when you make a purchase, because they know your friends are more likely to buy something if they see you have too. FourSquare uses social networks to let you know if one of your friends has beat you out of being mayor of your favorite coffee shop and encourages you to get your title back.



USING GAMIFICATION

That’s it for today. Come back next week and we’ll cover using these theories in your websites and applications to provide a greater user experience.


Web App User Interface Design Pt. 3

Tuesday, May 22, 2012

This is the final article in our series on designing user interfaces for web applications. To wrap up this series, we’re going to cover some of the standard screen patterns used in user interfaces. Though using standard screen patterns isn’t always the best way to go, nine times out of ten they help the user navigate the web application and digest information quickly.


These standard screen patterns are focused towards enterprise and web productivity application designs and come to us from Theresa Neil’s post “12 Standard Screen Patterns”. This will be a pretty basic article, so if you want to learn more we recommend reading Theresa Neil’s article or viewing her updated slideshow version, “RIA Screen Layouts”.


WIZARD


The wizard screen pattern is used to guide the user through a more complicated or unfamiliar process. This screen is often used for the checkout workflow on ecommerce sites or to guide users through installing a new program.


BLANK SLATE


The blank slate is the view the user will see before they have entered any data into the web application. This screen should provide a preview of the app by displaying a video tour, tutorials, help tips, or screen shots of what the app looks like in use.

FORMS


We touched on the topic of forms in our last post. To recap, you need forms for everything from signing up as a new user to entering loan information. No one likes filling in forms, so make them as quick and painless as you can.



DASHBOARD


A dashboard should provide all important information at a glance, real-time data, clear graphic representations of data, and entry points to access more detailed information. All these things help users find what they’re looking for without having to dig through lots of information.


MASTER / DETAIL


In a master/detail screen, many different items are shown in one section of the screen while details of a certain item are shown in another section. This allows the user to stay on the same page while browsing through different items. The horizontal layout is better for when the master view needs to hold more information or has different categories of items.


COLUMN BROWSE


The column browse screen is similar to the master/detail one, but with more levels of sets of information. The column browse allows users to navigate through increasingly specific levels of information while still displaying the path they took. This allows them to easily back up to a higher level.


SEARCH / RESULTS


A search screen can include anything from a simple search bar and results to a search function that allows you to specify by any number of different categories and lets you choose how the results are organized. Search screens are essential as they allow the user to navigate straight to what they’re trying to find.


FILTER DATASET


The filter dataset view allows users to categorize items through different filters. This can be used along with a search function for more specific results.


PALETTE / CANVAS


The palette/canvas screen pattern is not often used in business web applications. It is seen more often in user applications for creative programs.  The palette/canvas screen is helpful for creating designs, editing pictures, creating slideshows, and similar processes.


SPREADSHEET


A spreadsheet is best for providing an efficient way to read, edit, and enter bulk information. Common features of a spreadsheet screen include hide/show column or row, rearrange column or row, group by, undo/redo, add/insert/delete row or column, keyboard shortcuts, import, and export.


QUESTION & ANSWER


The question and answer screen allows users to enter a question or known information and receive an answer. This can be used to show the user potential solutions to their problem or suggest a single course of action.


PARALLEL PANELS

Parallel panels screen patterns can show all panels at once or collapse all but the panel the user chooses to view. These panels are great for displaying a large amount of similar information without making the user navigation between different pages.


INTERACTIVE MODEL


The interactive model features an object (like a calendar, map, graph, chart, or canvas) and allows the user to modify different aspects of it. For example, the user would be able to add events to a calendar.


TABBED


Tabs are a great way of providing easy navigation between screens of related information. These are often used in the “My Account” section of web apps.


 PORTAL


A portal is a screen pattern that shows previews of other screen views and allows the user to click through to them. Portals are often a part of the dashboard view.


BROWSE

The browse screen pattern is most often used for displaying blogs. It allows the user to scroll through information and usually has a sidebar with navigation and filtering options.


That's it for this week! Next week we'll be starting a new series on gamification in web design. See you then!

Web App User Interface Design - Pt. 2

Tuesday, May 15, 2012

Welcome back to the second part of our series on designing user interfaces for web applications. This week, we’re talking about design fundamentals and common components.

FUNDAMENTALS OF USER INTERFACE DESIGN

Keep It Consistent

There are good surprises and there are bad surprises. Navigation completely disappearing on one view of a web app is an example of a bad surprise. The color scheme of the web app changing in every view is a bad surprise. Winning the lottery is a good surprise.

A user interface should have internal consistency within the app itself and external consistency within the group of apps it is a part of. It’s a good idea to determine a set of design guidelines to maintain this consistency. For example, you could always have secondary information in a sidebar on the left side of the app or make all buttons the same shade of blue. It has been shown that users can learn how to use a consistent user interface much faster than an inconsistent one.


Efficiency is Key

This one’s a given. No one wants a user interface design that slows down the user. How do you promote efficiency?


Encourage the user to focus on a specific task. If it’s a large task, break it down into smaller goals. Provide keyboard support and shortcuts. Remember to keep shortcuts consistent with those of commonly-used applications. For example, Ctrl + C should always be copy. Allow for personalization. Personalization could include changing the order of elements, features shortcuts to most-used features, and choosing what information is displayed on the dashboard.

Help the User Out

Any user interface should give the user helpful feedback. If an error occurs, users should get a message saying so with information on how to fix it. If a user exits a page without saving, warn them and prompt them to save. Prevent them from making costly mistakes. Ask the user to confirm an important action and provide them with undo options. Provide a knowledge base or video tutorials to answer any questions users may have about navigating and using the web app.


Make it Pretty

Users are found to be more satisfied with an eye-pleasing user interface design, even if it is missing some features. Since user interfaces hold a lot of information and functionality, it is important to keep the design as simple as possible to avoid cluttering the interface. The user may spend a lot of time looking at the web app, so make it attractively designed.


Groupon allows users to view and purchase deals for different companies.

COMMON COMPONENTS OF USER INTERFACE DESIGN

Though every web app fulfills a different purpose, they all contain many of the same features. Here are some common components of user interfaces.


Web Forms

You can’t avoid web forms. You need them for everything from signing up as a new user to entering loan information. No one likes filling in forms, so make it as quick and painless as you can. Provide validation messages, like if the user’s password matches. Make entering advanced information optional.


Master and Detail Views

It is very likely that your web app will include some kind of item. They could be clients, products, services, etc. For the user’s benefit, there should be a master views with lists of these items and details views of the items with information specific to that item.


Dashboards

A dashboard is the first thing a registered user sees when logged in to the web app. It provides a view of the newest and most important information. This allows users to take action without having to dig around in the user interface to find what they need to do.


Tables

User interfaces are the one time that tables come in handy. Web apps may have large amounts of information that need to be viewed in an organized way. This is what tables were designed for.


Reports

Many businesses will need a web app that allows that to print off reports. There should be a feature for easily creating and sending or printing off those reports. Keep in mind that many businesses don’t use color in their printing and design the reports with that in mind.


Freshbooks allows you to create and send invoices, which are like reports, by email or snail mail.

NEXT WEEK

Next week we’ll be back with the last article in this series that will cover the standard screen patterns of user interface design. This goes back to that note on consistency. Users will expect certain things in a user interface and layout is one of them.