Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

ผนวกเดช สุวรรณทัต (Mock)

Kasetsart University Sriracha Campus

Human-Computer Interactions 22 April 2016Lecture 12

https://www.signingsavvy.com http://www.byronknoll.com/braille.html https://youtu.be/AYpTqEe46jI http://www.wired.com/2015/01/stephen-hawking-black-holes-hed-good-bond-villain/ https://www.ted.com/talks/peter_diamandis_on_stephen_hawking_in_zero_g?language=en#t-223260 http://www.clipartbest.com/new-baby-clipart

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

ผนวกเดช สุวรรณทัต (Mock)

Kasetsart University Sriracha Campus

Human-Computer Interactions 22 April 2016Lecture 12

การออกแบบเพื่อผู้พิการ?

https://www.signingsavvy.com http://www.byronknoll.com/braille.html https://youtu.be/AYpTqEe46jI http://www.wired.com/2015/01/stephen-hawking-black-holes-hed-good-bond-villain/ https://www.ted.com/talks/peter_diamandis_on_stephen_hawking_in_zero_g?language=en#t-223260 http://www.clipartbest.com/new-baby-clipart

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

ผนวกเดช สุวรรณทัต (Mock)

Kasetsart University Sriracha Campus

Human-Computer Interactions 22 April 2016Lecture 12

การออกแบบเพื่อมวลมหาประชาชน

https://www.signingsavvy.com http://www.byronknoll.com/braille.html https://youtu.be/AYpTqEe46jI http://www.wired.com/2015/01/stephen-hawking-black-holes-hed-good-bond-villain/ https://www.ted.com/talks/peter_diamandis_on_stephen_hawking_in_zero_g?language=en#t-223260 http://www.clipartbest.com/new-baby-clipart

(ไม่มีนัยทางการเมือง)

http://www.artbeyondsight.org/dic/module-4-museum-access-accessible-physical-space/universal-design-principles-and-guidelines/ https://www.ncsu.edu/ncsu/design/cud/about_us/usronmacespeech.htm

HCI - Lecture 12 - Universal DesignUniversal Design → Meaning

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

Ronald Mace

คือ การออกแบบเพื่อผู้พิการ (?) • Design for the Disabled • Design for People with Disabilities • Design for the Handicapped

หรือว่ามากกว่านั้น?• Accessibility

ความเข้าถึงได้ • Assistive Technology

เทคโนโลยีช่วยเหลือ • Barrier-free Design

การออกแบบให้ไร้อุปสรรค • Universal Design

การออกแบบเพื่อคนทุกคน

การออกแบบเพื่อ

มวลมหาประชาชน

http://www.artbeyondsight.org/dic/module-4-museum-access-accessible-physical-space/universal-design-principles-and-guidelines/ https://www.ncsu.edu/ncsu/design/cud/about_us/usronmacespeech.htm

HCI - Lecture 12 - Universal DesignUniversal Design → Meaning

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

Ronald Mace

การออกแบบเพื่อ

คนทุกคน

คือ การออกแบบเพื่อผู้พิการ (?) • Design for the Disabled • Design for People with Disabilities • Design for the Handicapped

หรือว่ามากกว่านั้น?• Accessibility

ความเข้าถึงได้ • Assistive Technology

เทคโนโลยีช่วยเหลือ • Barrier-free Design

การออกแบบให้ไร้อุปสรรค • Universal Design

การออกแบบเพื่อคนทุกคน

การออกแบบเพื่อ

คนทุกคน

http://www.slideshare.net/flamingonm/universal-architectural-design

HCI - Lecture 12 - Universal DesignUniversal Design → Why

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

ผู้สูงอายุมีจำนวนมากขึ้น

อัตราการรอดชีวิตจาก อุบัติเหตุ/ความเจ็บป่วย มากขึ้น → ผู้พิการมากขึ้น

ผู้คนอายุยืนขึ้น

ทำไม? ทำไม? ทำไม?

Ronald Mace

การออกแบบเพื่อ

คนทุกคน

https://www.pinterest.com/ocramarco/ux-dt/

HCI - Lecture 12 - Universal DesignUniversal Design → Definition

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

