Design Principles

Written By userstyles on Friday, June 15, 2012 | 12:45 AM

These design principles were developed by and for the Android User Experience Team to keep users' best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate with purpose.

Enchant Me

Delight me in surprising ways

A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.

Real objects are more fun than buttons and menus

Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

Let me make it mine

People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.

Get to know me

Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

Simplify My Life

Keep it brief

Use short phrases with simple words. People are likely to skip sentences if they're long.

Pictures are faster than words

Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.

Decide for me but let me have the final say

Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.

Only show what I need when I need it

People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.

I should always know where I am

Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.

Never lose my stuff

Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.

If it looks the same, it should act the same

Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.

Only interrupt me if it's important

Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.

Make Me Amazing

Give me tricks that work everywhere

People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture may be a good navigational shortcut.

It's not my fault

Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better.

Sprinkle encouragement

Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.

Do the heavy lifting for me

Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps.

Make important things fast

Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.

Android's system UI provides the framework on top of which you build your app. Important aspects include the Home screen experience, global device nav

Android's system UI provides the framework on top of which you build your app. Important aspects include the Home screen experience, global device navigation, and notifications.

Your app will play an important part in keeping the overall Android experience consistent and enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal in your app.

Read on for a quick overview of the most important aspects of the Android user interface.

Home, All Apps, and Recents

Home screen

Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between different home screen panels by swiping left and right.

The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view regardless of which panel is currently showing.

Access the entire collection of apps and widgets by touching the All Apps button at the center of the Favorites Tray.

All apps screen

The All Apps screen lets you browse the entire set of apps and widgets that are installed on your device.

Users can drag an app or widget icon from the All Apps screen and place it in any empty location on any Home screen.

Recents screen

Recents provides an efficient way of switching between recently used applications. It provides a clear navigation path between multiple ongoing tasks.

The Recents button at the right side of the navigation bar displays the apps that the user has interacted with most recently. They are organized in reverse chronological order with the most recently used app at the bottom.

Switch to an app by touching it. Remove an item by swiping left or right.

System Bars

The system bars are screen areas dedicated to the display of notifications, communication of device status, and device navigation. Typically the system bars are displayed concurrently with your app. Apps that display immersive content, such as movies or images, can temporarily hide the system bars to allow the user to enjoy full screen content without distraction.

  1. Status Bar

    Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right. Swipe down from the status bar to show notification details.

  2. Navigation Bar

    New for phones in Android 4.0, the navigation bar is present only on devices that don't have the traditional hardware keys. It houses the device navigation controls Back, Home, and Recents, and also displays a menu for apps written for Android 2.3 or earlier.

  3. Combined Bar

    On tablet form factors the status and navigation bars are combined into a single bar at the bottom of the screen.

Notifications

Notifications are brief messages that users can access at any time from the status bar. They provide updates, reminders, or information that's important, but not critical enough to warrant interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a notification opens the associated app. More on Notifications

Most notifications have a one-line title and a one-line message. The recommended layout for a notification includes two lines. If necessary, you can add a third line. Timestamps are optional.

Swiping a notification right or left removes it from the notification drawer.

Common App UI

A typical Android app consists of action bars and the app content area.

  1. Main Action Bar

    The command and control center for your app. The main action bar includes elements for navigating your app's hierarchy and views, and also surfaces the most important actions.

    More on the Action Bar

  2. View Control

    Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app.

  3. Content Area

    The space where the content of your app is displayed.

  4. Split Action Bar

    Split action bars provide a way to distribute actions across additional bars located below the main action bar or at the bottom of the screen. In this example, a split action bar moves important actions that won't fit in the main bar to the bottom.

New Guides for App Designers!

New Guides for App Designers!

The Android UX team has put together a set of guidelines for the interaction and visual design of Android applications. The new collection provides an overview of Android styles, design patterns, building blocks for exceptional Android designs, and more.

Android Design

Over time, the documents below will be deprecated as more design information is published at the new location.

Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto, designed for high-resolution displays. Other big changes include framework-level action bars on phones and support for new phones without physical buttons.

We focused the design work with three overarching goals for our core apps and the system at large. As you design apps to work with Android, consider these goals:

Style Google AuroraVista Cidcarlo84

Written By userstyles on Friday, June 8, 2012 | 12:54 AM

More screenshots:
  • Image without the style
Author cidcarlo84
Created Aug 22, 2009
Updated Aug 22, 2009
Installs (this week) 2,811
Installs (total) 145,706
Average rating OK

User Stylish For cuztomize Firefox And Facebook Background




Restyle the web with User Stylish, a user styles manager with easy way. User Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even customize Firefox and other programs themselves with fast,easy and simple.
Get add Ons with Copy and paste url Below
https://addons.mozilla.org/en-US/firefox/addon/2108?src=api
Use User style for cuztomize Mozilla Firefox,Change facebook background with easyly

About this Add-on

