Filed under: Apple, Developer, iPhone, SDKIn pixel-terms, the iPad offers a much larger workspace to develop on than the iPhone but in terms of the human experience, it's not that very far away from iPhone programming. The two share an underlying operating system and a large overlap in human interaction realities. Here are just three of those overlapping iPhone development realities. Consider taking these ideas into account as you're building your new and updated applications for the iPad.

Human fingers are big. Although the iPhone has a much smaller screen than the iPad, the size and shape of the typical human finger does not change between the two devices. Do not design interaction elements for the iPad smaller than, say 40-by-40 pixels in size.

When in doubt, design larger rather than smaller. The iPad with its larger screen is more likely to be held further away during use than the iPhone, which is often raised fairly close in during use. Build your on-screen objects accordingly. With its 1024x768-pixel screen, the iPad has the room for clean, large interaction elements. Use that space to better compliment the human finger.

Attention spans are short. Like the iPhone, expect your users to approach the iPad in a sporadic netbook-style fashion. Design your applications around short interaction periods and prepare for your application to be cut off as a user stands up to grab his next Orange-Cranberry Frapaccino.

Always save your application state between sessions, as much as you possibly can. A well designed app should relaunch quickly and, upon relaunching, approximate the same task your user was performing the last time the program was run. This can demand diligence on the part of the programmer, but is worth the time investment due to the payoff in user satisfaction.

One more tip after the break!

Thanks Scott Lawrence, |Agent

You've got to launch fast. If users complained about your launch speed issues on the iPhone, expect even worse criticism on the netbook-like iPad. Get your user into your application and started with work as soon as you possibly can. Apps that display credits and launch videos are wasting the user's time. Remember too that larger screen size means larger image asset sizes; which may take more time to load.

Use threads to keep your GUI from blocking on load. A well-threaded app should be able to catch up with the user without blocking the user from getting started. Remember that you're working in a one-application-at-a-time OS. Users will both want to and need to flip from one app to another as e-mail arrives or when checking a reference on the web. By speeding up your application launches, you help ensure that your user can get back to what he was doing as quickly as possible.TUAWiPad devsugar: Three lessons from the iPhone originally appeared on The Unofficial Apple Weblog (TUAW) on Wed, 03 Feb 2010 19:30:00 EST. Please see our terms for use of feeds.Read | Permalink | Email this | Comments

