Skip navigation
Help

desktop software

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

punk2176 writes "Hacker and security researcher Alejandro Caceres (developer of the PunkSPIDER project) and 3D UI developer Teal Rogers unveiled a new free and open source tool at DEF CON 21 that could change the way that users view the web and its vulnerabilities. The project is a visualization system that combines the principles of offensive security, 3D data visualization, and 'big data' to allow users to understand the complex interconnections between websites. Using a highly distributed HBase back-end and a Hadoop-based vulnerability scanner and web crawler the project is meant to improve the average user's understanding of the unseen and potentially vulnerable underbelly of web applications that they own or use. The makers are calling this new method of visualization web 3.0. A free demo can be found here, where users can play with and navigate an early version of the tool via a web interface. More details can be found here and interested users can opt-in to the mailing list and eventually the closed beta here."

0
Your rating: None

After months of anticipation, Windows 8 is here. It launches today and goes on sale globally tomorrow. For the last year and a half, we've tracked its progress across three betas and the final release, exploring the ins and outs of Microsoft's most ambitious product launch in two decades.

Over the next few days we'll be publishing a barrage of Windows 8 coverage. Today we'll have the main review, which concentrates on Windows 8's radical new user interface and asks if Microsoft has at last managed to realize its dream of a true tablet PC. We're covering the installation and upgrade experience in a separate feature. On tap is a screenshot tour that shows off Redmond's shiny new look and feel, and we'll also look at benchmarks to make sure the OS still runs as well as it should.

In the coming days, we'll be peeking under the hood in an investigation into the work Microsoft has done to make Windows 8 more secure, more efficient, and more flexible. We'll couple that with an extended look at Storage Spaces, the software giant's solution for managing all your disk space needs. We'll also be looking at the all-new Xbox-branded multimedia experience.

Read 126 remaining paragraphs | Comments

0
Your rating: None

  

Android is an attractive platform for developers, but not all designers share our enthusiasm. Making an app look and feel great across hundreds of devices with different combinations of screen size, pixel density and aspect ratio is no mean feat. Android’s diversity provides plenty of challenges, but creating apps that run on an entire ecosystem of devices is rewarding too.

Android devices in various sizes.
There are hundreds of Android devices with different screen sizes and resolutions. (Image credit: Android Design. Used under Creative Commons license.)

At Novoda, we build Android software for brands, start-ups and device manufacturers. We often work with visual designers who are new to Android. The new Android Design site is the first resource we recommend. You should definitely check it out. However, there is plenty more to pick up! The goal is to create apps that people love to use. Thoughtful UX and aesthetically pleasing visual designs help us get there.

This article provides a set of practical tips and design considerations for creating Android apps. I’ve tried to include something useful whether you’re crafting pixel-perfect graphic assets, finding an optimal user flow or getting your hands dirty developing XML layouts.

Pixels

Visual design is hugely important in the perceived quality of an app. It might even improve usability. Most developers have some exposure to UI patterns, but developers with visual design skills are rare. They really need you. Delivering high-fidelity mock-ups, drawable resources (i.e. graphic assets) and guidance to developers is the best way to deliver an aesthetically pleasing experience to the end user.

Scale Nicely

Android is a platform of many screen densities. There is no set of resolutions to target, rather a density independent measurement scheme for graphics, widgets and layouts. This is covered in depth in a previous Smashing article and the official documentation, so I’ll just add a mention of this neat web tool for calculating density pixels.

Screen densities.
Optimize graphics for different screen densities. (Image credit: Android Design. Used under Creative Commons license.)

It’s not always practical to hand optimize graphic assets for each density. The platform can scale resources down reasonably well. However, it’s always worth testing designs on low-end devices and optimizing resources that scale badly.

Be State Friendly

Touch states provide important confirmation of clicks and selections. When customizing widgets such as buttons, it’s important to create drawables for all necessary states (such as default, focused, pressed and disabled). The focused state is essential user feedback on devices that support directional pad or trackball navigation.

Size is important too. Touch input is imprecise and fingers occlude the UI as they interact with the screen. Touch targets should normally be at least 45 density pixels in width and height.

Use Fonts

Android has two fonts: Droid Sans and Roboto. Roboto was released in Ice Cream Sandwich (Android 4). It’s been compared to Helvetica, but it’s a little condensed, which is great for small screens. You’re not limited to Roboto or Droid Sans, though. Any font can be packaged within an app in TTF format (with some memory overhead).

Roboto font.
Roboto is Android’s new font, introduced in Ice Cream Sandwich. (Image credit: Android Design. Used under Creative Commons license.)

Use 9-patch Drawables

9-patch drawables allow PNGs to stretch and scale nicely in pre-defined ways. Markings along the top and left edges define the stretchable areas. The padded content area can optionally be defined with markings along the bottom and right edges. 9-patches are essential for creating and customizing UI widgets.

Draw 9-patch.
Create scalable widgets with Draw 9-patch.

It’s possible to create 9-patches manually, but the Android SDK comes with an nice, simple tool called Draw 9-patch. This makes it quick and easy to convert a regular PNG in to a 9-patch. It highlights the stretchable area and displays previews of the resulting drawable with different widths and heights.

Handle Design Legacy

Honeycomb (Android 3) and Ice Cream Sandwich (Android 4) modernized Android’s visual design with the Holo theme. However, some device manufacturers have a poor reputation for keeping platform versions up-to-date. Some of today’s most popular devices will never be upgraded to Ice Cream Sandwich.