Universal Design คือการออกแบบเพื่อคนทุกคนไม่ว่าเขาจะพิการหรือไม่ หรือมีสุขภาพ เพศ วัย การศึกษาเป็นอย่างไร ถนัดซ้ายหรือขวา มีลูกอ่อน แบกของหนัก ‘รมณ์บ่จอย ทะเลาะกับแฟนฯ เหนื่อยกาย เหนื่อยใจ ฯลฯ

Ronald Mace

การออกแบบเพื่อ

คนทุกคน

https://www.pinterest.com/ocramarco/ux-dt/

HCI - Lecture 12 - Universal DesignUniversal Design → Definition

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

Ronald Mace

Universal Design คือการออกแบบผลิตภัณฑ์และสิ่งแวดล้อมเพื่อให้ทุกคนใช้งานได้มากที่สุดเท่าที่จะเป็นไปได้ โดยไม่ต้องดัดแปลงหรือออกแบบเป็นกรณีพิเศษ

การออกแบบเพื่อ

คนทุกคน

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.5077&rep=rep1&type=pdf

HCI - Lecture 12 - Universal DesignUniversal Design → UD Pyramid

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

A: ออกแบบให้คนปกติเท่านั้น

การออกแบบเพื่อ

คนทุกคน

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.5077&rep=rep1&type=pdf

HCI - Lecture 12 - Universal Design

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

B: ออกแบบให้คนปกติก่อน แล้วค่อยดัดแปลงให้คนพิการ

Universal Design → UD Pyramid

การออกแบบเพื่อ

คนทุกคน

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.5077&rep=rep1&type=pdf

HCI - Lecture 12 - Universal Design

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

C: ออกแบบให้คนพิการประเภทหนึ่งแล้วค่อยดัดแปลง

Universal Design → UD Pyramid

การออกแบบเพื่อ

คนทุกคน

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.5077&rep=rep1&type=pdf

HCI - Lecture 12 - Universal Design

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

D: ออกแบบให้ทุกคนไปพร้อมๆ กัน

Universal Design → UD Pyramid

การออกแบบเพื่อ

คนทุกคน

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.5077&rep=rep1&type=pdf http://www.musingsofarabbit.com/line-stickers-craze/

HCI - Lecture 12 - Universal Design

Universal Design ⠠⠥⠝⠊⠧⠑⠗⠎⠁⠇ ⠠⠙⠑⠎⠊⠛⠝

A: ออกแบบให้คนปกติเท่านั้น

B: ออกแบบให้คนปกติก่อน แล้วค่อยดัดแปลงให้คนพิการ

C: ออกแบบให้คนพิการประเภทหนึ่งแล้วค่อยดัดแปลง

D: ออกแบบให้ทุกคนไปพร้อมๆ กัน

Don’t forget us!

Universal Design → UD Pyramid

https://www.ncsu.edu/ncsu/design/cud/

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles

https://www.ncsu.edu/ncsu/design/cud/

HCI - Lecture 12 - Universal DesignUniversal Design → Activity

กิจกรรม:ตัวอย่างที่ดีมีค่ากว่าคำสอน

https://www.ncsu.edu/ncsu/design/cud/

HCI - Lecture 12 - Universal Design

กิจกรรม:ตัวอย่างที่เลวมีค่ากว่าคำสอน

Universal Design → Activity

http://musica-music.co.uk/using-music-as-part-of-your-daily-care-routine/ http://cliparwolf.com/files/1/snake-clipart-05.html http://www.clipartpanda.com/categories/orange-fish-clipart

HCI - Lecture 12 - Universal Design

กิจกรรม:ตัวอย่างที่เลวมีค่ากว่าคำสอน

1. แบ่งกลุ่มเป็น 7 กลุ่ม 2. แต่ละกลุ่มจะได้เพลงหนึ่งเพลง

(มารับเนื้อเพลงจากอาจารย์) 3. แปลเนื้อเพลงเป็นภาษาอังกฤษ

(เขียนใส่กระดาษ A4) 4. ผลัดกันร้องเพลงหน้าห้อง (in English!) 5. เพื่อนๆ ช่วยกันโหวตกลุ่มที่ชอบที่สุด

(ห้ามโหวตกลุ่มตัวเอง)

Universal Design → Activity