The iPad is a gargantuan iPhone, perhaps more precisely than many hoped. But, if you look closely, you can see hints of what's truly coming next.There are a few new scraps of gestures and interface bits, all thanks to the larger screen, which you can see sprinkled throughout the keynote video: • True multi-finger multitouch Two finger swipes, three finger twirls—multitouch gestures that weren't really possible on the iPhone's tiny screen, unless you're a mouse. This is what people were excited about, and we only get a taste. Though, the gesture Phil uses to drag multiple slides in Keynote, using two hands, looks a bit awkward and belabored. • Popovers The most significant new UI element of the iPad vs. the iPhone are popovers, which you see all over the place when you need to dive further into the interface, or make a choice from a list (since blowing up lists to full screen size doesn't make a whole lot of sense now). A box pops up, and has a list of choices or options, which might take you down through multiple levels of lists, like you see in the demo of Numbers, with selecting functions to calculate. Gruber has more on popovers, and why they're significant, here. • Media Navigator In some ways, the media navigator Phil Schiller shows off in iWork is the most interesting bit to me: That's what Apple sees as replacing a file browser in this type of computer. It's a popover too, technically. • Long touches and drags Lots of touch, hold and drag, something you didn't see much of in the iPhone. With more UI elements, and layers of them, you need a way of distinguishing what type of motion action you're trying to engage. These are all pretty basic, so far, building right on top of the iPhone's established interface, but it points to the future: More fingers, more gestures, more layered UI elements and built-in browsers.

The Apple iPad won't be out for another 60 long days for us mere mortals, so we've got our hands on its SDK -- it's the next best thing for now, as you can see in the gallery of screenshots below. Strangely, the emulator's bezel is a tad thinner than the real thing, but we'll get over it. Enjoy! Gallery: Apple iPad SDK emulatorApple iPad's user interface in pictures originally appeared on Engadget on Wed, 27 Jan 2010 21:02:00 EST. Please see our terms for use of feeds.Permalink   |   | Email this | Comments

Can you imagine if it looks ANYTHING like this!? Wow. As we all saw with the iPhone, if the tablet UI is special, and I mean truly amazing, something that makes people want to use it, play with it, and show others, then they are onto a winner.

Want to accelerate your marketing and get better results?, Free Online Marketing Course

Related posts:Will we be publishing our own digital magazines on the Apple Tablet? So, tomorrow’s big Apple event is looming, and I’ve... Upper West Side Apple Store opens Upper West Side Apple Store, originally uploaded by mattbuchanan.... Quick WWDC 09 thoughts So, some very quick thoughts after today’s keynote (it’s been...

Related posts brought to you by Yet Another Related Posts Plugin.

Filed under: Hardware, RumorsThere's yet another tablet post at Cult of Mac today. This time, a reader shares info from a "friend" who works at Apple (the Internet seems rife with people who've got loose-lipped friends at Apple; friends who are willing to discuss their employer's secrets at coffee shops) regarding the tablet's UI. According to the friend, consumers should "...be ready for a steep learning curve regarding the 'new' Apple product about to be released [and its] interface."

The reader goes on to say that his informant was fresh from a meeting when s/he shared this little tidbit. Perhaps using her iPhone. In the hallway.

The takeaway is obvious without this post: The tablet will behave in a way that we aren't expecting. For some, the iPhone's UI took some learning, as most consumers hadn't seen a touchscreen device before, let alone a touch-based phone. That doesn't mean it will be difficult to use, just different.

Rumors are rumors but one thing is certain: they're only going to get worse between now and the tablet's release.

[Via MacDailyNews]TUAWRumor: Apple employee says tablet UI has "steep learning curve" originally appeared on The Unofficial Apple Weblog (TUAW) on Wed, 06 Jan 2010 11:00:00 EST. Please see our terms for use of feeds.Read | Permalink | Email this | Comments

Though many computer applications and operating systems make use of real-world metaphors like the desktop, most software interface design has little to do with how we actually experience the real world. In lots of cases, there are great reasons not to directly mimic reality. Not doing so allows us to create interfaces that enable people to be more productive, communicate in new ways, or manage an increasing amount of information. In other words, to do things we can’t otherwise do in real life. But sometimes, it makes sense to think of the real world as an interface. To design user interactions that make use of how people actually see the world -to take advantage of first person user interfaces. First person user interfaces can be a good fit for applications that allow people to navigate the real world, “augment” their immediate surroundings with relevant information, and interact with objects or people directly around them. Navigating the Real World The widespread integration of location detection technologies (like GPS and cell tower triangulation) has made mobile applications that know where you are commonplace. Location-aware applications can help you find nearby friends or discover someplace good to eat by pinpointing you on a map. When coupled with a digital compass (or a similar technology) that can detect your orientation, things get even more interesting. With access to location and orientation, software applications not only know where you are but where you are facing as well.

This may seem like a small detail but it opens up a set of new interface possibilities that are designed from your current perspective. Consider the difference between the two screens from the TomTom navigation system shown below. The screen on the left provides a two-dimensional, overhead view of a driver’s current position and route. The screen on the right provides the same information but from a first person perspective.

This first person user interface mirrors your perspective of the world, which hopefully allows you to more easily follow a route. When people are in motion, first person interfaces can help them orient quickly and stay on track without having to translate two-dimensional information to the real world.

TomTom’s latest software version goes even further toward mirroring our perspective of the world by using colors and graphics that more accurately match real surroundings. But why re-draw the world when you can provide navigation information directly on it? Nearest Tube is a first person navigation application that tells you where the closet subway station is by displaying navigation markers on the real world as seen through your phone’s camera.

As you can see in the video above, the application places pointers to each subway station in your field of vision so you can quickly determine which direction to go. It’s important to note, however, that the application actually provides different information depending on your orientation. When you hold the phone flat and look down, a set of arrows directs you to each subway line. Holding the phone in front of you shows the nearest subway stations and how far away they are. Tilting the phone upwards shows stations further away from you.

Making use of the multiple perspectives naturally available to you (looking down, looking ahead, looking up) is an example of how first person interfaces allow us to interact with software in a way that is guessable, physical, and realistic. Another approach (used in Google Street View) is to turn real world elements into interface elements. Street View enables people to navigate the World using actual photographs of many major towns & cities. Previously, moving through these images was only possible by clicking on forward and back arrows overlaid on top of the photos. Now, (as you can see in the demo video below) Street View allows you to use the real-world images themselves to navigate around. Just place a cursor on the actual building or point on the map that you want to view and double-click.

Augmented Reality Not only can first person user interfaces help us move through the world, they can also help us understand it. The information that applications like Nearest Tube overlay on the World can be thought of as ÒaugmentingÓ our view of reality. Augmented reality applications are a popular form of first person interfaces that enhance the real world with information not visible to the naked eye. These applications present user interface elements on top of images of the real world using a camera or heads up display.

For example, an application could augment the real world with information such as ratings and reviews or images of food for restaurants in our field of vision. In fact, lots of different kinds of information can be presented from a first person perspective in a way that enhances reality. IBM’s Seer application provides a way to navigate this year’s Wimbledon tennis tournament more effectively. Not only does the application include navigation tools but it also augments your field of vision with useful information like the waiting times at taxi and concession stands.

Wikitude is an application that displays landmarks, points of interest, and historic information wherever you point your phone’s camera. This not only provides rich context about your surroundings, it also helps you discover new places and history.

These augmented reality applications share a number of design features. Both IBM Seer and Wikitude include a small indicator (in the bottom right corner of the screen) that lets you know what direction you are facing and how many points of interest are located near you. This overview gives you a quick sense of what information is available. Ideally, the data in this overview can be manipulated to zoom further out or closer in, adjust search filters, and even select specific elements. Wikitude allows you to manage the size of this overview radius through a zoom in/out control on the left side of the screen. This allows you to focus on points of interest near you or look further out. Since it is dealing with a much smaller area (the Wimbledon grounds), IBM Seer doesn’t include (or need) this feature. In both applications, the primary method for selecting information of interest is by clicking on the icons overlaid on the camera’s view port. In the case of IBM Seer, different icons indicate different kinds of information like concessions or restrooms. In Wikitude, all the icons are the same and indicate information of interest and distance from you. Selecting any of these icons brings up a preview of the information. In most augmented reality applications, a further information window or screen is necessary to access more details than the camera view can display. When many different types of information can be used to augment reality within a single application, it’s a good idea to allow people to select what kinds of information they want visible. Otherwise, too many information points can quickly overwhelm the interface. Layar is an augmented reality application that allows you to select what kinds of information should be displayed within your field of vision at any time. The application currently allows you to see houses for sale and rent, local business information, available jobs, ATM locations, health care providers, and more. As the video below highlights, you can switch between layers that display these information points by clicking on the arrows on the right and left sides of the screen.

Layar also provides quick access to search filters that allow you to change the criteria for what shows up on screen. This helps narrow down what is showing up in front of you. Interacting with Things Near You First person user interfaces aren’t limited to helping you navigate or better understand the physical space around you -they can also enable you to interact directly with the people and objects residing within that space. In most cases, the prerequisite for these kinds of interactions is identifying what (or who) is near you. As a result, most of the early applications in this category are focused on getting that part of things right first. One way to identify objects near you is to explicitly provide information about them to an application. An application like SnapTell can identify popular products like DVDs, CDs, video games, and books when you take a picture of the product or its barcode. The application can then return prices, reviews, and more to you.

This approach might eventually also be used to identify people as illustrated in the augmented ID concept application from TAT in the video below. This proposed application uses facial recognition to identify people near you and provides access to digital information about them like their social networking profiles and updates.

While taking pictures of objects or people to get information about them is a more direct interaction with the real world than typing a keyword into a search engine, it only partially takes advantage of first person perspective. Perhaps it’s better to use the objects themselves as the interface. For example, if any of the objects near you can transmit information using technologies like RFID tags, an application can simply listen to how these objects identify themselves and act accordingly. Compare the process of inputting a barcode or picture of an object to the one illustrated in this video from the Touch research project. Simply move your device near an RFID tagged object and the application can provide the right information or actions for that object to you.

This form of first person interface enables physical and realistic interactions with objects. Taking this idea even further, information can be displayed on the objects themselves instead of on a device. The 6th Sense project from the MIT Media Lab does just that by using a wearable projector to display product information on the actual products you find in a library or store.

Though some of these first person interfaces are forward-looking, most are available now and ready to help people navigate the real world, “augment” their immediate surroundings, and interact with objects or people directly around them. What’s going to come next is likely to be even more exciting. The next time you are working on a software application, consider if a first person user interface could help provide a more natural experience for your users by bringing the real world and virtual world closer together. About the Author LukeW is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc., author of two popular Web design books, and a top-rated speaker at conferences and companies around the world. You can follow Luke on Twitter at lukewdesign or by using RSS.

© Luke Wroblewski for Smashing Magazine, 2009. | Permalink | 50 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ui

Apple's been saying all along that Snow Leopard would be more about under-the-hood performance and stability enhancements than huge feature changes, so take this with a grain of salt, but AppleInsider claims that a forthcoming 10.6 developer beta could potentially feature a new UI codnamed "marble." The new appearance is said to be darker and sleeker than the current Unified / Aqua look, and speculation is rampant that the new scrollbars in the current versions of iTunes and iPhoto offer a peek into the future, along with the well-circulated mockup of the new QuickTime X player seen above. We'll see if Apple breaks with its plan to focus solely on the internals soon enough -- but for right now, we're wondering what your biggest gripes with the current OS X interface are, because we certainly know ours. What do you want fixed? Sound off!Filed under: Desktops, LaptopsSnow Leopard soon to sport new a "marble" look? originally appeared on Engadget on Wed, 25 Mar 2009 20:47:00 EST. Please see our terms for use of feeds.Read | Permalink | Email this | Comments

I wrote a few weeks ago about how anyone can easily change the Twitter web interface with Firefox and the GreaseMonkey plug-in (here). The great news is that this process is so easy that there’s little reason not to give this a go - you really are only a few clicks away from what’s shown below. Here’s some power UI enhancements I have chosen - and yes, this list goes to eleven. Have fun, @Eunmac Setup:

You’ll need Firefox. (here) You’ll need to install the GreaseMonkey Addon (here) Now click the links below to add new features to change your Twitter interface.

1. Nested Replies in Twitter: (install here)This is by far the most useful script for me. It collates a threaded conversation of replies inside the twitter page. Without this it is very hard to see what conversation took place.

2. Add Bio’s to Friend Following/Followers page (install here) When you’re checking out someone’s ‘following’ page you get no information other than a picture and a name. Useless! Anyway, if you add this script and you’ll see all their details including a bio, follower info and even last tweet. Here’s me checking out who Guy Kawasaki is following:

3. Sidebar Replies Panel (install here)See all other replies sent to another Twitter user.

4. Auto shortening of URL (install here)

5. Mentions and unread replies: (install here)

6. Add Friend Name Helper (install here)Auto suggests names from your following list.

7. Add Retweet Button (install here)  

8. Power Twitter. (install here)This is plug-in for Firefox. It displays videos and images nested inside conversations.

9. Expand Short URLs (install here)Don’t get fooled by those short bit.ly urls anymore, this plugin will reveal the full url inside the web interface.

10. Endless Tweets (install here) This is pretty cool, as you get to the bottom of the page, the page simply gets longer so you never have to move back and forth between pages.

11. Add search and Tools to sidebar (install here)  Other useful scripts:Hide All re-tweets. (install here)Block tweets with specific words (install here)Reveal followers. Places icon over those following you (install here)Shrink tweets with Tweetshrink (install here) Want to see all the twitter scripts? There are over 300 on userscripts.org (here) Found any more great tools? Add them to the comments please

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time. In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications. Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter . You may want to take a look at the following related articles:

5 Useful Coding Solutions For Designers and Developers 10 Useful Techniques To Improve Your User Interface Designs 10 Principles Of Effective Design Five More Principle Of Effective Design Getting Creative With Transparency In Web Design

1. Interface elements on demand Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality. When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box. One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is. When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.  
2. Specialized controls It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others. Backpack has a compact calendar date and time picker for selecting a reminder date. For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list. MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections. Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.  
3. Disable pressed buttons One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps. There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it. Yammer disables the “Update” button while your new message is being submitted. The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this: <input type="submit" value="Submit" onclick="this.disabled=true" /> Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.  

4. Shadows around modal windows Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow. This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page. Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath. To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container - with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using: (X)HTML:

   <div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001;

} .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them. Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.   5. Empty states that tell you what to do When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states. When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt. Campaign Monitor points you in the right direction when you start building an email campaign. This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it. Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works. Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.   6. Pressed button states Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them. This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications. You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active. Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.   7. Link to the sign-up page from the log-in page Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users. Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page. Goplan has a nice colored button on the log-in page pointing to the sign-up page. Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).   8. Context-sensitive navigation It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation. One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available. Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.   9. More emphasis on key functions Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis. The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame. To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it. 10. Embedded video While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video. GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started. MailChimp includes tutorial videos right on the admin panel to help out new users. Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do. Related articles Please take a look at the following related articles:

5 Useful Coding Solutions For Designers and Developers 10 Useful Techniques To Improve Your User Interface Designs 10 Principles Of Effective Design Five More Principle Of Effective Design Getting Creative With Transparency In Web Design

Discuss further techniques in comments! Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter . About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

Sure, we try to front as world-weary cynics, but when we pinged our folks at Nokia for a statement on that suspiciously-awesome slide about a previously unseen touchscreen interface and device concept, we were totally hoping for a "oh, our bad, that's a real phone and it's awesome and it's being released in the States tomorrow." Naturally, that was not the case. Here's what Nokia had to say on the matter:"The story you sent over was from a non-public presentation that discussed some UI enhancements - NOT a new product. The form factor shown was a generic form factor and not meant to showcase a new device / product."So, yeah. They're not really going to fess up to a lot here, but if we were to read between the lines we'd say these "UI enhancements" are much more likely to get real and official someday than whatever vaguely-hinted-at device was shown off beneath them. Maybe. Reading in further, we'd say it's a little odd that Nokia's demonstrating to investors its "best in class touch" capabilities by using a mockup interface on top of a mockup device, but perhaps that's why we were never so good with "the monies."Filed under: CellphonesNokia says touch interface and handset leaked in presentation don't point to new product originally appeared on Engadget on Fri, 12 Dec 2008 18:06:00 EST. Please see our terms for use of feeds.Permalink | Email this | Comments

If you watch one thing today, watch the video below. Mozilla labs have just released the alpha of Ubiquity for Firefox. It looks like a major advance in web browsing / web interface. It is almost like a short cut app on steriods but has the potential to really take off - it is that impressive. It reminds me a little of Quicksilver - an application which is loved by some and not quite understood by others (I’m in the latter camp). Anyway, check the video out below…v cool

Ubiquity for Firefox from Aza Raskin on Vimeo. Want to accelerate your marketing and get better results?, need a professional photographer?, Free Online Marketing Course! Limited time only! Click now! Start Slide Show with PicLens Lite