Meetup screenshot.
The Meetup app makes everybody feel at home with separate Gingerbread (Android 2.3) and Ice Cream Sandwich widgets.

So what can be done? There are two options. Deliver the current look, feel and experience to all devices or use a separate set of widgets styles and drawables for Gingerbread and below. Both approaches are valid. Would your users prefer modern or comfortably familiar?

Showcase the Brand

Sometimes clients fear that sticking to recognized UI design patterns will make their apps less distinctive. I think the opposite is true. As patterns like the action bar become ubiquitous, they fade into the background. Users can spend less time wondering how to use an app and more time appreciating how elegantly your app solved their problem. That experience is much more valuable for the brand than a one-of-a-kind UI for the sake of differentiation.

Color navigation screenshot.
The original Color app had an online FAQ for the UI controls. Make sure that navigation is intuitive.

Branding can be expressed through design of icons, drawables and widgets, as well as in the choice of colours and fonts. Subtle customization of the standard platform widgets can achieve a nice balance of brand values and platform consistency.

Create High-Fidelity Mock-Ups

High fidelity mock-ups are the best way to communicate visual design to developer responsible for implementation. The Android Design website provides templates in PSD and other formats. It’s important to try mock-ups out on real devices to confirm that they feel right, with UI components sensibly sized and placed. The Android Design Preview tool allows you to mirror mock-ups directly from your favourite design software to an attached Android device.

A practical approach for mock-ups is to work against the screen characteristics of the most popular devices. Ideally, create mock-ups for each alternative layout required by screen size or orientation.

Polish

Attention to detail is key. Become involved in the development process to ensure that your designs are realized. As a developer, I would always prefer to work with active designers than those who deliver mock-ups and resources before disappearing into thin air. Designs need to be iterated and refined as the app develops.

Animated transitions provide some visual polish that many Android apps lack. Developers might not include such things on their own initiative. Make them part of the design when they make sense. Aside from transitions, animations are a great way to keep users distracted or entertained when the app needs to make them wait.

User Experience

Android has patterns and conventions like any other platform. These help users to form expectations about how an unfamiliar app will behave. Porting an iOS experience directly to the Android platform almost always results in a poor user experience.

Back buttons in Android and iOS.
Back is a platform affordance in Android. In contrast, labeled back buttons within the app layout are the norm for iOS.

The back button is the best illustration of the interaction differences between Android and iOS. All Android devices have a hardware back button or on-screen navigation bar (including back button). This is universally available as a feature of the platform. Finding a back button within an Android app layout feels weird as an Android user. It makes me pause to think about which one to use and whether the behaviour will differ.

Design User Flows

At the very simplest level, Android apps consist of a stack of screens. You can navigate in to the stack with buttons, action bar icons and list items. The platform back button allows you to reverse out of the stack.

The action bar mirrors a web convention, where the app icon to the left of the action bar usually takes you to the top level of the app. However, there is also the up affordance, intended to take advantage of structural rather than temporal memory. This is represented by a backwards facing chevron to the left of the app icon. This signals that pressing the icon will navigate one level up in the information hierarchy.

Up affordance.
The up affordance allows the user to navigate up an information hierarchy instead of going to the top level of the app.

The purpose of the up affordance might be subtle at first. Android apps can have several entry points in addition to the launcher. The Intent system allows apps to deep link each other and home screen widgets or notifications might take you directly to specific content. The up affordance allows you to navigate up the information hierarchy regardless of where you came from.

Try user flows on potential users with wireframes or mock-ups and iterate. Prototypes on real devices are ideal because they allow you to test in realistic mobile environments. This might seem like a lot of effort, but remember, you only need to try things out with a few users.

Be Platform Consistent

UI patterns are your friend. It’s much better to think of these patterns as tools than constraints. Users would prefer not to have to learn to use your app, so patterns provide familiar hints about how to navigate and interact.

Action bar is the most widely adopted Android pattern. It tells you where you are and what you can do. It’s a native feature of the platform since Honeycomb and the excellent Action Bar Sherlock library makes it available on older platform versions too.


An example of the dashboard and action bar patterns.

The dashboard pattern is also quite widely used. These grids of icons are usually presented to the user when they launch an app. Dashboards provide top level navigation and describe the primary areas of the app.


I worked on the Songkick app, where we used a dashboard draw out the content of the app with full-bleed images.

The  workspaces pattern can be implemented with the ViewPager component. This allows users to swipe screens left and right between content. This can be used in conjunction with tabs to provide a more fluid browsing experience with tabbed data.

ViewPager swiping.
ViewPagers allow users to swipe left and right. Page indicators or tabs make this navigation discoverable.

The ribbon menu is an emerging navigation pattern. This allows us to launch the user directly into content and provide the top level navigation in a menu, which slides in from the left side of the screen when you press up.

Ribbon menu
The ribbon menu is an alternative to dashboard navigation.

Tablet optimized apps often take advantage of multi-pane layouts. A single tablet screen can display the content of several separate phone screens side by side. Optimising for tablets can involve creating several alternative layouts for different screen widths. Sections of UI can be designed once and laid out in different configurations for different screen sizes. Multi-pane layouts help to avoid overly wide list items and sparse layouts.

Multi-pane tablet layout
The Economist news app uses multi-pane tablet layouts so users can explore the hierarchy of content on a single screen.