http://musica-music.co.uk/using-music-as-part-of-your-daily-care-routine/ http://cliparwolf.com/files/1/snake-clipart-05.html http://www.clipartpanda.com/categories/orange-fish-clipart

HCI - Lecture 12 - Universal Design

ตัวอย่าง: การแปลแบบ

Universal Design → Activity

Adapted from:https://www.ncsu.edu/ncsu/design/cud/

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles

http://musica-music.co.uk/using-music-as-part-of-your-daily-care-routine/ http://cliparwolf.com/files/1/snake-clipart-05.html http://www.clipartpanda.com/categories/orange-fish-clipart

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles

Adapted from:

http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/7-Principals-.pdf https://twitter.com/boyofheaven/status/645851929256439808

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #1: Equitable Use

• พยายามออกแบบให้ทุกคนใช้สิ่งเดียวกันได้ (ไม่ต้องแบ่งแยกถ้าไม่จำเป็น)

• ถ้าแบ่งแยก ต้องเท่าเทียม • ให้เกียรติผู้ใช้ อย่าใช้ถ้อยคำดูหมิ่น • รักษาความเป็นส่วนตัวของทุกคน • ออกแบบให้สวยงามน่าใช้เท่ากันทุกคน

Adapted from:

Adapted from:http://universaldesign.ie/technology-ict/web-accessibility-techniques/developer-s-introduction-and-index/images-section-6/dev-6-1-all-images-must-have-alt-text-to-convey-equivalent-information.html http://accessibility.hhs.texas.gov/cbt/Accessible_Office_WBT/3.html

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #1: Equitable Use

Adapted from:http://www.eliteownage.com/mouseguide.html http://www.bbc.co.uk/accessibility/guides/keyboard_mouse/computer/win/xp/ http://forum.canardpc.com/archive/index.php/t-42713-p-23.html?s=7d92d3fc314b784cb31047ebdff9c79b https://en.wikipedia.org/wiki/Mouse_keys

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #2: Flexibility in Use

• ให้ทางเลือกในการใช้งานตามสะดวก (เอาที่พี่สบายใจ)

• คำนึงถึงคนถนัดซ้าย-ขวา • ช่วยให้ผู้ใช้สั่งการได้อย่างแม่นยำ • ปรับความเร็วได้ตามต้องการ

Adapted from:http://www.engadget.com/products/amazon/kindle/2/specs/ http://9to5mac.com/2015/05/14/assistivetouch-broken-home-button/

HCI - Lecture 12 - Universal Design

Assistive Touch

Universal Design → The 7 Principles → #2: Flexibility in Use

http://www.engadget.com/products/amazon/kindle/2/specs/ http://9to5mac.com/2015/05/14/assistivetouch-broken-home-button/ https://www.riso.co.jp/english/product/ez/5series/

HCI - Lecture 12 - Universal Design

Adapted from:

• อย่าทำเรื่องง่ายให้ยาก • ทำตามที่ผู้ใช้คาดหวัง

(สัญชาตญาณบอก) • คำนึงถึงคนที่อ่านไม่ออก อ่านช้า หรือใช้ภาษาอื่น

• วางข้อมูลตามลำดับความสำคัญ • ช่วยถามและแจ้งเตือนผู้ใช้ระหว่างและหลังปฏิบัติงาน

Universal Design → The 7 Principles → #3: Simple and Intuitive Use

http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/7-Principals-.pdf

HCI - Lecture 12 - Universal Design

Adapted from:

• สื่อสารซ้ำซ้อนหลายทาง (ภาพ, เสียง, ข้อความ, สัมผัส)

• ข้อมูลสำคัญต้อง “อ่านง่าย” • ทำองค์ประกอบต่างๆ ให้อ้างถึงได้ง่าย (ปุ่มเขียว ป้ายกลม ตัวเลขที่มุมบนขวา)

• ทำระบบให้ compatible กับเครื่องมืออื่นๆ

Universal Design → The 7 Principles → #4: Perceptible Information

http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/7-Principals-.pdf http://www.villagervoice.com/?p=1720 http://telestreamblog.telestream.net/2014/06/closed-captioning-history-new-laws/

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #4: Perceptible Information

Adapted from:

http://font.downloadatoz.com/free,14182,illegible-fonts.html http://my.dek-d.com/tai-y/writer/viewlongc.php?id=969138&chapter=13

