Kyudo

Differences between revisions 1 and 40 (spanning 39 versions)
Revision 1 as of 2009-02-15 23:07:08
Size: 5199
Editor: c-24-11-192-142
Comment:
Revision 40 as of 2009-03-19 18:16:04
Size: 9085
Editor: c-24-11-192-142
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
## page was renamed from Artwork/Incoming/Jaunty/Impression/KyudoPage01
Line 3: Line 4:
<<Navigation(slides)>>
<<Navigation(siblings,1)>>
Line 6: Line 9:
||<style="border:0;">{{attachment:../StickyNote.png}}||<style="border:0;">[[../|Back]]|| ||<style="border:0;">{{attachment:../ImpressionLogo.png}}||
||<style="border:0;font-size:11pt;">[[../|Home Page]]||
Line 8: Line 12:
=== Inspiration - Kyūdō Approach === == Kyūdō Approach ==
Line 14: Line 18:
=== Impression (Kyūdō) Briefing === == Impression - Kyūdō Briefing ==
Line 16: Line 20:
Goals === Top Level ===
Line 18: Line 22:
  1. Be transparent to the applications it supports
  * Use a robust engine with a history of reliability
  * Permit user customization
  * Perform well on a wide variety of hardware
  * Provide a positive user experience
  Enhance the user computing experience by applying balance and harmony to the Gnome Desktop framing applications in such a manner as to permit the eye to focus without distraction on the content displayed. The desire is an optimal result from an optimal process.
Line 24: Line 24:
Target Audience === Target Audience ===
Line 26: Line 26:
  * Users of Ubuntu 9.04   Ubuntu is used by a broad spectrum of individuals, this solution is targeted toward those who spend a significant amount of their professional or personal day at their computer.
Line 28: Line 28:
Attributes of the 9.04 === Assumptions ===

  * '''Some level of customization may be required'''<<BR>><<BR>>
  Although the desire is to craft a very usable solution it is assumed some will need to change the result to better suite theirs needs. Reasons include but are not limited to:
    * Personalization to achieve user satisfaction and enhance usability
    * Satisfy physical differences in vision and/or color perception
    * Compensate for environmental differences and viewing conditions
    * Accommodate hardware differences

<<BR>>
  * '''The Pareto Principle'''<<BR>><<BR>>
  Known as the 80-20 rule, the law of the vital few and the principle of factor sparsity states that, for many events, roughly 80% of the effects come from 20% of the causes. It is assumed at any given moment the desire of the user will be to focused on an area of the screen which is less than the total amount of available.

<<BR>>
  * '''Asthenopia and Poor Design'''<<BR>><<BR>>

  Many computer users experience Asthenopia or visual stress due to:
    1. an increase in the number and complexity of necessary eye movements and focusing skills
    * poor lighting conditions, glare and distracting reflections
    * screen flicker rate
    * extended amount of computer use<<BR>><<BR>>
  It is assumed screens designs which aid the eye in focusing on content [see #1] over extended periods of time will reduce eye fatigue and Asthenopia.

<<BR>>

  * '''Performance Is Built-in'''<<BR>><<BR>>

  It is assumed using a robust theme engine like Murrine will provide acceptable performance metrics.

=== Attributes of the 9.04 ===
Line 34: Line 63:
=== Goal 1 === === Transparency to Applications ===
Line 36: Line 65:
===== Be transparent to applications ===== To be transparent, your eyes should not be drawn to the window frame or the supporting control widgets. Control widgets should be available in a manner which enhances usability and are easily identified as needed.
Line 38: Line 67:
To be transparent, your eyes should not be drawn to the window frame or the supporting control widgets. They should be available and easily identified when needed.

===== The Language of Color =====
==== The Language of Color ====
Line 43: Line 70:

Color is the result of some combination red, blue, or green, and presented using hue, saturation, and value.
Line 67: Line 96:
===== Warm Neutral ===== ==== Warm Neutral ====
Line 74: Line 103:
To warm this color I set the "Hue" to 36 and increased the saturation to "7". To warm this color I set the "Hue" to 36 and increased the saturation to "7". Very Ubuntu! :)
Line 84: Line 113:
Applying a touch of art to the science results in "Impression Gray" which is "Warm" and falls in the middle of the gray scale. Applying a touch of art to the science results in "Ubuntu Gray" which is "Warm" and falls in the middle of the gray scale.
Line 87: Line 116:
||Impression gray||<style="background-color:#cdc7be">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| ||Ubuntu gray||<style="background-color:#cdc7be">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;||
Line 89: Line 118:
===== Dancing Around the 50 yard line ===== ==== Dancing Around the 50 Yard Line ====
Line 91: Line 120:
Putting the power of the theme engine "Share" function to work the desired outcome becomes a series of ''analogous colors''. Putting the power of the theme engine '''shade''' function to work the desired outcome becomes a series of ''analogous colors''.
Line 100: Line 129:
==== Framing The Presentation ====
Line 101: Line 131:
=== Attachments === ||<style="border:0;">{{attachment:Artwork/Incoming/Jaunty/Impression/Metacity/UbuntuMetacityMockupSolid.png}}||
||<style="border:0;text-align:center;">~-Metacity Controls - Default & Prelight-~||

