Ad

Showing posts with label Information Architecture. Show all posts
Showing posts with label Information Architecture. Show all posts

04 August, 2015

UX Principles for designing Virtual Reality

1. Everything Should Be Reactive.

Every interactive object should respond to any casual movement. For example, if something is a button, any casual touch should provoke movement, even if that movement does not result in the button being fully pushed. When this happens, the haptic response of the object coincides with a mental model, allowing people to move their muscles to interact with objects. When designing a button: use a shadow from the hand to indicate where the user’s hand is in relation to button, create a glow from the button that can be reflected on the hand to help understand the relationship, use sound to indicate when the button has been pressed (“click”)



2. Restrict Motions to Interaction

The display should respond to the user’s movements at all times, without exception. Even in menus, when the game is paused, or during cut scenes, users should be able to look around. Avoiding Simulator Sickness and slowness is the key part of improving the UX in Virtual Reality Applications. Do not instigate any movement without user input. Reduce neck strain with experiences that reward a significant degree of looking around. Try to restrict movement in the periphery.



3. Text and Image Legibility

Bigger, brighter and bold texts should be used to indicate widgets. Images should be realistic and appealing to the user. The mind of the user is going to be entirely mapped into the virtual reality for a prolonged amount of time. Texts should be readable and legible for unstrained viewing of the user. Brighter and vivid the colors are, more involved the users will be.


4. Ergonomics

Designing based on how the human body works is an essential to bringing any new interface to life. Our bodies tend to move in arcs, rather than straight lines, so it’s important to compensate by allowing for arcs in 3D space.


5. Sound Effect

Sound is an essential aspect of truly immersive VR. Combined with hand tracking and visual feedback, it can be used to create the “illusion” of tactile sensation. It can also be very effective in communicating the success or failure of interactions.


Google’s Design Guidelines for Virtual Reality

Google has listed some key principles involving physiological and ergonomics  consideration to be noted while designing for Apps that can run on Google Cardboard. They are pretty much straight-forward for the designers to understand. 


  1. Using a Reticle
  2. UI Depth & Eye Strain
  3. Using Constant Velocity
  4. Keeping the User Grounded
  5. Maintaining Head Tracking
  6. Guiding with Light
  7. Leveraging Scale
  8. Spatial Audio
  9. Gaze Cues
  10. Make it Beautiful

Should UX Designers start learning about Virtual Reality?


When the Technology giants Facebook, Google and Microsoft are spending a huge amount of money in Virtual Reality and Augmented Reality, they are definitely the potential areas of development and future. UX Designers should definitely start practicing and start adapting the principles of Virtual Reality during the design process. User Experience will play a major role in the success of this entire concept as this is going to have a emotional bonding with the users throughout the journey. 

It’s especially exciting to work in experience design right now. The problems are all new — we’re not bound by old interaction models. We can and will fail, but the successes will change how we experience the world.

10 August, 2011

Review Of Cross-Browser Testing Tools


At some point in the future, the way that all major browsers render Web code will likely be standardized, which will make testing across multiple browsers no longer necessary as long as the website is coded according to Web standards. But because that day is still a way off (if it will really come at all), testing your design the advanced browsers as well as legacy browsers is a necessary part of any project.
The old-school way to test code was to load your website on as many computers as you could find, using as many different combinations of browsers and operating systems as possible. That was fine if you had access to a bunch of different computers (and had some time to kill). But there are much more efficient ways to test across browsers, using either free or commercial Web services and software. In this article we review some of the most useful ones.
Free Cross-Browser Testing
Good news: very powerful free testing tools are available for Web designers today. Some are more user-friendly than others, and some have significantly better user interfaces. Don’t expect much (if any) support with these tools. But if you’d rather not spend extra money on testing, some great options are here as well.

Adobe BrowserLab

Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers, including various versions of Chrome, Safari, IE and Firefox. It gives you a number of ways to view pages, including a full-page view in a single browser, as well as side-by-side comparisons of browsers and an onion skin view. The service can access dynamic pages across the web, or viewed locally via Firebug or Adobe Dreamweaver CS5. The ability to create pre-defined browser sets is also useful, in case you don’t need to test on older browsers.

Browsershots

Browsershots is probably the most comprehensive free testing tool available. It includes Linux, Windows and BSD browsers. It also includes a number of browsers you’ve probably never heard of (like Galeon, Iceape, Kazehakase and Epiphany). For the most part, Browsershots tests on the most recent version of each browser, as well as on legacy versions.
While Browsershots does support a huge variety of browsers, the more you test, the more slowly it prepares the results. So, you may want to stick to the major browsers.

