App Design, Usability, Accessibility and User Experience

http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-

7 unbreakable laws of user interface design

"7. Law of easing

The user will be more inclined to perform a complex action if it’s broken down into smaller steps."

http://99designs.com/designer-blog/2014/01/15/7-unbreakable-laws-of-user-interface-design/

iPad Design/Usability

http://ipadinteractivestory.blogspot.co.uk/2013/10/ipad-designusability.html

iPad affordances - Interactive magic in every book

I found this article http://www.apple.com/uk/education/ibooks-textbooks/gallery.html relevant in terms of find out the different interactive experience available for the iPad, for example:

Interactive images (Call-outs and pan-and-zoom features),
Interactive Galleries (Swipe a collection, using thumbnails or step through images one at a time)
Scrolling sidebars ("Insert relevant asides and tangential topics into scrolling sidebars. So readers can go with you on a short (or long) detour, without ever leaving the page.")
Pop-over (tap a image to reveal information)
Media (Video and Audio)
3d Images (manipulate 3d objects)
HTML widgets
Multi-touch screen, headset controls, proximity and ambient light sensors, 3-axis accelerometer,digital compass

Sensors

Accelerometer, Geomagnetic, Gyro, RGB light, Barometer, Proximity, Gesture, Temperature & Humid

Grids and Metrics https://developer.android.com/design/style/metrics-grids.html

48dp x 48dp => minimum UI element

8dp gap between UI elements

Device and display https://developer.android.com/design/style/devices-displays.html

System bars

The system bars are screen areas dedicated to the display of notifications, communication of device status, and device navigation.

1.- Status bar

2.- Navigation bar

Notifications

Common App UI

1. Action Bar https://developer.android.com/design/patterns/actionbar.html

The command and control center for your app. The action bar surfaces the most important actions for the current view, and may include simple controls for switching between views.

1.- App icon

2.- View control

3.- Action Button

4.- Action overflow
2. Navigation Drawer https://developer.android.com/design/patterns/navigation-drawer.html

If your app's structure is more complex, the navigation drawer can display the main navigation options. The navigation drawer expands from the left edge of the screen, overlaying the content area but not the action bar.
3. Content Area

The space where the content of your app is displayed.

Themes https://developer.android.com/design/style/themes.html

Dark

Ligth

Touch feedback https://developer.android.com/design/style/touch-feedback.html

Be responsive to touches in a gentle way.

states

Communciation

Boundaries

Icons https://developer.android.com/design/style/iconography.html

Design Tips
Use vector shapes where possibleStart with large art boardsWhen scaling, redraw bitmap layers as neededUse common naming conventions for icon assets

Asset Type	Prefix	Example
Icons	`ic_`	`ic_star.png`
Launcher icons	`ic_launcher`	`ic_launcher_calendar.png`
Menu icons and Action Bar icons	`ic_menu`	`ic_menu_archive.png`
Status bar icons	`ic_stat_notify`	`ic_stat_notify_msg.png`
Tab icons	`ic_tab`	`ic_tab_recent.png`
Dialog icons	`ic_dialog`	`ic_dialog_info.png`

Set up a working space that organizes files by density

art/...
    mdpi/...
        _pre_production/...
            working_file.psd
        finished_asset.png
    hdpi/...
        _pre_production/...
            working_file.psd
        finished_asset.png
    xhdpi/...
        _pre_production/...
            working_file.psd

Launcher: 48X48dp, use a distintic silhoutte, 3D as view from above.

Action Bar: 32X32dp, pictographic, flat not too detailed, colour 333333 (disable 30% opacity/enable 60% opacity) and FFFFFF (disable 30% opacity/enable 80% opacity).