Written By userstyles on Tuesday, May 15, 2012 | 3:07 AM

About this Add-on

A restart-less solution to manage custom User Styles in Firefox.
Add, edit, customize and choose from thousands of user styles available on net or even make your own.

Main features of User Styles Manager are :
  • Lightweight and restarless user styles manager
  • Edit an existing User Styles, Create a brand new User Style or choose an existing Style sheet from your Hard Disk and add it to Firefox
  • Editing, deleting of multiple Styles as once
  • Syntax highlighting, quick preview of Styles being edited and a syntax validator to check and display errors in the syntax of css.
  • Menu entry in Tools Menu and Apps Menu along with a toolbar button and a Customizable Shortcut Key to quickly access Options or to enable/disable any style
  • Select any css code on a webpage and add it as a style sheet using the context menu entry
  • Styles are automatically sorted based on the area they are applied on.
  • Styles are regularly backed up and used in case the original file is somehow deleted
  • A very powerful Style Editor with the following features:
    • CSS Auto-completer:CSS properties are automatically suggested as you type in a dropdown list
    • Color Previewer: Hover over any color code to quickly preview the color along with the transparency level
    • Image Previewer: Double click over the base64 image code or the link to the image to quickly preview the image
    • Color Picker: Easily pick and edit any color using the built in Color Picker. Start typing rgb( and the color picker will pop up for your help, or double click over any color code.
    • Minified styles can be made beautiful using the Beautify CSS option in the Edit Menu of the Editor.
    • Any style can be quickly previewed to see the result
    • Feature complete Find and Replace with support for Regular Expressions

Three userstyles included by default :
Please note while the above stylesheets are included by default, this add-on is about maintaining styles rather than the above 3 styles, and each of the above style can be deleted, edited or disabled.

Features being developed:
  • On adding files in User Styles folder in the Profile Directory, the addon will automatically install them on the next Firefox/addon's Restart, or explicitly on clicking a button.
  • Support , so as to download Style Sheets directly
  • support for updating of Style Sheets from userstyles.org (depends on the above feature)

Report issues or feature requests.

Ditched the ancient Stylish for USM Rated 5 out of 5 stars

I hated stylish when they redid their UI in version 1 and integrated with the horrible xul addons menu. Infact, I changed the unique ID in stylish 0.59 so that Firefox wouldn't bug me with updating stylish to version 1. I stayed with Firefox 3.6 as long as I could because I'm not advance enough to make stylish 0.59 to be compatible with Firefox 4+. Now that I started using Aurora, I couldn't avoid the new stylish ui.

But now that I just discovered this amazing stylish replacement, I will use this permanently. Even though it it's not compatible with the userscript.org website just yet. I'm sure the talented dev will figure it out eventually.

And did I mention the editor in this addon is miles ahead of stylish's ancient non-color coded? USM has other freebees too, like image preview, color picker, etc.

Very promising Rated 5 out of 5 stars

edit: This became a five star add-on with all reasons for being four (and a half:)) star being fixed and improved with version 0.9. USM is the new Stylish: Thanks a lot to the developer:)
==================================================================================
This is a nice addon and a lightweight alternative to Stylish. Not quite there yet, but keeps getting better, very promising. Thank you:)
In the latest version (v.0.8), the chevron of the toolbar icon (the little triangle to display options) is changed and put under the icon -- it was on the side of the icon. Please bring the old look back -chevron to the side- as the chevron adds an unnecessary height to the add-on toolbar (aka status bar) and also looks really bad - icon not being in line with the other icons, etc. Also, the toolbar icon constantly resets its location after firefox restarts.
Thanks again :)

Reply to the developer:
Dear Developer, with your continuous support you are already a 5+ star developer :) the four stars were only for the extension as of v. 0.8, mainly due to the interface issues and as you pointed out aptly, better integration with userstyles.org - I find this add-on really promising and a better future replacement for stylish, as it seems it is aspiring to be as such, based on your comments. As it is, ths add-on is already very useful, and promise 5 stars once this ui issue is fixed (this is not an accessibility issue though, I love to see the addons I like and that have nice icons on the toolbar if I can). For the add-on toolbar issue, however, I think it is more likely to be caused by one of your other excellent add-ons (location bar enhancer), sorry for confusing it here - I made a mention here now just FYI.

Adding User Styles

Written By userstyles on Saturday, March 10, 2012 | 8:04 AM

S
tyles can be added to some browsers with a so-called user style-sheet, and Microsoft Internet Explorer has permitted their addition for a number of years. Despite this lengthy period of time, there have been few additions to the help files on the subject. While the notes show how to add a user style-sheet, nothing is done supply one for use. By now, there should be a very large list of accessibility and other user style-sheets available to users. Alas, this is not so.. With this mind, these notes explain what is involved and lists a starting style-sheet to use for customizing the user view.

