Saturday 3 March 2012

Make Your Own Website for Kids

There are a lot of excellent ways for youngsters to make dollars on the web safely and easily. Well maybe some are not so easy. I could compose pages and pages on the different strategies and the rewards of each one but for the purpose of this report I am just happy to give you a wide overview of the different methods available. This could give you some wonderful tips to make your very own site for kids. If you presently have a website:

Advertising is the most well known way to make dollars on the internet especially if you currently have a site with very good traffic. There are numerous approaches on how to go about this.

Affiliate marketing. This is whenever you offer somebody else’s merchandise on your site. If you get on website like like Clickbank and have a look there are seriously thousands of products there your kid can advertise on their site. Every single time an individual clicks on an ad they host and buys the item for sale they bring home a significant commission. There are also massive sites like amazon and eBay who will permit you to host adverts to their internet sites where yet again you will get a commission of anything at all that's sold.

More classic marketing is accomplished by way of firms like google. Every single time you go on sites and see banners and text adverts these are normally placed there by google or one of the other search engines. You will get compensated each and every time an individual clicks on any of these adverts irregardless of if they end up purchasing anything. The payouts are considerably lower than affiliate pay outs but they can ad up swiftly if you have a whole of visitors.

Another wonderful way if your kid is specially imaginative is to have them develop their very own book about one thing they are passionate about. If they know plenty of good stuff about a subject they feel likely other people would be fascinated by get them to come up with a book of 20-30 pages and offer that on their very own site. If the ebook is well received they could even place it on Clickbank by themselves and attract some other people to market their ebook on a vast array of websites! They can start off obtaining money from these guides with no need to do any extra work besides writing it!

Now if you kid does not currently have their own individual internet site but would like to get started out  earning some money on the internet there are already plenty of other great possibilities available.

Surveys:  There are a whole lot of internet sites out there that will be happy to shell out cash for you to take surveys. Payouts range drastically but some of the greater internet sites we will show you offer you $5 or sometimes higher payouts for basically doing a 10-15 minute survey! As you can see repeating this a number of times can quickly add up to a rather respectable hourly income and provide some very good pocket money

What other methods are there with no website?  Does you kid like producing videos?  These days it’s quite effortless to make video clips and add them to YouTube. Check out placing some amusing or special video clips up. If they rank effectively and get some good traffic businesses will shell out cash to makrket on them. Or an even better idea, you could set a website link on there for an affiliate offer you would like to promote.

The are just some ideas to get you thinking on what can be done. For more information visit us now at Make Your Own Website for Kids!



To make things even easier we have a step by step guide on How to Make a Website for Kids.

Sunday 28 August 2011

Seven Easy Steps to Much Faster Writing

Here's some great tips from Write to Done. Make your own website for kids faster and easier with this guide.


 
 

via Write to Done by guest on 22/08/11

Faster and faster

A guest post by Ali Luke from Aliventures.com.
If you can write fast (and well), you’re set for success.

You’ll be able to pump out blog posts, newsletter content, free ebooks and more – without killing yourself in the process. You’ll be able to meet deadlines. You can price by the project, and make a great hourly rate.

But … chances are, you’re not yet able to write as fast as you want.

Maybe it takes you two hours to complete a 500 word blog post – on a good day. Maybe you just can’t find time to get that ebook finished.

Here’s how to massively increase your writing speed, in seven easy steps.

Step #1: Find Your Best Writing Time

This is crucial. Don’t kid yourself that all hours are equal.

You need to know when you’re most productive.

For me, it’s mornings, around 8am to 11am. If I’m lucky, I’ll also get an afternoon spurt, maybe 2pm – 4pm.

For you, it could be morning, noon or night. You probably have a gut sense already of your best hours. Now, real life might be getting in the way – perhaps you have to drop the kids off at school at 8.30am, or you’ve got a day job. But you can still use your best hours at the weekends, or look for ways to shift other obligations.

If you’re not sure what your best writing time is, experiment! Try out different time slots and see what feels best.

Step #2: Minimize the Risk of Interruptions

So, you’ve got two golden hours set aside to write – 10am – 12 noon on Saturday. You sit down at the computer, ready to type.

And the phone rings. It’s a sales call.

Then your partner comes in and asks if you want to go out to lunch later.

Then a chat window pops up on your computer, from a friend you’ve not talked to in a while.

Is it any surprise that you don’t get much writing done?

Instead of snapping at your partner and moaning about sales calls, here’s what to do:

  • Turn off your mobile. Unplug the landline (or make sure that your partner/kids/roommate knows that it’s their job to answer it).
  • Tell people in your household that you’re going to write. Explain that you’ll be free to chat at 12 noon, but you’d appreciate not being interrupted before then.
  • Work in a room on your own, and close the door. If you’re sitting downstairs in the kitchen, you’re much more likely to get interrupted.
  • If you really can’t get any peace at home, grab your notepad or your laptop and head out to a coffee shop.

Step #3: Cut Out Distractions

Reducing interruptions helps a lot. But distractions are death to writing, too.

They look like this:

  • You decide that you really must tidy your desk before you start writing.
  • When you get stuck, two whole sentences into your piece, you find yourself opening up your inbox to see whether there’s anything exciting in there.
  • After writing 200 words, you tweet your word count. You then click on a link to an amusing YouTube video, and remember a blog post that you wanted to read. An hour later, you wonder where your time went.
  • Half-way through your piece, you realize that you need a particular statistic. You stop immediately and look it up. While you’re doing so, an advert for cheap laptops catches your eye, and you can’t resist checking it out.

Some distractions might seem legitimate. After all, your desk is untidy. And you do need to know that statistic.