These are familiar and proven UI patterns. They’re the best tools for starting to sketch out your app layouts and navigation. However, they shouldn’t discourage you from trying something new. Just ensure that the app behaves predictably.

Design Responsively

Android is a platform of many screen sizes. The devices that I can lay my hands on in our office compose a spectrum of screen sizes from 1.8 to 10.1 inches (as long as we ignore the Google TV). With variable screen area, Android has something in common with responsive web design. There is no getting away from the fact that design and implementation of a responsive experience across the full range of devices takes a lot of work. Supporting every screen is the ideal, but there are also sensible strategies for coping with the diversity of the platform.

Knowing a little about your target users and popular devices can help focus efforts and avoid premature optimisation. A good default strategy is to target popular, middle sized phones (3.2″ – 4.6″) and then optimize as necessary with alternate layouts and user flows for particularly small (<3″) devices and tablets.

It’s always best to be orientation agnostic. Some devices have physical keyboards that require the device to be held in landscape. The on-screen keyboard is also easier to use in landscape. Text entry on touch screens is awkward an error prone, so let’s at least give our users the benefit of the landscape keyboard.

Understand Mobile Interactions

People interact with mobile apps differently from websites or desktop software. Mobile apps rarely have the undivided attention of a user and most interactions use touch input, which is not as precise as we might like.

Mobile interactions can often be measured in seconds. We recently developed a location-based app that allows users to check-in at bars. We counted the clicks on user paths such as check-in, considering whether each step could be avoided or simplified. We specify everything that an app should do as user stories. The most frequent stories should be as quick and easy to accomplish as possible. It’s particularly important in this scenario, because the user might be under the influence of alcohol…

Optimize First Use

First launch experience is crucial. Apps are often installed in response to a real world problem. If the first run isn’t satisfying then the user might never return. If the app requires sign up, offer preview functionality so that users get a feel for the experience. They probably need to be convinced that it’s worth filling out that sign-up form. Also consider using analytics to measure points where users drop off in the launch and sign-up process.

Many apps launch with a tutorial. This is usually an admission that the app is too complicated, but if you’re sure that you need one, keep it brief and visual. You might also want to use analytics to confirm that a tutorial serving a purpose. Are users that complete the tutorial more active? How many users just skip the tutorial?

Bring the App to Play

User experience considerations shouldn’t end in the app. It’s worth putting a bit of thought in to the Google Play Store listing to ensure that it’s immediately obvious what the app does and why the user would want it.

These Graphic Asset Guidelines will help you to create promotional material suitable for the various contexts and scales in which they appear. Some of these graphics are a pre-requisite for being featured too.

Layouts, Styles and Themes

Android has a visual layout editor and it’s getting better all the time. However, I still find myself developing XML layouts by hand. This section gets down to implementation details, covering some best practices for crafting maintainable and performant layouts. Visual designers might want to skim this section, but some awareness of implementation details can’t hurt.

The most general purpose layouts are RelativeLayout and LinearLayout. RelativeLayout should be favoured for efficiency, whilst LinearLayout is useful for distributing space between views using weights. GridLayout was new in Honeycomb. This is useful for creating complex layouts on large screens without nesting. Nesting layouts too deep is bad for performance and code readability alike!

Let the Framework Do the Work

The Android framework provides automated resource switching based on folder structure. This means that you can have separate graphic assets and layouts for different screen sizes and densities by arranging them in the correct folders. It goes much further than that. For example, you could switch color resources for different platform versions or even animation durations for different screen sizes.

Resource folder structure.
The framework provides automatic resource switching.

Since Honeycomb, it’s also possible to switch resources on available screen width in density pixels. This is a move away from the bucketed small, normal, large and extra-large screen size switching. It facilitates responsive design and allows multiple layout switching points (perhaps switching to a tablet-optimized layout at 600dp with another alternative at 800dp). It’s typical to have multiple layout files with different configurations of the same components for different screen characteristics.

State list drawables make being state-friendly easy. These allow you to specify different drawables for different states of a UI component in an XML file. As mentioned earlier, representing states properly provides important user feedback.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:state_focused="true"
    android:state_pressed="true"
    android:drawable="@drawable/my_button_pressed_focused" />

  <item
    android:state_focused="false"
    android:state_pressed="true"
    android:drawable="@drawable/my_button_pressed" />

  <item
    android:state_focused="true"
    android:drawable="@drawable/my_button_focused" />

  <item
    android:state_focused="false"
    android:state_pressed="false"
    android:drawable="@drawable/my_button_default" />

</selector>

Extract Values

It’s good practice to keep layout XML clean of explicit colours and dimensions. These can be defined separately and referenced in your layouts. Defining colours and dimensions separately promotes visual consistency and makes things easier to change later on. Extracting these values allows switching of dimensions on different screen sizes, orientations and platform versions. This is useful for tweaking padding for small screens or increasing text size for readability on large screens, which tend to be held further away from the face. Perhaps res/values/dimens.xml contains:

<dimen name="my_text_size">16sp</dimen>

whilst res/values-sw600dp/dimens.xml contains:

<dimen name="my_text_size">20sp</dimen>.

Use Styles and Themes

A good technique to keep layout XML maintainable is to separate the styling concern from the positioning concern. Every View in a layout needs to have at least a width and height attribute. This results in a lot of boilerplate, which you can eliminate by inheriting from a set of base parent styles.

<style name="Match">
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">match_parent</item>
</style>