The Ubuntu logo is based on circles and the desire is to leverage the strengths of its design in Metacity. Staying true to form the default controls are displayed muted. As the mouse hovers above they change to the prelight state, shrinking slightly when active to present an illusion of a pressed button.

=== Usability Test ===

||<style="border:0;">{{attachment:OpenOfficeExample.png}}||
||<style="border:0;text-align:center;">~-OOO - Example of Usability-~||

The following image is a screen shot of Open Office displaying text from the GNU License. Realizing the web is a very un-controlled test environment, the desire is your eyes are naturally drawn to the text and white space of the document.

=== Alternate Approaches ===

==== KDE ====

||<style="border:0;">{{attachment:KDE_4_640.png}}||
||<style="border:0;text-align:center;">~-KDE 4.2 Desktop-~||

Many consider KDE the gold standard in usability. IMO the design of the current KDE desktop supports many of Kyudo concepts presented here.

==== Apple OSX ====

||<style="border:0;">{{attachment:Leopard_Desktop_640.png}}||
||<style="border:0;text-align:center;">~-OSX Leopard 10.5 Desktop-~||

The success of OSX is a testimonial of a well defined desktop.

==== Windows Vista ====

||<style="border:0;">{{attachment:Windows_Aero_640.png}}||
||<style="border:0;text-align:center;">~-Microsoft Vista Desktop-~||

The poor adoption of Vista speaks volumes about the usability of the desktop as many individuals who depend upon Windows prefer the older XP look.

== Attachments ==
Line 109: Line 174:
=== Comments === == Comments ==

Kyūdō Approach

Kyūdō is the Japanese art of archery. From it we derive the thought that an optimal result follows from an optimal process.

The current goal of Project Kyūdō is to create an optimal theme for the Ubuntu GNU/Linux distribution. In the long run, the theme should be the central piece in an effort to achieve an optimal presentation.

Due to this being a community effort, we don't have the decision power to put things into place. We will offer an alternative and intend to convince by delivering high quality work resulting from a traceable process.

Guide lines

Impression - Kyūdō Briefing

Top Level

  • Enhance the user computing experience by applying balance and harmony to the Gnome Desktop framing applications in such a manner as to permit the eye to focus without distraction on the content displayed. The desire is an optimal result from an optimal process.

Target Audience

  • Ubuntu is used by a broad spectrum of individuals, this solution is targeted toward those who spend a significant amount of their professional or personal day at their computer.

Assumptions

  • Some level of customization may be required

    Although the desire is to craft a very usable solution it is assumed some will need to change the result to better suite theirs needs. Reasons include but are not limited to:

    • Personalization to achieve user satisfaction and enhance usability
    • Satisfy physical differences in vision and/or color perception
    • Compensate for environmental differences and viewing conditions
    • Accommodate hardware differences


  • The Pareto Principle

    Known as the 80-20 rule, the law of the vital few and the principle of factor sparsity states that, for many events, roughly 80% of the effects come from 20% of the causes. It is assumed at any given moment the desire of the user will be to focused on an area of the screen which is less than the total amount of available.


  • Asthenopia and Poor Design

    Many computer users experience Asthenopia or visual stress due to:

    1. an increase in the number and complexity of necessary eye movements and focusing skills
    2. poor lighting conditions, glare and distracting reflections
    3. screen flicker rate
    4. extended amount of computer use

    It is assumed screens designs which aid the eye in focusing on content [see #1] over extended periods of time will reduce eye fatigue and Asthenopia.


  • Performance Is Built-in

    It is assumed using a robust theme engine like Murrine will provide acceptable performance metrics.

Attributes of the 9.04

  • Faster boot time
  • New notification system
  • Online services

Transparency to Applications

To be transparent, your eyes should not be drawn to the window frame or the supporting control widgets. Control widgets should be available in a manner which enhances usability and are easily identified as needed.

The Language of Color

HueSatValue.png

Color is the result of some combination red, blue, or green, and presented using hue, saturation, and value.

Hue

Hue identifies the general family of a color, such as red, yellow, blue or green. The traditional color wheel is made up of twelve color families: red, red-orange, orange, yellow-range, yellow, yellow-green, green, blue-green, blue-red-violet, violet and blue-violet.

Saturation

Saturation is how pure the color is. A fully saturated color is the truest version of that color. Primary colors (red, yellow, and blue) are "true", so they are also fully saturated.

Value

Value describes how light or dark a specific color may be.

ColorPicker.png

Gnome Color Wheel

Complementary Colors

Colors on the opposite side of a color wheel are called complementary colors. In combination, these create striking contrasts. For less contrast, choose colors next to each other on the color wheel, which are called analogous colors. Choosing colors of different tints within one color family creates a monochromatic color scheme.

Warm or Cool

Different colors in the same family may be described as being "warm" or "cool." Colors with yellow undertones will seem warmer, while the same color with blue or red undertones will appear cool. Cool colors — blue, green, violet — invite relaxation and thought. Warm colors — red, orange, yellow — encourage conversation and play. Ubuntu colors are warm.

Warm Neutral

If you take the color white and divide it by the color black the quotient is 50% gray or "#808080". Realizing gray is displayed "cool", the task is to identify it's warm counter part.

Color808080.png

50% Gray

To warm this color I set the "Hue" to 36 and increased the saturation to "7". Very Ubuntu! Smile :)