The thing is, you don’t need to tidy your desk or look things up right away. All of that can wait for an hour or two.

There are plenty of ways to cut out distractions. You might:

  • Unplug your internet cable (or switch off your wireless).
  • Use a program like DarkRoom (PC) or WriteRoom (Mac) so that you’ve got a plain, clean, full-screen writing environment.
  • Clear away any distracting objects from the room. Do you really want to spend two hours trying to solve that Rubik’s cube?

Step #4: Write an Outline

One huge mistake is to leap into your piece without planning ahead. If you do that, you’re going to end up writing for a few paragraphs, then getting hopelessly stuck.

Outlining doesn’t need to be complex, especially if you’re writing something short (like a blog post). This post, for instance, started out as a title and seven subheadings. I spent less than five minutes on the outline – and it’s saved me a ton of head-scratching time.

When you write an outline:

  • You can spot (and fix) any obvious flaws or problems. Perhaps it becomes clear that you’re trying to tackle too much, or that your topic isn’t very well thought out.
  • Your subconscious immediately starts coming up with ideas for each point. Once you start to write, it’s a lot easier to get your thoughts down onto the page.
  • The whole project looks much more manageable. You’ve broken it down into small steps.

As you write, the outline continues to help, by keeping you motivated. You can see exactly how far you’ve come – and how far you’ve got left to go. It’s easy to keep on writing when you know you’ve only got three points left to cover.

Step #5: Set a Timer

I’ve come across a few writers who hate using timers, so – as with any advice – feel free to ditch this if it doesn’t work for you.

Having said that, I think timers are brilliant. When I know I’ve only got 20 or 30 or 45 minutes, I stay focused. I write faster. I don’t succumb to the urge to check emails – they can wait till my writing time is up.

Timers help you to write for short bursts. At the moment, I’m trying out a system where I write for 20 – 25 minutes then take a break to exercise for five minutes. It’s been great for my energy levels, and I’ve been getting more writing done in less time.

You can use your phone or an alarm clock as a timer, or use a site like Tick Tock Timer or e.ggtimer – whatever works for you.

Experiment with different timed bursts: try just five or ten minutes if you’re new to this, and gradually work up to more. While that timer is going, write. No excuses.

Step #6: Start Wherever You Want

You do not need to start off by writing the introduction or Chapter One.

In fact, it’s often a good idea not to. Instead, jump in to the middle of your piece. Write the first subsection – or the third.