HCI - Lecture 12 - Universal Design

Adapted from:

อ่านยากจุงเบย

Universal Design → The 7 Principles → #4: Perceptible Information

http://carkeysanantoniotx.com http://osxdaily.com/2013/09/06/use-undo-redo-ipad/ http://densorobotics.com/content/user_manuals/19/001684.html

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #5: Tolerance for Error

Adapted from:

• จัดวางองค์ประกอบให้ปลอดภัย(ปุ่มใช้บ่อยควรกดง่าย ปุ่มอันตรายควรซ่อนไว้)

• แจ้งเตือนอันตราย • ใช้ Jidoka, Poka Yoke กันความผิดพลาด • มีวิธีเช็คว่าผู้ใช้ยังตื่นอยู่ (ในงานอันตราย) • ผลจากความผิดพลาดต้องไม่บานปลาย

(พลาดแล้วต้องไม่พัง พังแล้วต้องไม่ตาย ตายแล้วต้องไม่บึ้ม)

http://mentalfloss.com/article/30471/what-happens-if-you-drive-gas-pump-nozzle-still-car

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #5: Tolerance for Error

Adapted from:

http://blog.tbhcreative.com/2013/04/form-validation-quick-win-for-website.html

HCI - Lecture 12 - Universal Design

Adapted from:

Universal Design → The 7 Principles → #5: Tolerance for Error

http://www.walmart.com/ip/Floral-Glass-Shade-Touch-Lamp/17375777 http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/7-Principals-.pdf

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #6: Low Physical Effort

Adapted from:

• สามารถใช้งานได้ในอิริยาบทที่เหมะสม(อย่าเล่นท่ายาก)

• ไม่ต้องออกแรงมาก • ไม่ต้องออกแรงนาน • ไม่ต้องทำซ้ำๆ

https://www.carthrottle.com/post/why-the-days-of-using-a-key-to-start-your-car-are-numbered/ https://en.wikipedia.org/wiki/Nintendo_Entertainment_System http://www.ebay.com/sch/Buffalo-Video-Game-Controller/117042/bn_222653/i.html

HCI - Lecture 12 - Universal Design

Adapted from:

• สามารถใช้งานได้ในอิริยาบทที่เหมะสม(อย่าเล่นท่ายาก)

• ไม่ต้องออกแรงมาก • ไม่ต้องออกแรงนาน • ไม่ต้องทำซ้ำๆ

Universal Design → The 7 Principles → #6: Low Physical Effort

https://www.carthrottle.com/post/why-the-days-of-using-a-key-to-start-your-car-are-numbered/ https://en.wikipedia.org/wiki/Nintendo_Entertainment_System http://www.ebay.com/sch/Buffalo-Video-Game-Controller/117042/bn_222653/i.html https://rules.ssw.com.au

HCI - Lecture 12 - Universal Design

Adapted from:

• สามารถใช้งานได้ในอิริยาบทที่เหมะสม(อย่าเล่นท่ายาก)

• ไม่ต้องออกแรงมาก • ไม่ต้องออกแรงนาน • ไม่ต้องทำซ้ำๆ

Universal Design → The 7 Principles → #6: Low Physical Effort

http://nwadacenter.org/factsheet/accessible-parking-employment-accommodation-practical-guide-employers

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles → #7: Size and Space for Approach and Use

Adapted from:

• สามารถมองเห็นได้ทั้งจากท่ายืนและท่านั่ง

• สามารถเอื้อมถึงได้ ทั้งจากท่ายืนและท่านั่ง

• มือและนิ้วจะใหญ่หรือเล็กก็ใช้ได้ จะยิ่งดีถ้าไม่ต้องใช้มือก็ได้! (ศอก เข่า เท้า ฯลฯ)

• มีพื้นที่เพียงพอสำหรับอุปกรณ์(เช่นรถเข็น หรือผู้ช่วยเหลือ)

http://www.amazon.com/Brookstone-Super-Sized-TV-Remote/dp/B000KEOT62 http://universaldesign.ie/technology-ict/web-accessibility-techniques/developer-s-introduction-and-index/html-coding-section-5/dev-5-6-use-relative-font-sizing-not-absolute-units.html