Color807C77.png

Warmed 50% Gray

As you can see the black over powers the tint and demands the brightness be encreased.

ColorCDC7BE.png

Lighten Warmed 50% Gray

Applying a touch of art to the science results in "Ubuntu Gray" which is "Warm" and falls in the middle of the gray scale.

50% gray

            

Ubuntu gray

            

Dancing Around the 50 Yard Line

Putting the power of the theme engine shade function to work the desired outcome becomes a series of analogous colors.

Buttons are colored or shaded as follows:

  • bg[NORMAL] = shade (1.2, @bg_color) # Default @ 20% brighter

  • bg[PRELIGHT] = shade (1.1, @bg_color) # Prelight @ 10% brighter

  • bg[ACTIVE] = shade (1.0, @bg_color) # Active @ default brightness

  • bg[INSENSITIVE] = shade (1.1, @bg_color) # Dimmed @ 10% brighter

Framing The Presentation

Artwork/Incoming/Jaunty/Impression/Metacity/UbuntuMetacityMockupSolid.png

Metacity Controls - Default & Prelight

The Ubuntu logo is based on circles and the desire is to leverage the strengths of its design in Metacity. Staying true to form the default controls are displayed muted. As the mouse hovers above they change to the prelight state, shrinking slightly when active to present an illusion of a pressed button.

Usability Test

OpenOfficeExample.png

OOO - Example of Usability

The following image is a screen shot of Open Office displaying text from the GNU License. Realizing the web is a very un-controlled test environment, the desire is your eyes are naturally drawn to the text and white space of the document.

Alternate Approaches

KDE

KDE_4_640.png

KDE 4.2 Desktop

Many consider KDE the gold standard in usability. IMO the design of the current KDE desktop supports many of Kyudo concepts presented here.

Apple OSX

Leopard_Desktop_640.png

OSX Leopard 10.5 Desktop

The success of OSX is a testimonial of a well defined desktop.

Windows Vista

Windows_Aero_640.png

Microsoft Vista Desktop

The poor adoption of Vista speaks volumes about the usability of the desktop as many individuals who depend upon Windows prefer the older XP look.

Attachments

  • [get | view] (2009-03-01 03:40:07, 37.4 KB) [[attachment:Color807C77.png]]
  • [get | view] (2009-03-01 03:40:14, 35.2 KB) [[attachment:Color808080.png]]
  • [get | view] (2009-03-01 03:40:23, 37.4 KB) [[attachment:ColorCDC7BE.png]]
  • [get | view] (2009-03-01 03:32:41, 34.5 KB) [[attachment:ColorPicker.png]]
  • [get | view] (2009-02-15 23:12:25, 41.9 KB) [[attachment:HueSatValue.png]]
  • [get | view] (2009-02-18 23:39:15, 164.6 KB) [[attachment:KDE_4_640.png]]
  • [get | view] (2009-02-18 23:30:41, 276.3 KB) [[attachment:Leopard_Desktop_640.png]]
  • [get | view] (2009-02-27 13:22:35, 256.1 KB) [[attachment:OpenOfficeExample.png]]
  • [get | view] (2009-02-19 11:13:03, 16.2 KB) [[attachment:UbuntuMetacity.png]]
  • [get | view] (2009-02-18 23:31:13, 263.3 KB) [[attachment:Windows_Aero_640.png]]
 All files | Selected Files: delete move to page


CategoryArtwork

Comments

Your comments here.


Artwork/Incoming/Jaunty/Impression/Kyudo (last edited 2009-04-08 12:48:16 by 204)