That way, you’ll get moving much faster … and by the time you’ve finished the bulk of your piece, you’ll have a better sense of what needs to go in the introduction. Since you have an outline (see step #4), you won’t need to worry about getting off track or writing something that doesn’t fit in.

Conversely, if you like to start at the beginning and work through to the end, that’s fine too. There’s no “right” way to do this.

What matters is that you don’t spend twenty minutes staring at a blank screen, wondering how to begin. Just get moving!

Step #7: Don’t Edit While You Write

Hmm, I didn’t phrase that very well. And should that comma go there? Maybe I’d better split the sentence into two. Would “gigantic” be better than “huge”?

If your thoughts go something like that when you’re writing, then you need to switch off your internal editor.

Write. Then edit.

Keep repeating that to yourself until it sinks in. Because it’s really important.

When you’re writing, you’re creating something. You’re putting words onto a formerly blank page, and you’re telling a story or explaining an idea or sharing your thoughts in a coherent form.

Don’t make this even harder than it needs to be. Don’t demand instant perfection.

Once you’ve created something, then you can start to be critical about it. You can look at whether your paragraphs are in the right order, and whether you need to add more transitions. You can tweak your subheadings to make them snappier. You can reword any clunky or confusing sentences.

I’m not going to suggest that you tie yourself in knots over this. It’s fine to hit the “delete” key occasionally, if you type something wrong. It’s okay to change your mind and restart a sentence if you need to.

Just make sure that most of the time, you’re making forward progress. And don’t stop half way through to edit paragraph one – that can wait until the end.

If you follow all the steps here, you could double or even triple your current writing speed. So give them a try – and let us know how you get on! The comments are open…

Ali Luke is a writer and writing coach. She’s got a free mini-ebook, How to Find Time For Your Writing, with ten short chapters and ten exercises to help you get your writing done – however busy you are. Find out more – and get your copy – here.


 
 

Wednesday 27 July 2011

What Web Designers Can Learn From Video Games

Very interesting article from smashing magazine. If you plan to make your own website for kids why not take some hints from video games...


 
 

via Smashing Magazine Feed by Anne Sallee Miles on 27/07/11

Advertisement in What Web Designers Can Learn From Video Games
 in What Web Designers Can Learn From Video Games  in What Web Designers Can Learn From Video Games  in What Web Designers Can Learn From Video Games

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games?

Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail.

Prince-of-persia in What Web Designers Can Learn From Video Games
Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games.

In the same way, website users want their content delivered to them in a way that is easy to understand, intuitive and engaging and that doesn’t require a lot of scrolling or clicking. In fact, Web designers can learn a lot from video game interfaces. Websites that use common game interface tools can streamline the user experience while adding a lot of personality. This can result in higher traffic and a higher rate of repeat visits — and sales… Cha-ching!

It’s no surprise, then, that we’ve seen an influx of carousels, lightboxes, accordions and increasingly sophisticated navigation patterns, as CSS and JavaScript libraries have put such tools within reach of Web browsers. Whether it’s a good or a bad thing, is a topic for another article, and this article will focus on the techniques rather than their wrong applications.

What a Web designer can learn from video games isn’t limited to the user interface. Yahoo Answers works because of the psychology of the achievement system that is built in. So, while we will look at some basic user interface ideas and patterns, other higher-level concepts would be useful, too, and worth exploring.

Remember The Big Picture

In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals. Obviously, a website will often, though not always, have a goal that is very different from that of a video game. On many websites, efficiency needs to be a higher priority than entertainment. A cool fish-eye interface is not the most practical idea for a website dedicated to delivering tax information quickly or for an e-commerce website. However, an interactive social media channel might benefit from a leaderboard or some type of achievement system. Choose your UI components to fit the project.

Looking at the big picture, also consider structure and method — not just UI components. For example, look at how menus are structured, and consider why those choices were made. In many games, you have a hub-and-spoke type architecture, leading to different sets of tools within the menus. If you choose “Weapons,” then all of the options for weapons open on the next screen. You have to navigate back to the top screen in order to choose “Maps.” This structure simplifies a set of options that would otherwise quickly become confusing or overwhelming by providing focused attention on one choice at a time.

Can you see how this type of architecture could benefit a website that presents a large amount of information to the visitor? By allowing the visitor to focus on one piece of a large online task or one nugget of information at a time, you potentially increase the conversion rate for your client. This structure could also be effective when you are crafting a sales funnel on a website. The example below shows a simple game menu structure that could easily be applied to the information architecture of a website, building paths for visitors to follow.

Theball Menustructure in What Web Designers Can Learn From Video Games

If you were building a website for a CPA firm, you might segment its menu information under headings relevant to the type of visitor. A high-wealth individual has very different needs than a small business, but both might be interested in hiring the same firm. You could start at the top level, with two simple entry points serving as a funnel, one for individuals and families and the other for businesses and organizations, each button leading to the hub for that user. This hub page could provide content, offer pertinent tools and advertise relevant services for these very different users, thus simplifying their experience.

Hub-and-spoke-funnel in What Web Designers Can Learn From Video Games

Also, notice places where video games show instead of tell, and try to understand how they do that. Successful games are particularly adept at showing during training sessions, in what are often referred to as “noob caves.” A character has to pass through elementary rooms or levels, where they are taught to accomplish basic tasks in a way that is entertaining and integrated with the story. An adventurer learns to pick up a sword and swing it, then kills a rat, then learns how to pick up treasure. The user is taught to use the interface through immersive experience.

Oblivion Start11 in What Web Designers Can Learn From Video Games
In The Elder Scrolls IV: Oblivion, you start out in prison and must escape through an underground cave, fighting rats and the occasional small goblin along the way to learn the basic controls of the game.

Why is this relevant? You probably won’t have to make a full interactive tutorial for a complicated interface, but chances are your client’s content will be more clearly received and more quickly understood through intelligent graphics or charts. You could take big concepts and break them down into bite-sized chunks. You could look for potential points of confusion and clarify with tooltips or examples rather than long explanations. By studying how games show instead of tell, you could get a breakthrough on a thorny presentation problem.

Engagement Doesn’t Have to Be Glitzy

Game design wizard Jesse Schell says, “Games offer the possibility of success, the opportunity to satisfy your curiosity, the chance to do some problem-solving and make clear choices, giving a feeling of freedom.” Even the most mundane of websites could be made more engaging by asking the question, What elements of games do people find pleasurable?

Games provide clear feedback, often at the instant of user input. These elements could be incorporated into interfaces, and not only through carousels or accordions. Asking something as simple as “Would you like to learn more about this topic?” upon confirming the submission of a form can go a long way to increasing user interaction.

Some Web designers already implement some of these common UI components at a simple level. Certainly hover menus and tooltips are not new. Seeing how these are implemented in a game can spark ideas on how to implement ordinary UI elements in a more creative and interesting way.

Examples, Please

Let’s dive in and look at some UI elements that can add zing to your next project. We’ll look at some examples and then a few resources where you can learn more.

AJAX Messages With Loader Image

Falloutnv-load1 in What Web Designers Can Learn From Video Games

Falloutload1 in What Web Designers Can Learn From Video Games

These loading screens from Fallout: New Vegas (top) and Fallout 3 (bottom) have helpful information and tips, along with a background image that expands on the theme of the game. Instead of a spinning loader image, the user sees a roulette wheel or green-screen target that transforms a boring wait into a fun part of the game experience.

What a Web designer can take from this:

Customize your graphics. Use them to pull the user into the “world” that you’re creating on screen. Even if you are working on a corporate website, you can load tips and helpful bits of information. Building a retail sports website? Perhaps you could use a spinning basketball for your loading graphic on a slideshow. Not sure how to get started? Check out this tutorial to learn how to preload content.

A full-page background image for a loading screen might be too slow, but you could add a colored background to the loading panel div, and then use JavaScript plug-ins to load random tips and information to fill the space. For best results, keep the loader files below 30 KB; the smaller the better. A simple AJAX call can grab tips every so many seconds, or you can simply post one for each load. The choice depends on how much content you need to load and how much time you have. For an example of this kind of loader, check out the Website Grader at HubSpot. After submitting a link, check out the loader that comes up as you wait for the result.

Hubspot in What Web Designers Can Learn From Video Games

Custom Cursors

Immersive in What Web Designers Can Learn From Video Games
In Fable 3, the place being chosen by the user is indicated by a magnifying glass, which acts as a custom cursor.

Steal in What Web Designers Can Learn From Video Games
In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates an object that the player can pick up. A red hand indicates that the item is being stolen and that soldiers might pursue.

What a Web designer can take from this:

Probably the most recognizable custom cursor is the “grabby hand” Google Maps. But custom cursors are nothing new and are common in Web applications. The capability is built into most browsers.

It’s important to use these cursors sparingly: when offering help, to indicate clickable content, and to highlight important information. Does a particular piece of information absolutely need to be seen by visitors? Try this demo of a custom cursor (pictured below). Do you see how it could be used to grab attention and highlight important points? Imagine what a well-executed JavaScript magic wand could do on a children’s website to capture attention! Obviously, it wouldn’t be a good fit for a corporate website, though.

Cursor in What Web Designers Can Learn From Video Games

Icons, Icons, Icons

ReadHUD in What Web Designers Can Learn From Video Games

Screenshot-frontpage in What Web Designers Can Learn From Video Games

One big difference between video games and websites is that icons are used much more in complex game menus than in website navigation, and rightly so. A user typically spends much more time in a game than on a website. But icons are still used on websites, and increasingly so as the line between websites and Web applications blur.

So, how are icons used effectively in game navigation? They must be readable and fit the context. In the example above from Halo Reach, the user relies on icons to navigate and choose weapons, but the menus resemble a “heads-up display” (HUD) that we might see in a vehicle in the real world. In Oblivion, icons are presented on “scrolls.” Website icons should likewise be easy to understand. Add text labels for optimum usability.

Icons can greatly accelerate navigation through complex menus if the icons are carefully chosen and consistent and if users spend a lot of time on the website. Use solid-color, high-contrast outlines of easily recognizable shapes that are simple and quickly readable.

Games are moving away from small, highly detailed images to more sophisticated outlines (in smaller files), such as those found in Halo Reach and the Call of Duty series, and larger detailed images with distinctive shapes, such as the ones below. Even if you don’t notice the details, you will recognize the hand, circle and face outlines. Using the same color makes them less visually complicated and easier to decipher. The more icons that are used, the simpler and more quickly readable they should be.

Bar-videogames in What Web Designers Can Learn From Video Games

You can also use icons as visual cues to focus attention on key topics. Use “header” graphics instead of buttons as quick prompts in content boxes and repeating topics to reinforce concepts. Make complex images bigger, and be consistent. Use icons to add interest to lists, and break up content into digestible pieces and to draw attention to important sections of text, as Treemo does so well. Consider using relevant icons for navigation and topical groupings. You could use consistent shapes as headings within the text or as pull quotes to indicate that certain content is related. Use icons to make content easy to scan, highlighting points of interest, so that users can quickly find pertinent information.

Icons don’t have to be static illustrations. The screenshots on Pattern Tap serve as traditional thumbnails, but their distinctive shape also functions as an icon, increasing interest and reinforcing the brand:

Pattern-tap-screenshot in What Web Designers Can Learn From Video Games

What about using your client’s own products as icons? The clever sub-menu on DonQ, shown below, uses the products themselves as icons, quickly and easily directing you to the one you’re interested in. Even more clever is the way that the rest of the content dims when the sub-menu appears, making your options stand out.

Icon-submenu in What Web Designers Can Learn From Video Games

Full-Page Carousels

Tabbed screens that fade out, such as this one from Dragon Age, Origins, have been around for a long time:

Da-origins in What Web Designers Can Learn From Video Games

In the “Carnage Report” in Halo Reach, below, this idea is taken to a new level. The screens scroll horizontally, and each page has multiple tabs. Gamers are used to this type of interface. But take it to the Web, and people will be surprised.

Carnage-report in What Web Designers Can Learn From Video Games

You have to interact with this type of interface to do it justice.

Jax Vineyards uses a similar type of layout, without tabs:

Jax-screenshot in What Web Designers Can Learn From Video Games

Add tabs to each carousel screen, and you would take this website to the next level.

Magento offers another, simpler take on this idea:

Magento2 in What Web Designers Can Learn From Video Games

Right now we see this type of interface in mobile and tablet UIs in which there are multiple background images. We also see it in games of all types. This is more than tabs within tabs or simple horizontal scrolling: think iPad with multiple desktops. Think for a Living offers a (very game-like!) map in the top-right corner to help users navigate its unusual carousel.

What a Web designer can take from this:

If you have a lot of content, then this bold solution can be user-friendly and can increase engagement. Remember the good old on-page anchor tag with a target? This is the same concept in new clothing. Your screens slide in and are easily navigable with a touch screen, which is a factor that will only increase in importance.

Because of the various screen sizes, this type of layout requires careful planning and might call for CSS3 media queries to ensure that the content loads as intended on different screen sizes. You will need to make your layouts responsive. You can implement a full-screen carousel by using a page-sized div, with the overflow set to hidden, and placing the screens in an unordered list with a set width.

Users will become increasingly familiar and comfortable with this type of interface as they adopt tablets. Implementing an even simpler horizontal scroll can make your client stand out from the crowd.

Slider Menus

Fable-scroll2rev in What Web Designers Can Learn From Video Games

Fable-scroll3rev1 in What Web Designers Can Learn From Video Games

Fable 3 is out, and its immersive menu system is completely different from the one in Fable 2, pictured above. But Fable 2 has such a beautiful slider menu that we had to include it.

Scrolling with the slider reveals buttons, and content is presented on the right half of the screen. The buttons also have dropdowns under them. Inactive content dims. Pictured above is the top category of “Clothing.” Then the content drills down to “Coats,” then to specific clothing items. Does this remind you of e-commerce?

What a Web designer can take from this:

Have you ever been on a website that had huge fly-out menus that covered the page? And as you hovered over items, they expanded into sub-menus… four levels deep! Such complicated menus can be intimidating and make the person want to leave. Making the menu small, easy on the eyes and quickly scrollable is a great way to overcome bloat and keep visitors from clicking away.

There are already some slider scripts that provide custom scroll bars for any div container. Why not put buttons in the div? There may be certain settings (like entertainment or fashion websites) where this type of menu is more usable and scalable than your average dropdown or fly-out menu. Add an AJAX loader for your onClick event, and you have an engaging interface that users can easily decipher. The goal is to keep users on one screen while keeping the menus scalable. You could add literally as many items under each menu as you need without making them unwieldy.

Pivot Screens

I must admit, my heart skipped a beat the first time I saw the pivot screens on Halo Reach. When you get to the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of menu screens. This is a visual cue. What happens when you push the controller to the right? The screen jumps and scrolls horizontally, blurring, to give you the next screen, which uses perspective as well, this time skewing all of the text and images to the left. Under a tab, your character is animated, barely moving and eerily life-like. Bravo. I sat and played with the pivots for a while. Of course, my first reaction was, I want to do that.

What a Web designer can take from this:

With a little Photoshop, you can emulate this menu. By using a large panoramic background image that covers two screens’ width with skewed CSS3 typography, and a fast horizontal scroll in JavaScript, you could get something close to the tilt found in this game.

Apply this to a smaller pane, and use it on a banner or button that is completely animated in two frames, and you’ll get a wow (so will your client). I haven’t seen anyone using this method on the Web yet, but I did work up a little demo to give you a starting point should you want to implement this yourself.

Pivot-example in What Web Designers Can Learn From Video Games

Also, notice the way that Halo Reach integrates mundane menu screens into the world of the game with the clever illusion of a landscape in the distance. It’s a beautiful thing. It gives a sense of depth and approach, like when you look at a city from a plane before landing. It builds excitement and entices you to go deeper, to interact and be part of the action. This type of integration does not lend itself to all website experiences, but it does to some; and when appropriate, it is worth doing. Never underestimate the power of delight.

Context Menus

Radial-menu-a-creed in What Web Designers Can Learn From Video Games

The context menu in a video game is the kissing cousin of a website sub-menu. Context menus like the one above from Assassin’s Creed: Brotherhood give the user specific options depending on their location in the game and their choice of actions. If you choose to cast a spell, then the sub-menu offers you a fireball or lightning blast. If you choose to move, then you can run, climb or hide, all from the radial menu. Radial menus with icons are very popular, but context menus could just as easily be short vertical lists of text.

What a Web designer can take from this:

When you invite a user to take a specific action, a context menu can enhance the experience. Instead of providing lists of links, you could offer a fun array of specific actions to take. We see this used now in Web applications and in small social media sharing widgets.

When making a context menu, you might at least consider making it radial. Radial menus should give users a choice of three to eight options, and the interface can add visual interest. Keep the menus as simple and clear as possible. They should offer relevant choices to the user at the point of decision and increase conversion rates. They should also be easy to click and visually lightweight.

For a fun example of a radial context menu, check out TuneGlue’s musicmap:

Radial-tuneglue in What Web Designers Can Learn From Video Games

While this was done in Flash, you could build a simple radial menu with JavaScript. Or you could get more complex, with nested radial menus, like so:

Nested-rad-menu in What Web Designers Can Learn From Video Games

Radial menus aren’t limited to context menus. Pop-up panel menus at a point of action can be equally effective and may not take as much time or testing to develop.

Context-panel-menu in What Web Designers Can Learn From Video Games

Your Turn

Many other examples of great interface ideas can be gleaned from studying video games. Games offer design inspiration that can help you reward and gratify users and make your interfaces more intuitive and fun.

Are you building a website for a non-profit that is planning a donation drive? Consider using leaderboards to track donations. You could use leaderboards to give a shout out to the top 10 readers on your blog, giving them greater incentive to comment.

Study how icons are used, and think of ways to implement them that will make your website more user-friendly and enjoyable. Make interesting tooltips, or consider ways to add downloadable content (“DLC” for all you gamers out there) as a reward or incentive. By observing and implementing creatively, your websites will become more engaging and easier to use. And let’s not forget that doing the research is really fun!

Further Resources

(al)


© Anne Sallee Miles for Smashing Magazine, 2011.


 
 

Sunday 17 July 2011

It never hurts to have good grammar to make grandma happy

An interesting article from problogger. It may be a little old school but it can't hurt to brush up on the basics and make your own website for kids look professional.


 
 

via ProBlogger Blog Tips by Guest Blogger on 17/07/11

This guest post is by Aman Basanti of Ageofmarketing.com.

Meet Ailsa Campbell. Ailsa is a great grandmother of an editor (pun intended): she’s been teaching English longer than many of us have been alive. Needless to say she knows a thing or two about writing well.

Here are Ailsa’s top tips for becoming a better writer.

1. Get your homophones right

“Homophone” sounds like an alien word, but you use homophones every day, and often incorrectly.

Homophones are words that sound the same (homo—same, phone—speech sound) but have different meanings. Here are some common homophones that bloggers get wrong.

  • compliment—to praise (e.g. when you tell your partner that he or she looks great)
  • complement—to balance, set off or add to (red wine complements Italian food)
  • right—correct
  • right—the opposite of left
  • rite—ritual or ceremony
  • write—putting pen to paper
  • effect—(noun) end result or consequence (the breakup of the marriage had the effect of driving him to drink)
  • affect—(noun) impact (the affect the drought had on the local farmers was unfathomable)
  • descent—plunge, fall or ancestry (humans trace their descent from apes)
  • dissent—disagreement, opposition or dispute (some people express their dissent to the idea that humans descended from apes … and are quite right—humans and apes are descended from a common ancestor)
  • dependent—reliant on (the answer to the second question was highly dependent on the answer to the first)
  • dependant—a person who depends on others (the poor guy has 13 dependants). Note that this term is mainly used in British English; American English accepts “dependent” for both spellings.

Ensure that you are using the right homophone.

2. Know when to use a “c” and when to use an “s”

Is it practice or a practise? Is it advice or advise? Is it licence or license?

Answer: “c” is for nouns and “s” is for verbs. Remember “c” for “ice” and “s” for “see”.

When you play tennis, you practise your swing. When you run a social media business, you run a social media practice. Again, this is mainly a British English differentiation. In the US, it’s standard to use to use the “c” spelling in both cases.

When you guide someone to do something, you are advising them. When you receive instructions from your client, you receive advice.

Licence is permission to do something. Giving that permission to someone is licensing them to do it. Although in America, both usages use the “s” spelling, license.

Use “c” for naming words and “s” for doing words.

3. Understand terse phrases

Terse phrases are short punchy sentences to give your writing a sense of urgency. For example:

Favreau was blown away. How did this guy pull off such a feat? Was there anything this man couldn’t do?

“Using them in groups of three,” explains Ailsa, “as in the example above, gives a great sense of build–up.

“If you listen to Barack Obama, who is one of the greatest orators of the day, you will notice he often uses groups of three. This is not chance. He has studied it and worked at it.

“The use of three terse phrases was an oratorical trick taught by the Ancient Greeks, to capture the audience’s attention and reinforce a point without making it tedious. Apply it to writing too.”

4. Know how to use contractions to bring your writing to life

In the publishing world, using informal abbreviations and contractions (weren’t, aren’t, can’t, etc.) signifies a very informal type of writing. Contractions are not acceptable in, for example, a serious article about current affairs. They sound sloppy.

Even in less formal writing, they are better avoided unless you are very specifically wanting to sound “chatty.”

Where contractions are useful, however, is in quotes and dialogue or when you are giving someone’s thoughts. The use of contractions in dialogue allows the character’s voice to come through, which is a great way to bring your writing to life.

Consider the sentence, “They couldn’t put a finger on it but there was something about Mike.” The shortened form is very good here, because you are giving their thoughts—less formal language is right.

5. Do not put an “a” in front of numeric values

Do not say, “a 127 people chose option b,” or that “the suit cost a $100.” Just say, “127 people chose option b,” or “the suit cost $100.”

Also be mindful when writing monetary values. Do not write “$100 dollars,” just keep it to “$100.” You have already said “dollars” by using the sign $.

6. Know how to use apostrophes

What is wrong with the sentences below?

  • He was selling chocolates to the participant’s.
  • The Lindt’s were a better choice.
  • Vast majority of Australian residents already had HD TV’s and little content to view on them.
  • They were a well-known group in the 1960’s.

Answer: The apostrophe is incorrectly used in place of a plural. It should be participants, Lindts, TVs, and 1960s.

There are two uses for the apostrophe—in shortened forms, indicating a verb (it’s, couldn’t) and in possessives (Age of Marketing is Basanti’s brainchild).

What should we do when a possessive is also a plural?

The participants’ job was to choose between two options.

Here the participant is a plural and a possessive, so you place the apostrophe after the “s.” If the participant was singular, you would place it before the “s.”

Of all the mistakes, this one seems by far the most important to Ailsa, as is evidenced by her comment, “Dammit—if you don’t stop using apostrophes when you mean plurals, I shall murder you.” In her defense, I did get that wrong a lot.

Conclusion

It is these minor distinctions that, as Ailsa likes to say, “separate the sheep from the goats.” Get them right and your writing will be more fluent and engaging. Get them wrong and you will look silly, sloppy, and uneducated—not how you want your readers to see you.

Do you make any of these common mistakes in your writing?

Aman Basanti writes about the psychology of buying and teaches you how you can use the principles of consumer psychology to boost your sales. Visit www.Ageofmarketing.com/free-ebook to get his new ebook—Marketing to the Pre-Historic Mind: How the Hot New Science of Behavioural Economics Can Help You Boost Your Sales—for FREE.

Originally at: Blog Tips at ProBlogger
Yellow_Chair_468x60.gif

6 Killer Writing Tips from a Great-Grandmother of a Copy Editor


 
 

Thursday 14 July 2011

Great video about website motivation

It may be a bit more grown up orientated but there are some great tips here for motivation to make your own website for kids

Even though the Internet has evolved drastically over the years, there’s one constant motivator that has kept me going.

As discussed in the video below, I discovered a deep passion for doing something I have been unconsciously doing since I was a child.

What’s the motivation behind your website?  What keeps you going even when the traffic or money is not what you’d like it to be?

Full article here

Sunday 10 July 2011

Best Practices For Designing Websites For Kids

Very interesting article about web design practices that appeal to kids from smashing magazine. If you are going to make your own website for kids it is well worth a look.





 

 

via Smashing Magazine Feed by David Morrison on 7/6/11

Advertisement in Best Practices For Designing Websites For Kids
 in Best Practices For Designing Websites For Kids  in Best Practices For Designing Websites For Kids  in Best Practices For Designing Websites For Kids

Designing websites and related media for kids presents plenty of opportunities for Web designers. Openings are available at many businesses and schools, as well as through parents and kids themselves, giving designers many ways to find work on electronic and print projects that appeal to kids. The types of work range from interface designs for video games to websites for birthday parties.

There was a time when kids’ websites were brash and busy, packed with colors and cartoon typography. Fortunately, the scale of the children’s market across most product ranges has resulted in rapid innovation in recent years. Most websites aimed at children (or children and adults) now follow principles that take some account of kids’ perspectives on Web design.

Dna-kids-homepage in Best Practices For Designing Websites For Kids

Both young kids and teenagers appear to like many of the same design traits that adults like, including clarity and high-quality content. At the same time, kids seem to enjoy a wider range of interactive features and greater novelty. This article explores child- and teen-friendly Web design guidelines and looks at the steps designers should consider before getting involved in work that will be marketed to kids and their parents or caregivers.

Hopefully, Web designers will be able to use these guidelines to attract more business from clients who deliver Web services to children, by demonstrating an awareness of the needs of this special age group.

Show Respect

Children become sophisticated consumers from a surprisingly early age. They are sensitive to age-targeting and bias in website design, so it’s important not to talk down to them.

A designer’s best defence against patronizing youngsters is to get some kids to comment on the design in the planning stage, because there’s a difference between remembering what it was like to be a kid and being a kid. This distinction operates on a number of levels in a design, ranging from the stylistic preferences discussed on Jacob Nielson’s usability website to the emerging behaviors brought on by widespread generational changes to Internet use.

Lego’s shopping website shows considerable respect for kids and parents alike. Products are arranged in clear categories, the overall styling is clean and consistent, and visitors can zoom in on products to see exactly what they will be buying. Kids can browse and navigate freely, while focusing on the product rather than being distracted by intrusive advertising and gimmicks. When they find the product they want, the child can easily draw their parent’s attention to the splendid item they’re about to pay for.

Lego-world in Best Practices For Designing Websites For Kids

Stick To Plain Talk

Research-based guidelines by Usability.gov state that adults like plain speaking as much as kids. Consequently, there is little to be gained from excluding kids from any website by making the language, layout, navigation or typography any more complex than is necessary. At the most basic level, over-elaborate language and dense text risk turning a website into a picture gallery, because the text, the wider message and the sale are lost when a child disengages from most of the content. The approach is simply not necessary because more able or sophisticated readers are happy to read concise language and seek further details as required.

Mr. Men is a website aimed at pre-schoolers and their parents. The straightforward design, with its white space, bright colors, concise text and blocky buttons, draws visitors in. The big buttons filter visitors to age-relevant sections of the website. The website features images of all of the characters, activities for pre-schoolers and shopping options. The shopping is outsourced to stores such as Amazon; as a result, Amazon gets most of the cash, but the owner needs to do very little to maintain the website.

Little-miss-sunshine22 in Best Practices For Designing Websites For Kids
The Mr. Men design may not be flashy or highly interactive, but it stays on task and bridges the gap between two generations very effectively.

Gain Trust

Parents and children look for safe, reputable, secure websites where content is actively moderated and support is on hand. Parents in particular will appreciate a certain amount of hand-holding in the form of accessible tutorials and walkthroughs. One of the most successful websites in recent years to build trust also happens to be one of the most controversial.

The various Sims games and websites (such as the Sims 3 website displayed below) cover a wide range of teenage and adult themes. The characters of players can get blind drunk, stay up all night, have kids way too early and do a good deal more. Electronic Arts gets around parental concerns by using its website to convince parents to trust the company. It does so with a well-rounded and integrated set of support services. The clear interface, familiar features from the games, forums, contact details, concise documentation and abundance of video tutorials all contribute to portraying the games as safe, consequence-free sandbox worlds. From there, it’s not a stretch for many parents to think that letting their kids look after a couple of virtual toddlers is not such a bad idea.

Sims3-homepage in Best Practices For Designing Websites For Kids

One critical part of the hand-holding process for any website is the sign-up process, which Debra Gelman discusses in detail over on A List Apart. The article is recommended reading, because sign-ups are critical to the success of most websites and should be trustworthy and convenient to use.

Web designers might also wish to read through the Byron Report, which investigates the concerns of UK adults regarding children’s websites. The report’s attention on the opinions of adults seems worthy, given that they are the ones completing sales and paying for purchases.

Interact

According to Jacob Nielsen’s research on teenagers, interactive website features (such as forums, mini-games, polls, ranking systems, competitions and 3-D interfaces) are valued by kids if they build a sense of community and foster participation. Bolting such features on will not likely prove effective, because kids will soon see the gaps and re-evaluate the website, despite any initial interest.

Stardoll integrates a range of interactive features and community support very well, offering a glitzy, glamorous look at fashion for tween and teenage girls. Any number of other websites allow you to dress up avatars and chat about your creations online with friends; Stardoll stands out by offering plenty of options for styling avatars and for its friendly and well-integrated community. The interactive community gives it a leg up on websites that offer only interactivity or only a static community.

Stardoll-homepage in Best Practices For Designing Websites For Kids

A recent report (PDF) from PlayScience proposes that the blend of interactive content and community features found on websites such as Stardoll is particularly effective on websites aimed at girls. The research depicts boys as being more focused on games, while girls switch between many different social and interactive activities.

Reward Loyalty

Kids consider their virtual goods and reputation as meaningful possessions, which is the reason they spend money on advancements, awards, objects and other persistent virtual items. With global sales of virtual goods already running at $7 billion annually, many online businesses would likely benefit from design features that attract and retain customers and that promote repeat purchases.

At present there tends to be a divide between website-specific award and ranking schemes on the one hand and aggregated personal content on social networks on the other. A kid’s badges, high scores, avatars and items are generally specific to a website, while their photos, chats, links and music live on a social networking platform.

Websites looking to capture that all-important loyalty that leads to subscriptions and sales of virtual goods might want to take account of how to build and sustain loyalty. If the economics of the website call for a proprietary approach, then beefing up the internal model is probably necessary. If fuller integration is commercially viable, then standalone systems like CubePoints demonstrate the type of coherent schemes that could be put in place. For example, even a standard WordPress subscription website can bring together a reward scheme and social networking functionality with the quick addition of a
CubePoints plug-in and a forum plug-in.

Cubepoints-homepage in Best Practices For Designing Websites For Kids

Offer Choice

There are many ways to present kids with choices through thoughtful design. Just a few options are consultative polls, competitions, push-button style makeovers and a lot of custom avatars. Typically, these basic elements should gel with the overall style and, particularly, with any other interactivity on the website.

In addition, Web designers might consider it a priority to offer their own in-house or site-specific choices. Opening up choice in this way involves looking at users’ workflow and the motivations underlying their use of the website. The following are a few ways to create more choice:

  • Allowing visitors to adjust the pace and frequency of interaction,
  • Offering flexible or open-ended environments,
  • Varying the range of activities offered,
  • Helping visitors construct and extend their own goals,
  • Offering multiple levels of hand-holding,
  • Enabling the construction and deconstruction of sections of the user’s experience.

Among such options, the greatest choice comes with co-design, where kids go beyond decorating avatars and completing polls and start to independently shape their own gameplay.

FreeRealms is perhaps the most effective co-design website around now. Players learn the interface, play mini-games, advance through levels and collect possessions. Then, quite suddenly, they are running wizard schools, setting up modest online ventures and investing in real estate. This happens without any instruction or guidance from the game, but rather from within the safety of a moderated and fully logged Web environment. For all intents and purposes, the website operates much like Second Life, without the live ammunition.

Freerealms-homepage in Best Practices For Designing Websites For Kids

Aim For High Impact

For some, high-impact Web design equates with 3-D graphics and both feet jammed on the accelerator. This presents a problem, because few things will make the user’s progress through a website go slower than lavish 3-D content. Certain types of gaming websites are suited to in-your-face 3-D experiences, but there are a lot of ways to achieve high impact.

Comic websites (such as those by Marvel and DC Comics) are particularly good at using existing content to bolster subscription services, mainly by recycling characters and artwork from their extensive libraries. Visitors have pretty much instant access to many high-impact static images and the means to build their own mini-comics and heroic characters in 2-D. There’s no need for much 3-D in these circumstances, because the websites are mainly about enjoying the comic book format. Video games and movies linked to recognized comic brands are already licensed to alternative distribution channels.

Marvel-homepage in Best Practices For Designing Websites For Kids

Be Child-Centered

Education Arcade’s report (PDF) discusses attempts to combine video game entertainment and education (or “edutainment”) several years ago. These efforts show the dangers of passing off learning activities as fun by sugar-coating them with mini-games. Some game websites, including Sony’s FreeRealms, have succeeded in offering independent learning within a decidedly gaming world. For now, delivering formal learning through genuinely entertaining websites remains a relatively expensive proposition.

However, Sims 3 and Free Realms are examples of highly flexible but not hugely expensive resources that support a wide range of curriculum priorities. For those who need more convincing, the relatively new start-up MangaHigh is an encouraging effort to combine purposeful number-crunching alongside genuinely entertaining design and gameplay.

The dividing line can be uncertain and contextual, but as soon as kids sense that an activity or interaction prioritizes a lesson ahead of engagement and motivation, they seem to switch off.

Mangahigh-homepage in Best Practices For Designing Websites For Kids

Conclusions

Ordinarily, now would be the time to highlight a couple of points as key considerations. But it might be more helpful to draw attention to a particular approach that hasn’t been covered yet but that stands out from the rest.

Kids enjoy novelty, and adults go to a lot of trouble to organize parties and outings that give kids new ideas and novel experiences. Ideally, a website aimed at kids does the same. Ask yourself what you could offer that would fit seamlessly in their existing Web experience and that would enable them to do something they haven’t done before.

If you want to do that, you’ll need to suppress the urge to start on screen and spend a bit more time in the planning stage. The reward is a much tighter fit between your design and the kids you’re designing for.

Case Studies And Tutorials

The websites identified above as examples of good design share a number of characteristics, including a strong visual style, plenty of color and a focus on clarity. Cartoons are perhaps the most popular style right now, but designers have a lot of options. A look at the Periodic Table of Visualization Methods would help most teams. The right side of the table is the place to pick up ideas on designing for kids.

Periodic-table in Best Practices For Designing Websites For Kids

Archives and Museum Informatics reviews the design process for the Tate Gallery’s online resources for kids aged 6 to 12. The case study, titled “Doing It for the Kids: Tate Online on Engaging, Entertaining and (Stealthily) Educating Six to 12-Year-Olds,” offers a step-by-step approach to meeting the design requirements of a large organization. Cartoons and comics are not the only option, but they have a visual language that many kids appreciate. Scott McCloud’s Understanding Comics has been around for a while, and it is an invaluable guide to designing comic art or in a comic style in any media.

Understanding-comics in Best Practices For Designing Websites For Kids

Participants in the 2011 SxSW Interactive festival visualized the entire conference using infographics. Their efforts led to the remarkable display of sketches, charts and diagrams on display at Ogilvy Notes. One of the visualizations is all about Web design for kids and well worth a visit. The chart provides a good starting point for thinking about what factors to take into account when mapping out a website for kids.

Oglivy-screenshot in Best Practices For Designing Websites For Kids

Web designers with strong graphic design skills have a valuable weapon in their arsenal. Those without affordable access to such skills could be at a disadvantage, but it’s surprising how much can be achieved with a digital camera and some cheap software. For example, Comic Life is inexpensive and able to apply a wide range of comic layouts and styles, yielding some fairly credible results in PDF format.

Plasq-homepage in Best Practices For Designing Websites For Kids

Further Resources

Related Posts

You might be interested in the following related posts as well:

(al) (il) (vf)


© David Morrison for Smashing Magazine, 2011.