HCI - Lecture 12 - Universal Design

Adapted from:

Universal Design → The 7 Principles → #7: Size and Space for Approach and Use

https://www.ncsu.edu/ncsu/design/cud/index.htm

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles

Adapted from:

https://www.ncsu.edu/ncsu/design/cud/pubs_p/docs/poster.pdf

HCI - Lecture 12 - Universal DesignUniversal Design → The 7 Principles

Adapted from:

3471 25

Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.

1a. Provide the same means of use for all users: identical whenever possible; equivalent when not.

1b. Avoid segregating or stigmatizing any users.

1c. Make provisions for privacy, security, and safety equally available to all users.

1d. Make the design appealing to all users.

Power doors with sensors at entrances that are convenient for all users

Integrated, dispersed, and adaptable seating in assembly areas such as sports arenas and theaters

Bettye Rose Connell, Mike Jones, Ron Mace, Jim Mueller,

Abir Mullick, Elaine Ostroff, Jon Sanford,

Ed Steinfeld, Molly Story,and Gregg Vanderheiden.

GUIDELINES

The design is useful and marketable to people with diverse abilities.

7a. Provide a clear line of sight to important elements for any seated or standing user.

7b. Make reach to all components comfortable for any seated or standing user.

7c. Accommodate variations in hand and grip size.

7d. Provide adequate space for the use of assistive devices or personal assistance.

Controls on the front and clear floor space around appliances, mailboxes, dumpsters, and other elements

Wide gates at subway stations that accommodate all users

GUIDELINES

Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.

4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information.

4b. Maximize “legibility” of essential information.

4c. Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions).

4d. Provide compatibility with a variety of techniques or devices used by people with sensory limitations.

Tactile, visual, and audible cues and instructions on a thermostat

Redundant cueing (e.g., voice communications and signage) in airports, train stations, and subway cars

GUIDELINES

The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.

5a. Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded.

5b. Provide warnings of hazards and errors.

5c. Provide fail safe features.

5d. Discourage unconscious action in tasks that require vigilance.

A double-cut car key easily inserted into a recessed keyhole in either of two ways

An “undo” feature in computer software that allows the user to correct mistakes without penalty

GUIDELINES

The design minimizes hazards and the adverse consequences of accidental or unintended actions.

2a. Provide choice in methods of use.

2b. Accommodate right- or left -handed access and use.

2c. Facilitate the user’s accuracy and precision.

2d. Provide adaptability to the user’s pace.

Scissors designed for right - or left-handed users

An automated teller machine (ATM) that has visual, tactile, and audible feedback, a tapered card opening, and a palm rest

GUIDELINES

The design accommodates a wide range of individual preferences and abilities.

GUIDELINES

66a. Allow user to maintain a neutral body position.

6b. Use reasonable operating forces.

6c. Minimize repetitive actions.

6d. Minimize sustained physical effort.

Lever or loop handles on doors and faucets

Touch lamps operated without a switch

GUIDELINES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EXAMPLES

EQUITABLE USE PERCEPTIBLE INFORMATION

TOLERANCE FOR ERROR

FLEXIBILITY IN USE SIMPLE AND INTUITIVE USE

LOW PHYSICAL EFFORTThe design can be used efficiently and comfortably and with a minimum of fatigue.

THE PRINCIPLES WERE COMPILED BY ADVOCATES OF UNIVERSAL DESIGN, IN ALPHABETICAL ORDER:

THE PRINCIPLES OF UNIVERSAL DESIGNVersion 2.0 (4/1/97)

The Principles of Universal Design are not intended to constitute all criteria for good design, only universally usable design. Certainly, other factors are important, such as aesthetics, cost, safety, gender and cultural appropriateness, and these aspects must also be taken into consideration when designing.

NOTE:

3a. Eliminate unnecessary complexity.

3b. Be consistent with user expectations and intuition.

3c. Accommodate a wide range of literacy and language skills.

3d. Arrange information consistent with its importance.

3e. Provide effective prompting and feedback during and after task completion.

A moving sidewalk or escalator in a public spaceAn instruction manual with drawings and no text

SIZE AND SPACE FOR APPROACH AND USE

12 3

4

765

© Copyright 1997 NC State University, Center for Universal Design, College of Design