SuperPreview (Free and Commercial)

SuperPreview is Microsoft’s offering in this space (and it’s compatible only with Windows). It lets you define your own “baseline” (or default) browser, and it works with any browser installed on your system (and comes with the IE6 rendering engine built in). The fact that it only works with your built-in browsers does make it faster (because you’re not uploading anything or waiting for a remote server), but it also limits the number of browsers you can compare.
SuperPreview trial comes with 60 days of cloud services before you have to either buy it or go into reduced, (local browsers and IE 6-9 mode). In an online version, you have support for Chrome, Safari (Mac) 4+5, Firefox 3+4. You can also use an interactive mode to log into sites that require a login before displaying the page you want to test. There are also debugging tools for the DOM and onion skinning available in Adobe Browserlabs. Unfortunately, there is no support for Opera whether installed locally or in the cloud and you do have to have the version included with Expression Web to get the cloud services option but the base version with support for IE 6, IE 7, IE 8 (and IE 8 rendering as IE 7) are included with the free version as well as IE 9 if it is installed locally. (Thanks, Cheryl D Wise)

Lunascape 6

Lunascape is a triple-engine browser for Windows. It runs Trident (IE), Gecko (Firefox) and Webkit (Chrome and Safari), so that you can see how your website looks in all three, side by side. While it’s not a traditional browser compatibility tester, it is nonetheless a useful tool for designers and developers. One major benefit is that you get to view your website instantly in all three major rendering engines. There’s also support for Firefox extensions and plug-ins, so you can use developer tools like Firebug to diagnose compatibility problems.

IETester

IETester is a free (both for personal and professional usage) browser for Windows that allows you to have the rendering and JavaScript engines of IE10 preview, IE9, IE8, IE7, IE6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE. Only an alpha version of the tool is available. Windows 7, Windows Vista or Windows XP with IE7 minimum are required for the tool to run.

IE NetRenderer

IE NetRenderer lets you check compatibility in Internet Explorer versions 5.5 through 9. You’ll have to check each version individually, but the service is free.

Spoon

Spoon is an application emulation service. It provides free versions of Firefox, Chrome, Opera and Safari for Windows users. A number of versions of each browser are included: Firefox 2–5, Chrome 4–8, Safari 3–5 and Opera 9–10. Bad news: Internet Explorer is supported by Spoon virtualization but is not available by request of Microsoft.

Sauce Labs (free and commercial)

Sauce Labs provides a lot of browser and OS options and sets you up with a browser dedicated VM instance that you operate inside the browser of your choice. It also records a video of your entire testing session. The service offers 200 free minutes of testing per month and allows you to quickly build automated tests from your browser with Selenium.

Browsera (free and commercial)

Browsera provides automated compatibility testing. It automatically highlights differences in the way browsers render your design, thus simplifying the testing process. It also detects JavaScript errors, and the commercial version can test pages behind subscription or log-in walls. It can also test dynamic pages.
The free plan includes a limited number of browsers and low-resolution screenshots. Premium plans start at $39 for a single project and $49 to $99 for monthly subscriptions, and they support more browsers, provide high-resolution screenshots and let you test private pages.

Browserling (free and commercial)

Browserling is a relatively new cross-browser testing app. It supports a limited number of browsers (and not necessarily the newest versions), which makes it of limited use to some developers. It’s still in beta, though, so hopefully more browsers will be supported in the near future.
The free version comes with a five-minute session limit, and the developer version is $20 per month with no time limit.
Commercial Cross-Browser Testing
Commercial tools often have features not found in the free ones, including live interactive browser virtualization and mobile device testing.

Mogotest

Mogotest does complete browser-compatibility testing, including for private pages. There’s an API, so it can be integrated in your current tools and workflow. Mogotest also offers a website health report that tells you about broken links and pages, redirect loops and other issues common to new websites. The service also offer screenshot comparison tools for testing screenshots against each other as well as site-level testing including page consistency testing and individual page tests. HTTP basic and cookie-based login systems are supported as well.
There are two plans for individuals: a personal plan starting at $15 per month that lets you test up to 50 pages on three websites, and a freelancer plan for $45 per month that includes up to 10 websites and 350 pages. The team plans start at $125 per month and go up to $4499+ for unlimited access. The two highest-cost plans include custom reports.