<style name="Wrap">
  <item name="android:layout_width">wrap_content</item>
  <item name="android:layout_height">wrap_content</item>
</style>

<style
  name="MatchHeight"
  parent="Match">
  <item name="android:layout_width">wrap_content</item>
</style>

<style
  name="MatchWidth"
  parent="Match">
  <item name="android:layout_height">wrap_content</item>
</style>

Recurring sets of attributes can be moved into styles. Widget styles that occur almost universally throughout the app can be moved into the theme. If a particular type of button always has the same text color and padding, it’s much cleaner to specify the style than duplicate these attributes for each occurrence.

<style
  name="MyButtonStyle"
  parent="MatchWidth">
  <item name="android:padding">@dimen/my_button_padding</item>
  <item name="android:textColor">@color/my_button_text_color</item>
</style>

We save four lines of attributes when we add the button to a layout. The layout file can be concerned with just the positioning and unique attributes of widgets.

<Button
  android:id="@+id/my_button"
  style="@style/MyButtonStyle"
  android:text="Hello, styled world!">

You can take this further by overriding default button style in a theme and applying it to an Activity or the entire app in the AndroidManifest.xml.

<style
  name="MyTheme"
  parent="@android:style/Theme.Holo">
  <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style
  name="MyButtonStyle"
  parent="@android:style/Widget.Button">
  <item name="android:padding">@dimen/my_button_padding</item>
  <item name="android:textColor">@color/my_button_text_color</item>
</style>

Optimize

The include and merge XML tags allow you to drop reusable sections of UI into your layouts, minimizing duplicate XML when the same set of views occurs in multiple layout configurations.

<include
  layout="@layout/my_layout"
  style="@style/MatchWidth" />

A relatively new addition to the Android Developer Tools is Lint. This tool scans the resources in a project and creates warnings about potential performance optimizations and unused or duplicated resources. This is incredibly useful for eliminating clutter as an app changes over time and it’s certainly worth checking lint for warnings regularly during your development process.

Debug

Sometimes layouts just don’t turn out how you expected. It can be hard to spot bugs amongst all those angle brackets. This is where Hierarchy Viewer comes in. This tool allows you to inspect the layout tree of an app running in the emulator. You can inspect the detailed properties of each view.

Hierarchy Viewer.
Inspect your layout trees with Hierarchy Viewer. Those colored dots can tell you about your layout performance.

Hierarchy Viewer has a couple neat tricks for visual designers too. It allows you to inspect screens in zoomed pixel perfect mode and export the layers of a layout as a PSD.

Conclusion

So you’ve been introduced to the platform and the tools. What next? Ultimately, the best way to get a feel for Android is to use it every day. The most satisfying app designs have a few things in common: platform consistency, attention to detail and clean visual design. The first two, at least, can be picked up by using and analysing existing Android apps.

Android has come a long way in the last few years. The platform and the apps have become gradually more refined. Functionality is not enough at this point. There are almost half a million other apps out there, and users want polish.

Resources

(jc)

© Jamie McDonald for Smashing Magazine, 2012.

0
Your rating: None

  

I sincerely believe that the user experience community should add game design to its toolbox of competencies. If we’re truly committed to creating satisfying user experiences, then there’s no reason why games, which can satisfy people so richly, should be excluded.

Operating successfully in the games domain means learning a new set of competencies, and I don’t want to oversimplify the challenges of designing high-quality game experiences. However, if you’re in a position to jump in and start designing, then I can at least offer a primer to help you steer clear of some of the most common mistakes.

1. Games Should Be Games First

Trading off the quality of the player experience in favor of some real-world objective is always self-defeating. This is the recurring problem with “gamified” designs, which too often just cynically tack points and leaderboards onto a product that is fundamentally gameless. First and foremost, a game needs to be enjoyed.

Schwab MoneyWise’s It’s Your Life game has a noble mission: to convince people to save more money for retirement and other long-term objectives. It’s Your Life presents players with a number of choices between spending and saving money over the course of a simulated lifetime. At the end, players get a letter grade on how well they did.

A screen from Schwab's It's Your Life game
At each step in Schwab’s It’s Your Life game, the choice that will lead to a winning outcome is pretty obvious.

The problem is that the designers were much more interested in hammering home their message than creating an actual game experience. If you want to win the game, then the right choice each step of the way is to save your money and not spend any of it. Ever. On anything. You can earn an A+, the highest possible score, if you:

  • Skip college,
  • Never move out of your parents’ house,
  • Never get married,
  • Never have children,
  • Never travel or take any vacations,
  • Work indefinitely past the age of 65,
  • Die alone with a lot of money and no one to leave it to.

I’m sure the designers reasoned that someone playing through the scenarios would elect to do meaningful things with their life, but they set up the scenarios so that doing nothing with one’s life while saving vigorously would be the surest way to win. Even though It’s Your Life is packaged as a game, the designers didn’t commit to it being experienced as a game.

2. Play Test, Play Test, Play Test

Games are highly dynamic experiences. The flow of events changes from moment to moment, and each decision a player makes can lead to a multiplicity of outcomes. Most games are also programmed with an element of randomness, so a player never has quite the same experience twice. Multiplayer games throw even more unpredictability into the mix.

As a result, the designer directly controls not the gameplay, but rather the underlying system in which play unfolds. Without actually seeing the game in action, you cannot reliably anticipate how it will work. Mike Ambinder, an experimental psychologist at game developer Valve, puts it in scientific terms: “Every game design is a hypothesis, and every instance of play is an experiment.”