The CSS Styles Cascade


A web-page consists of text but also contains markers called element-tags, or just tags, to tell the browser how each part of the page is to be styled. The browser works its way through all of these tags and uses them to find styles that might apply to them. Typical tags include, for example, paragraph tags <p> for every individual paragraph, division tags <div> to make box-shapes, and even tags for tables <tables>. There are hundreds of tags on each web-page and dozens of different types available for an author to use.
The styles used to format the page's elements can be found in several places. They include both those within the HTML document itself and in the various style sheets; the default styles of the browser and other option settings can also apply. At times, these sources appear to exist in a simple hierarchy, however, it is soon apparent that a more complex arrangement applies. See the adjacent graphic for a depiction of the cascade as it applies to practical cases. The function of the cascade is to resolve the various competing style declarations to a point where a format can be decided for a particular tag. When a user intends a style to be applied from his own style sheet, he will at times find that a different one has been applied. At such times he will need to know a little more than usual to resolve the matter.
CascadeOfStyles5.JPG
Figure
1. A CSS styles cascade. Notice that the user's style declarations have
the highest precedence provided that they carry an !Important marking.
The decision-making process groups the style sources into three main categories, or origins; author style declarations, user declarations, and default style declarations. Author declarations, in turn are comprised of in-line styles, document head styles, and linked style-sheets. Since CSS2, users have been able to gain a position of highest priority for their own style-sheet declarations, using the !Important keyword, and the introduction of this marking was accompanied by a rearrangement of their precedence. The main groupings at present are simply:
  1. The user's !Important style declarations. These style expressions consist of all user style-sheet entries with the !Important keyword appended to them.
  2. The author's !Important style declarations. The three style sources attributable to the author are in the first instance treated as a single group. These are; in-line styles, document head styles, and linked style-sheets. Again, this set consists only of those declarations where the !Important keyword is added.
  3. The author's Normal style declarations. Those in the author's set without an !Important marking.
  4. The user's Normal style declarations. Those in the user style-sheet without an !Important marking.
  5. The Browser default styles. Styles in the User Agent (UA) Style Sheet [1] and the selectable default settings of the browser..
In the above hierarchy, the user's styles with the !Important keyword marking are given the highest priority of all, and the choice of styles will only revert to a lower level if the user's style-sheet has neglected to make an appropriate style entry, or neglected to mark it as !Important. A similar reasoning applies throughout all of the levels, for every tag's styles. In deciding which styles to apply, the browser also takes into account the specificity of each declaration. Specificity is the extent to which a declaration can be said to apply directly to a particular tag. Within each of the main levels, the browser sorts the styles for specificity, assigning a numerical value to each in order to decide which of the many has priority. A more specific style has priority over one that is more general. The higher the number, the higher the specificity and its priority. It is the style with highest specificity within a given level that represents it in the cascade hierarchy, but having a higher specificity alone does not permit the style to impose its styles beyond its level.
In deciding specificity, the browser considers several factors that apply to the style declaration; that is, the style-sheet entry that defines the style; it counts the id's, classes, tags, pseudo-classes, attributes, and pseudo-elements. Another way to think of the !Important marking is to treat it as an extremely high specificity value, one that exceeds others by say, a factor of ten. A detailed description of specificity and the cascade can be found at W3:The Cascade  , and a simple method to use in estimating it, with worked examples, is also given in the sections below.

There is a further point that needs explained. The way that the user sets his options for the browser can modify how the cascade works; for example, the user can elect to ignore certain author styles altogether. Because the user's style sheet has a comparatively low priority in the cascade, there will be many times when their user-styles cannot assert themselves. (See the adjacent graphic). To overcome this situation (for the fonts), the browser options allow the user to artificially override some of the author's style settings.

 Author Styles Override

Without even making your user style-sheet, there are a number of author styles that can be changed with settings in the browser's options. Note that the styles given by the author are the in-line styles, the head styles, and the linked external style-sheets. Not all styles can be over-ridden, but some quite fundamental ones can. These are:
  • Author's page colors. Selecting this removes all of the author's page colors including font-color.
  • Author's font styles. Selecting this removes all of the author's font-family choices.
  • Author's font sizes. Selecting this removes all of the author's font-size choices, both absolute and relative.
Each or all of the items on the above list can be selected or deselected to suit the user's intentions, and can also be used in conjunction with a user style-sheet. To set the override features proceed as follows:
  • Open the Tools > Internet Options dialog.
  • On the General tab select Accessibility.
  • On the Formatting section select or deselect the necessary check boxes.
  • Decide whether the user style sheet or the default styles of the browser are to be used to replace the overridden styles, and select or deselect the box marked Format documents using my style sheet accordingly. If the user style-sheet is not selected for use, then the default colors, fonts, and sizes will replace them, otherwise the user style-sheet will be considered.

User Style Sheets for Internet Explorer