Cloud Testing

Cloud Testing offers functional cross-browser testing. You record the user journey with your browser and Selenium IDE, upload it, and then Cloud Testing will run that script in multiple operating systems and browsers. It then provides screenshots and HTML and component diagnostics. No prices are listed on its website.

BrowserCam

BrowserCam includes testing tools for both desktop and mobile browser compatibility (the latter is still absent in many other tools). It also offers remote access for live testing on Windows, Linux and OS X configurations, and email capture for checking your HTML, RTF and TXT emails.
Pricing for BrowserCam starts at only $19.95 per day for a single service (and $24.95 for the browser, remote access and email capture package), up to an annual subscription price of $399.95 for a single service (and $499.95 for browser capture, remote access, email capture and multi-user access, or $999.95 for all of those features plus device capture).

Multi-Browser Viewer

Multi-Browser Viewer covers both desktop and mobile browsers. It includes 26 virtualized Web browsers, 5 mobile browsers (including the iPhone and iPad) and 61 screenshot browsers (meaning you can see how the website renders but not interact with it). It’s also available in five languages: English, Spanish, German, Russian and French.
Multi-Browser Viewer is $139.95 for a single-user license and includes a year of product usage and updates. Updates after the first year are currently $99.95. A free trial is available through the website.

CrossBrowserTesting

CrossBrowserTesting provides live interactive browser testing with remote VNC sessions. It also generates automated screenshots across multiple browsers for more basic testing. There are more than 100 browser and operating system combinations, including many mobile platforms.
Monthly subscriptions range from $29.95 to $199.95, depending on the number of users and the minutes of testing (minutes can roll over to the next month, but they’re not unlimited). A one-week free trial is available for all plans.

Conclusion

Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow (so that you’ll actually want to use it and it won’t be a hassle), and test whenever you make major changes to a design.

15 February, 2010

Top 10 Information Architecture Mistakes

Summary:
Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

Bad information architecture causes the majority of outright user failures and isn't improving at the rate of other Web usability issues. To determine why, I've identified 10 long-term sore thumbs that together cost websites billions of dollars each year.

I divided the following list of worst IA mistakes into two parts, which corresponds to how we partition the materials across our 2-day IA course:structure on Day 1 and navigation on Day 2. Of course, you need to get both right, but they're essentially two different design levels: The invisible way the site is structured and the visible way users understand and manage that structure.

Structure Mistakes

1. No Structure

The most notable structural problem is when designers treat a site like one big swamp with no organizing principle for individual items. Yes, users can fish the swamp using search or by following links from current promotions or outside sites. But whatever they dredge up is it. No opportunities for understanding the site's other offerings or locating related items.

This sin is common on news sites and catalog-based e-commerce sites, where each item (articles and products, respectively) is treated as a stand-alone unit without connections to related items. No wonder users leave those sites so quickly.

2. Search and Structure Not Integrated

We've long known that users often exhibit search-dominant behaviors. This doesn't mean that search is all they need, however. Arriving on a page from a search is like parachuting into a city. Hopefully, if you want to go to Paris, you'll land there rather than in Amsterdam, but in any case, you're unlikely to land on the doorstep of your favorite restaurant. To get there, you'll need to walk or take a cab. Similarly, users often need to navigate the neighborhood around their search destination.