Be prepared to put your game under the microscope again and again, and to adapt the design to make it more enjoyable.

3. Games Don’t Have To Be For Kids

With a large market catering to them, kids have the latitude to be very discerning consumers of games. Marketing campaigns pushing big-budget titles already crowd out one another, so you’ll find that just getting a young gamer’s attention is a tremendous challenge. You can’t assume that kids will want to play your game just because it’s a game.

And these days, kids are the minority of people who play video games. Eighty-two percent of gamers are over the age of 18, and 29% are 50 and older. Grown-ups are sometimes more receptive to playing games outside of the mainstream, and they have more disposable income to spend on games (i.e. if you plan to sell your game).

Only 18 percent of game players in the U.S. are under 18 years old
Kids under 18 represent a small minority of game players.

This is not to say that kids cannot make up a portion of your audience. But if your game is clearly intended for young children — as announced in breathless starbursts, reading “Hey, kids!” and “Super-cool!” — then you will turn off the larger segment of gamers. So, consider targeting your game to an older age group while keeping it accessible to a broad range of ages.

4. Action Can Be Boring

Call of Duty: Modern Warfare 3 is an amazing action game. It also took years to make and a team comprising dozens of designers, artists and engineers at a cost of many millions of dollars. You’re probably not making Call of Duty.

It’s very difficult to sustain adrenaline-pumping excitement for long. If you do choose to make an action-based game on a small scale, you’ll find that you’re limited to very simple and short-lived scenarios, such as racing a car, throwing a basketball or shooting a spaceship. Taken on their own, these types of experiences tend to grow tiresome quickly.

You’ll find a lot of creative opportunity in games that make the player think through interesting choices instead of executing twitch responses. The card game Hearts, for example, is all about choices. Which three cards should I pass to my opponent? Should I play a high card or a low card? If I play clubs one more time, will someone else stick me with the queen of spades? Should I shoot for the moon, or will that prove self-destructive? Each choice is evaluated from one trick to the next, depending on the changing conditions of your hand and on new information about what other players have done. Even though Hearts can be a fairly long game, it holds the players’ interest without any laser blasters or lava levels.

The card game Hearts
Hearts creates excitement by presenting players with a lot of interesting choices.

5. Fit The Game Into The Player’s Lifestyle

Think about the real-life contexts in which people will play the game. Start the design process by asking:

  • Who are your players?
  • How much time do players have to give to the game, and how much of that time will your players actually be willing to give?
  • Will your players need to take a break from the game and continue it later?
  • Where will your players be when they’re playing the game?
  • What kind of hardware, software and Internet access will be available to your players?

Unisys developed a series of online games for the company’s sales team to send to customers as holiday greetings. A customer would receive a link by email to an online holiday card with a personal message from the salesperson. The card would then open into the game, branded with Unisys’ logo.

Screenshot of the Unisys mini-golf game
Unisys’ mini-golf game was designed to be a quick, nonintrusive diversion from the workday.

Because the players were receiving these emails at work, the games couldn’t require a significant investment of time to reach the end, so all of them were designed to last less than five minutes. And because many players would be accessing the game while sitting in a cubicle, with their computer speakers probably turned off, the few sounds in the games were not made essential to the experience.

FarmVille cleverly makes itself adaptable to the player’s lifestyle. Players need to dedicate only a few minutes at a time, during which they can plant seeds for crops that take different amounts of real-world time to harvest. Raspberries take just two hours, so they’re useful when the player is able to check in several times a day. Eight-hour pumpkins fit in well just before and after a workday. Artichokes take four days to harvest — better for players who are able to check in only now and then. These staggered growth rates allow the time commitment to be made on the player’s own terms.

Different crops mature at different rates in Farmville
The staggered harvest times for crops in FarmVille allow players to decide how much gameplay they can fit into their lives.

6. Create Meaningful Experience

Players have to invest their time, concentration and problem-solving abilities to the challenges that a game throws at them. There should be a point to these efforts, a payoff for their investment. When the game ends, players should come away feeling that the experience was meaningful.

A great example is the card game Killer Bunnies, in which success is ultimately determined by a card picked randomly from the deck. The player who holds the match for that card (the “magic carrot”) is declared the winner. No player has any control over which card is picked; the selection is completely random. But the gameplay does give players some control over which matching cards they hold. Players compete for carrot cards over the course of the game, and shrewd players will work to hold the greatest number of them before the game is over. The game says a lot about the players’ mastery of the strategy, tolerance for risk and skill at reading other people. Players come away from the game knowing that they had control over their chances of success, which makes the experience meaningful.

Picture of the carrot cards in Killer Bunnies
Players exercise some control over the outcome of Killer Bunnies by acquiring carrot cards, increasing the probability that they’ll capture the randomly selected magic carrot.

7. Don’t Cheat

Because video game rules are enforced inside the black box of the computer’s circuitry, there’s a temptation among designers to take shortcuts by letting the game cheat. Don’t give in to that temptation. Players will be able to tell when a game is cheating, and they will resent it.

Suppose you’re designing a blackjack game that matches a player against a computerized dealer. As the designer, you need to write a script to control the dealer’s actions. You want the dealer to be a little hard to beat but not impossible. One easy way to create challenge would be to let the script choose which card from the deck is drawn next. You would then program the dealer to pick a card that either wins or loses, and put in a randomizing function so that two out of every three times it picks a winning card. This also creates an easy way to allow players to change the difficulty, so that on a harder setting the dealer will pick a winning card four out of every five times, while on an easier setting it will win just one out of every three. How would anyone even know you’re cheating?

After playing the game a few times, you’ll see how. The dealer will do seemingly irrational things, such as hitting on 20 and magically drawing an ace. The deck will not seem random, because certain cards will tend to show up early and others will show up only after those preferred cards have been drawn. After several play-throughs, these patterns will become obvious. When players realize that a game is cheating, they’ll make the ultimate winning move by turning it off.

8. Skip The Manual

The best way to convince people that a game is worth playing is by letting them jump in and try it out for themselves. Presenting written instructions at the beginning of every new game merely creates a barrier to entry at the very time when you want to be most accommodating of players. Instructions can also become a crutch, used to justify unconventional and unintuitive choices in the interface.

The best place to teach people how to play a game is right there in the game itself. Tutorials have become one of the most familiar patterns in games. Ask yourself, “What’s the smallest amount of information the player needs to make the first move?” Then provide nothing more than that; you can get to the second move when the time comes. Playing is learning. If people are interested in the game, they’ll be motivated to fill in the blanks themselves by playing it.

Screen from Kanyu
In Bri Lance’s game Kanyu, step-by-step instructions on how to play are cleverly incorporated into the game’s storyline.

9. Make The Game Make Sense

Players need to understand why things happen in the game in order to feel that they’re in control. In game design, a sensible experience relies on some mutual understanding between the designer and the player:

  • When the player loses, the reason they lost should be clear. If it’s not, then the player won’t be able to get better at the game by avoiding the same mistake in future.
  • When the player wins, the reason they won should be clear. If not, then replicating the victory will be hard.
  • Every effect should have a clear cause. When something happens, the player should be able to see why it happened.
  • The object of the game should be clear. The player needs to know what they’re working toward.
  • The player should always know what actions may be performed. At every moment, visible or aural cues should be provided to let the player know what they can do.

10. Make It Easy To Try Again

Step back and think about the game as a discontinuous and iterative experience. When a player loses, cycling back into the game to try again should be instant and effortless. Even large commercial games with multimillion-dollar development budgets make the mistake of forcing a lengthy loading screen into that anxious period between a player’s loss and a second attempt. Stretching that space of time to the second, third or twentieth go-round inevitably tries the player’s patience. Games such as Braid and Prince of Persia: The Sands of Time take a clever route around this problem by allowing players to rewind time to a safe point before their losing moment.

Playing To Your Strengths

These 10 guidelines will help you get started, but plenty of challenges lie ahead as you set about designing and developing your game, and you’ll need to learn how to manage them as they come up. One last piece of advice is to play to your strengths. If you have a background in designing conventional user interfaces, by all means use the skills and techniques that you gained from it. Wireframing, user testing, rapid prototyping, storyboarding, flow diagramming and other core skills all translate well to game design and can help you pull through the inevitable rough patches. When a game design issue confounds you, trust your instincts and ask how you would handle a similar problem outside of the context of the game. More often than not, you’ll point yourself in the right direction.

(al)

© John Ferrara for Smashing Magazine, 2012.

0
Your rating: None

If you want to participate in today's Internet, and all the apps and services that go with it, you have two choices: Accept that your information is out there and try not to worry about it, or arm yourself with some privacy protection tools. Should you choose the latter path, check out these apps and services to help you stay anonymous online and keep your information out of the wrong hands.

0
Your rating: None

larry ellison

Editor’s note: Aaron Levie is CEO of Box. Follow him on Twitter @levie.

In 1997, Larry Ellison had a vision for a new paradigm of computing which he called the Network Computer (NC). The idea was simple: a group of partners would build devices and services that leveraged the power of the Internet to compete against the growing Windows monopoly.

Ellison believed that the computer in the client/server era had evolved into too complex a machine for most tasks. With the NC, the ‘heavy’ computation of software and infrastructure would be abstracted from the actual device and delivered instead to thinner terminals via the web, thus radically simplifying access and enabling all new applications and mobility.

But the NC never made it mainstream. Microsoft and its allies had already amassed considerable power, and the cost of personal computers was dropping rapidly, making them even more attractive and ubiquitous. Furthermore, many of the applications were too immature to compete with the desktop software experience at the time; and few people, as it turned out, wanted to buy a device championed by Oracle.

The NC fell short on execution, but Ellison was right about the vision: “It’s the first step beyond personal computing, to universal computing.” In many ways, he was the first to glimpse a future resembling the post-PC world we are rapidly moving towards today.

15 years later, it is Apple that has brought its version of this vision to life. And Apple’s rising tide – already 172 million devices strong, sold in the last year alone – has in turn given rise to a massive, vibrant ecosystem: companies generating hundreds of millions and billions of dollars in value in under a few years, revolutionizing industries like gaming, social networking, entertainment and communications in the process. Then of course there’s Instagram.  All proving that value created in this mobile and Post-PC world will rival traditional computing categories.

But the post-PC transformation isn’t limited to the consumer landscape. In the enterprise, we’re transitioning to a way of working that is far more fluid, boundary-less and social. And mobile pushes computing to the cloud and rewrites all applications in its wake. Those who saw it coming (Oracle) and those who initially resisted its arrival (Microsoft) have equally been taken by surprise by the power and speed of the post-PC shift within today’s enterprises, and it’s creating one of the biggest opportunities ever.

Why the change is so profound