Of course, local navigation works only if the site has a structure to define its neighborhoods (see mistake #1). But the design must also expose local options to users. Even better if it indicates how relevant the neighboring options are to the user's current query.

SERP (search engine results page) usability increases when each search hit exposes its location within the site structure. External search engines like Google can't always do this because they don't know the site's structure or which navigational dimensions are most relevant to common site tasks. But you do know your site's structure and should therefore include the info on your own SERPs.

Sadly, search and navigation fail to support each other on many sites. This problem is exacerbated by another common mistake: navigation designs that don't indicate the user's current location. That is, after users click a search result, they can't determine where they are in the site — as when you're searching for pants and click on a pair, but then have no way to see more pants.

3. Missing Category Landing Pages

We recommend that sites have a series of categories that each link to their own landing page that gives users a section overview. Sometimes, sites forego the overview page and simply offer links directly to individual pages within a section. This might reduce the number of site pages, but when no page is clearly identified as a sub-topic page, users can misunderstand the site's scope and miss important details, products, and services.

Category pages also help SEO because they're the most prominent landing place when people search for a type of product, service, or information. They're also a way to overcome mistake #2 because they help users bump up a level or two in the site structure if search takes them to an overly detailed leaf node. (Breadcrumbs facilitate users' ability to easily move up the levels.)

4. Extreme Polyhierarchy

Compared to the physical world, one of the online world's benefits is that items can live in multiple locations. Because websites can classify products and other content along multiple dimensions, they help users navigate locally to related items and provide faceted winnowing of a large product space into manageable shortlists that can satisfy the user's main requirements.

This is all good, but polyhierarchy can easily become a crutch. Rather than spend time upfront to develop several intuitive and logical top-level categories, teams rush through this important process, creating numerous weak categories and listing products multiple times within them. The usability impact? Users spend too much time agonizing over top-level categories and then get confused when they see items showing up in multiple places ("are these the same thing?").

With too many classification options and too many structured dimensions, users are forced to think harder to move forward. The profusion of options also makes people question the information scent. This lack of confidence early in the site experience extends throughout their visit and can negatively impact the end result (by thwarting a purchase, for example).

5. Subsites/Microsites Poorly Integrated with Main Site

Abandoned microsites litter the Web as the detritus of old marketing campaigns. A dedicated microsite might have been a good idea back when you launched a new product, but by the next year it's undermining your online strategy and diluting your online presence.

Web design is design for the ages. Think about how anything you do will feel in 5 years.

It's typically best to forego independent microsites and place new information on subsites within the main site. But you still need to integrate these subsites within the overall site structure.

For example, on both microsites and subsites, we often see product-specific pages that fail to link to information about the company or organization the offering. Further, many sites poorly represent their subsites in the main site search — which often ignores microsites altogether.

Navigation Mistakes

6. Invisible Navigation Options

The very worst mistake might be to have no navigation, but that's so rare that I'm not going to discuss it. Still, any feature that users can't see might as well not exist; invisible navigation is thus nearly as bad as no navigation.

Uncovering navigation shouldn't be a major task: Make it permanently visible on the page. Small children like minesweeping (passing the mouse around the screen to see what's hidden), but teenagers don't like it, and adults hate it.

Similarly, you should avoid banner blindness bleed, when either the navigation itself looks like a banner or you place it next to elements that look like advertising and thus users screen it out. Even if it's on the screen, your navigation might as well be invisible if users don't look at it.

7. Uncontrollable Navigation Elements

Typically, anything that moves and bounces detracts from Web usability; when navigation moves while users are trying to find their way, it's deadly. Users should focus on the higher-level problem of where to go, not the lower-level problem of how to manipulate the GUI.

Two common offenders here are overly sensitive rollovers that launch and block content, and elements that move, spin, or rotate of their own accord. Users routinely complain about these types of elements. Designers and programmers who include them in websites severely underestimate the business impact of user frustration.

8. Inconsistent Navigation

Navigation exists to help users, not to be a puzzle in its own right. Users should be able to understand it immediately, and apply that understanding throughout the site. Sadly, lots of sites change their navigation features as users move around. Options come and go, making users feel a loss of control. How do I get that menu choice back? I saw it just a few pages ago.

Although global navigation is not a site's most popular element, its persistence serves a key purpose: it's a beacon that helps users understand both where they are and how they can easily maneuver back to the top of the site if they lose their way.

9. Too Many Navigation Techniques

Our full-day seminar on navigation design covers 25 different website navigation techniques. Each approach has its own usability advantages and potential downsides, leading to the seminar's focus on design trade-offs — that is, when to use what form of navigation.

One thing is clear: each navigation technique has its place on certain types of websites and intranets. But, if you use them all, you don't get the sum of each technique's benefits. You get a mess.

Competing for users' attention. Too many places to look. Overwhelming. Don't.

10. Made-Up Menu Options

In the past, this mistake would have ranked higher, but luckily it's less predominant today than it used to be. Still, too many sites continue to make up their own terminology for labels and other navigation choices.

In addition to perplexing users, made-up navigation terms also hurt search; users can't find something if they don't know what it's called. Even if you provide synonyms, the main navigation terms carry extra SEO weight and it's a waste to optimize for a query that nobody will issue.

Old words are better.When users understand their choices, they're more likely to pick the right one. Speak plainly and speak simply. If users don't understand a menu item, they're less likely to click on it. Paradoxically, companies are particularly prone to making up fancy terms for their newest and most important offerings, thus shooting themselves in the foot with a double-barreled rifle.