We recently met with the IT leadership team of a fairly conservative 50,000-person organization where all the participants all had iPads. No big surprise there. But the apps they were using were radically different from what you would have found in their organization only a few years back – a mix of apps from a new set of vendors that together supplant the traditional Microsoft Office stack.

Post-PC devices are driving enterprises to rethink their entire IT architecture, thanks to a wildly unpredictable and improbable chain reaction set off by a new consumer device from Apple.  For the first time in decades, CIOs have the opportunity – and necessity – to completely re-imagine and rebuild their technology strategy from the ground up. Catalyzing this change is the fact that the technology switching costs are often less than the price of maintaining existing solutions. A shipment of 1,000 new iPads requires applications to run on these devices – and choosing all-new applications and vendors is generally cheaper than the service fees, infrastructure, and operational costs of legacy software.

And thus, the Post-PC era drives the final nail in the coffin of the traditional enterprise software hegemony. Microsoft, in particular, built up a practical monopoly that lasted nearly twenty years, and forced an entire industry to conform to its way of seeing the world.  Yet this arrangement served its benefactor far more than the ecosystem, as the Redmond giant built up leadership positions across nearly every application category.

In the Post-PC era, businesses will shift from deploying and managing end-to-end enterprise solutions from a single vendor, to consuming apps a la carte both as individuals and en masse. But which apps and vendors will help define this new world?

What’s coming won’t look like what came before

Change always begins incrementally at first. Predicting specifically what will happen in the next year or two is a far more realistic undertaking than anticipating where we’ll be in a decade. In shifting from one technology generation to the next, we minimize disruption by porting the old way of doing things to newer mediums or channels. Not until the new model settles in do we see the real results that rise from these foundational shifts.

Mobility is such a foundational shift, and it’s still very, very early. Even when the Microsofts and Oracles of the world relent and build applications for post-PC devices, these apps will carry much of the DNA of their desktop predecessors. We can imagine that each of the enterprise mainstays – ERP, HR management, supply chain, business intelligence, and office productivity – will be painstakingly moved to mobile. But that’s just the first phase.

Emerging CRM startups like Base will challenge longstanding assumptions about where and how you manage customer interactions. Data visualization software like Roambi will make business analytics more valuable by making it available everywhere. Entire industries are already being transformed: mobile healthcare apps will enable cutting-edge health outcomes, and construction sites will eventually be transformed by apps like PlanGrid.  Companies like CloudOn and Onlive aim to virtualize applications that we never imagined would be available outside the office walls. Evernote’s 20+ million users already make it one of the most popular independent productivity software apps of all time, whose value is dramatically amplified by this revolution.  In a mobile and Post-PC world, the very definition of the office suite is transformed.

And with this transformation, much of the $288B spent annually on enterprise software is up for grabs.  The post-PC era is about no longer being anchored to a handful of solutions in the PC paradigm. Instead, we’re moving to a world where we mix and match best-of-breed solutions. This means more competition and choice, which means new opportunities for startups, which should mean more innovation for customers. As soon as individual workers look to the App Store for an immediate solution to their problem instead of calling IT (who in turn calls a vendor) you can tell things will never be the same.

In many ways, the enterprise software shift mirrors that of the media and cable companies fighting for relevance in a world moving to digital content (HT @hamburger). If users and enterprises can select apps that are decoupled from an entire suite, we might find they’d use a completely different set of technology, just as many consumers would only subscribe to HBO or Showtime if given the option.

Of course, every benefit brings a new and unique challenge. In a world where users bring their own devices into the workplace, connect to any network, and use a mix of apps, managing and securing business information becomes an incredibly important and incredibly challenging undertaking. Similarly, how do we get disparate companies to build apps that work together, instead of spawning more data silos?  And as we move away from large purchases of suites from a single provider, what is the new business model that connects vendors with customers (both end users and IT departments) with minimal friction?

And then there’s the inherent fragmentation of devices and platforms that defines the post-PC era. Android, iOS, and Windows 7 and 8 all have different languages and frameworks, UI patterns, and marketplaces. The fate of mobile HTML5 is still indeterminate. Fragmentation and sprawl of apps and data is now the norm. And while this fragmentation is creating headaches for businesses and vendors alike, it’s also opening a window for the next generation of enterprise software leaders to emerge and redefine markets before the industry settles into this new paradigm.

It would appear that Larry Ellison’s vision for the NC was right all along, just 15 years early. Welcome to the post-PC enterprise.

0
Your rating: None

If you’ve ever needed to connect to a remote server without installing any desktop software or doing anything other than opening a new browser window, then you need to check out Gate One. Gate One is a web-based terminal emulator and SSH client that will work in any modern web browser.

The brainchild of developer Dan McDougall, Gate One is the result of nine months of coding. While Gate One may not be the first project to put a terminal emulator in your browser — existing options include Shell in a Box and Ajaxterm among others — it has quite a few features that go well beyond the basics found in other emulators. For example, Gate One uses WebSockets rather than traditional polling so it’s able to keep SSH connections open without spiking your CPU and grinding the browser to a standstill. Gate One also has the ability to resume sessions after being disconnected.

Throw in multiple simultaneous terminal sessions, a way to save SSH bookmarks, a plugin architecture and the ability to play back, save and share terminal sessions and you’ve got a pretty respectable replacement for Putty and its ilk. Not that Gate One is intended to replace a desktop SSH client, but for situations where you can’t run a desktop app Gate One just might be the emulator you’ve been looking for.

The front end of Gate One is written entirely in HTML5 and JavaScript, which means it will work in any modern browser. Behind the scenes Gate One uses HTML5 WebSockets to connect to a Python-based SSH server.

Gate One is available from GitHub and is dual-licensed under either the AGPLv3 or a proprietary license.

See Also:

0
Your rating: None

First time accepted submitter quantumplacet writes "Longtime Googler Steve Yegge posted an insightful rant on his Google+ page about how Google is failing to make platforms of its products. He also shares some interesting little tidbits about his six year stint at Amazon working for the 'Dread Pirate Bezos'. The rant was intended to be shared only with his Google coworkers, but was accidentally made public. Steve has since removed it from his page, but it has been reposted elsewhere."

Read more of this story at Slashdot.

0
Your rating: None

One of the things I like most about Google's Chrome web browser is how often it is updated. But now that Chrome has rocketed through eleven versions in two and a half years, the thrill of seeing that version number increment has largely worn off. It seems they've picked off all the low hanging fruit at this point and are mostly polishing. The highlights from Version 11, the current release of Chrome?

HTML5 Speech Input API. Updated icon.

Exciting, eh? Though there was no shortage of hand-wringing over the new icon, of course.

Chrome's version number has been changing so rapidly lately that every time someone opens a Chrome bug on a Stack Exchange site, I have to check my version against theirs just to make sure we're still talking about the same software. And once -- I swear I am not making this up -- the version incremented while I was checking the version.


another nanosecond, another Chrome version.

That was the day I officially stopped caring what version Chrome is. I mean, I care in the sense that sometimes I need to check its dogtags in battle, but as a regular user of Chrome, I no longer think of myself as using a specific version of Chrome, I just … use Chrome. Whatever the latest version is, I have it automagically.

For the longest time, web browsers have been strongly associated with specific versions. The very mention of Internet Explorer 6 or Netscape 4.77 should send a shiver down the spine of any self-respecting geek. And for good reason! Who can forget what a breakout hit Firefox 3 was, or the epochs that Internet Explorer 7, 8 and 9 represent in Microsoft history. But Chrome? Chrome is so fluid that it has transcended software versioning altogether.

Chrome-infinite-version

This fluidity is difficult to achieve for client software that runs on millions of PCs, Macs, and other devices. Google put an extreme amount of engineering effort into making the Chrome auto-update process "just work". They've optimized the heck out of the update process.

Rather then push put a whole new 10MB update [for each version], we send out a diff that takes the previous version of Google Chrome and generates the new version. We tried several binary diff algorithms and have been using bsdiff up until now. We are big fans of bsdiff - it is small and worked better than anything else we tried.

But bsdiff was still producing diffs that were bigger than we felt were necessary. So we wrote a new diff algorithm that knows more about the kind of data we are pushing - large files containing compiled executables. Here are the sizes for the recent 190.1 -> 190.4 update on the developer channel:

  • Full update: 10 megabytes
  • bsdiff update: 704 kilobytes
  • Courgette update: 78 kilobytes

The small size in combination with Google Chrome's silent update means we can update as often as necessary to keep users safe.

Google's Courgette -- the French word for Zucchini, oddly enough -- is an amazing bit of software optimization, capable of producing uncannily small diffs of binary executables. To achieve this, it has to know intimate details about the source code:

The problem with compiled applications is that even a small source code change causes a disproportional number of byte level changes. When you add a few lines of code, for example, a range check to prevent a buffer overrun, all the subsequent code gets moved to make room for the new instructions. The compiled code is full of internal references where some instruction or datum contains the address (or offset) of another instruction or datum. It only takes a few source changes before almost all of these internal pointers have a different value, and there are a lot of them - roughly half a million in a program the size of chrome.dll.

The source code does not have this problem because all the entities in the source are symbolic. Functions don't get committed to a specific address until very late in the compilation process, during assembly or linking. If we could step backwards a little and make the internal pointers symbolic again, could we get smaller updates?

Since the version updates are relatively small, they can be downloaded in the background. But even Google hasn't figured out how to install an update while the browser is running. Yes, there are little alert icons to let you know your browser is out of date, and you eventually do get nagged if you are woefully behind, but updating always requires the browser to restart.

Please-restart-google-chrome

Web applications have it far easier, but they have version delivery problems, too. Consider WordPress, one of the largest and most popular webapps on the planet. We run WordPress on multiple blogs and even have our own WordPress community. WordPress doesn't auto-update to each new version, but it makes it as painless as I've seen for a webapp. Click the update link on the dashboard and WordPress (and its add-ons) update to the latest version all by themselves. There might be the briefest of interruptions in service for visitors to your WordPress site, but then you're back in business with the latest update.

Wordpress-update

WordPress needs everyone to update to the latest versions regularly for the same reasons Google Chrome does -- security, performance, and stability. An internet full of old, unpatched WordPress or Chrome installations is no less dangerous than an internet full of old, unpatched Windows XP machines.

These are both relatively seamless update processes. But they're nowhere near as seamless as they should be. One click updates that require notification and restart aren't good enough. To achieve the infinite version, we software engineers have to go a lot deeper.


Twitter-google-docs-infinite-version

Somehow, we have to be able to automatically update software while it is running without interrupting the user at all. Not if -- but when -- the infinite version arrives, our users probably won't even know. Or care. And that's how we'll know we've achieved our goal.

0
Your rating: None