Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface...

59
Interface Design อ.พีราวิชญ์ ภาคนนท์กุล คณะสารสนเทศและการสื ่อสาร DC282: Human Computer Interaction http://www.peerawich.com/dc282

Transcript of Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface...

Page 1: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Interface Design

อ.พรีาวชิญ ์ ภาคนนทกุ์ล คณะสารสนเทศและการสือ่สาร

DC282: Human Computer Interaction

http://www.peerawich.com/dc282

Page 2: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

UI & UD

UI : User Interface

Interface Design

Interaction Design

UD: Universal Design

Page 3: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Universal Design

equitable use

flexibility in use

simple and intuitive to use

perceptible information

tolerance for error

low physical effort

size and space for approach and use

Page 4: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

ผลส ำรวจ: กำรใช้ทูลบำรแ์ละปุ่ มต่ำงๆ ใน Firefox

93.1% 54.1%

Page 5: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

ผลส ำรวจ: กำรใช้ทูลบำรแ์ละปุ่ มต่ำงๆ ใน Firefox

Page 6: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Exam: Interface Design

เรยีนรูง้า่ย +ใชง้านงา่ยและมปีระสทิธภิาพ + รปูแบบน่าสนใจ

Page 7: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Thumbnail

Page 8: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 9: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 10: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Image Zoom

Page 11: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 12: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 13: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 14: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 15: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 16: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Directory Navigation

Page 17: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Navigation Tabs

Page 18: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 19: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 20: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Double Tab Navigation

Page 21: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Vertical Dropdown Menu

Page 22: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 23: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Horizontal Dropdown Menu

Page 24: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 25: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Accordion Menu

Page 26: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 27: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 28: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Selection Tree

Page 29: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Pop-up Menu

Page 30: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Toolbar

Page 31: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Fisheye menu

Page 32: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Pagination

Page 33: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Scrolling Menu

Page 34: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Continuous Scrolling

Page 35: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 36: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Frame

Page 37: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Home Link

http://www.infocomm.mju.ac.th/icnew/dc282/

Page 38: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

To-the-top Link

Page 39: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Footer

Page 40: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 41: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Wizards

Page 42: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 43: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 44: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 45: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 46: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

List Builder

Page 47: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Breadcrumbs

Page 48: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Status Information

Page 49: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 50: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 51: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Input Prompt

Page 52: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 53: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Input Feedback

Page 54: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical
Page 55: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Checkbox

Page 56: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Radio Button

Page 57: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Spinner

Page 58: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Slider

Page 59: Interface Design - peerawich.compeerawich.com/dc282/images/stories/2556/DC282-ID_Interface Desi… · 95.6% 67 376* 328* 327* 304* 21 N 18.5* 184* 127* Location Bar Back Scro' Vertical

Captcha


Dc282 id interface-design2

Dc282 id interface-design2

第1表 健康診断・診査受診延人員，健康診断等の種類・行政 …...96.5 96.8 95.6 97.2 97.8 95.3 96.6 96.3 97.8 98.0 94.6 95.6 正常 8,200 705 355 839 506 154

第1表 健康診断・診査受診延人員，健康診断等の種類・行政 …...96.5 96.8 95.6 97.2 97.8 95.3 96.6 96.3 97.8 98.0 94.6 95.6 正常 8,200 705 355 839 506 154

SCRO Locations · Web viewKezia Vonarx Senior Community Recovery Officer kezia.vonarx@communities.qld.gov.au T: 07 4255 7046 M: 0427 101 524 Level 2, 5B Sheridan Street, Cairns, QLD

SCRO Locations · Web viewKezia Vonarx Senior Community Recovery Officer [email protected] T: 07 4255 7046 M: 0427 101 524 Level 2, 5B Sheridan Street, Cairns, QLD

FIITJEEALLAHABADCENTREfiitjeeallahabad.com/boardmore.pdfPIYUSH MISHRA 95.8% SUMAN MONDAL 93.4% DISHI KATIYAR 95.6% KRITI SRIVASTAVA CBSE BOARD 2015 RESULTS FIITJEE ALLAHABAD CENTRE

FIITJEEALLAHABADCENTREfiitjeeallahabad.com/boardmore.pdfPIYUSH MISHRA 95.8% SUMAN MONDAL 93.4% DISHI KATIYAR 95.6% KRITI SRIVASTAVA CBSE BOARD 2015 RESULTS FIITJEE ALLAHABAD CENTRE

PPT Jack Carnegie - Juvenile Law Section · 2017-06-16 · Jack Carnegie Jack.Carnegie@Strasburger.com Christene Wood Cwood@Thompsoncoe.com 95.6% Certification Rate In Harris County

PPT Jack Carnegie - Juvenile Law Section · 2017-06-16 · Jack Carnegie [email protected] Christene Wood [email protected] 95.6% Certification Rate In Harris County

upmsp.edu.in · XLS file · Web view · 2016-07-2297.8. 97.6. 97.6. 97.4. 97.4. 97.2. 97.2. 97. 96.8. 96.8. 96.6. 96.4. 96.4. 96.4. 96.4. 96.2. 96.2. 96.2. 95.8. 95.8. 95.6. 95.6.

upmsp.edu.in · XLS file · Web view · 2016-07-2297.8. 97.6. 97.6. 97.4. 97.4. 97.2. 97.2. 97. 96.8. 96.8. 96.6. 96.4. 96.4. 96.4. 96.4. 96.2. 96.2. 96.2. 95.8. 95.8. 95.6. 95.6.

20130426 Chawla MR Enterography Technique and Clinical ... Lifelong Learning... · Meta-analysis Modality Sensitivity Specificity US 89.7% 95.6% MRI 93.0% 92.8% Scinitgraphy 87.8%

20130426 Chawla MR Enterography Technique and Clinical ... Lifelong Learning... · Meta-analysis Modality Sensitivity Specificity US 89.7% 95.6% MRI 93.0% 92.8% Scinitgraphy 87.8%

World Bank Documentdocuments.worldbank.org/curated/en/896511468332990644/...6 growth year-on-year, with India‘s ESCO sector reporting a compound annual growth rate of 95.6% 9from

World Bank Documentdocuments.worldbank.org/curated/en/896511468332990644/...6 growth year-on-year, with India‘s ESCO sector reporting a compound annual growth rate of 95.6% 9from

Opel Pro Scro Broucher

Opel Pro Scro Broucher

Climate Modeling Elissa Lynn SCRO August 27, 28/ 2013.

Climate Modeling Elissa Lynn SCRO August 27, 28/ 2013.

STRATEGI KONVERGENSI RADIO WALISONGO 95.6 FM ...eprints.walisongo.ac.id/13105/1/SKRIPSI_1601026083_EKO...sumbernya dijelaskan di dalam tulisan dan daftar pustaka. Semarang, 4 Mei 2020

STRATEGI KONVERGENSI RADIO WALISONGO 95.6 FM ...eprints.walisongo.ac.id/13105/1/SKRIPSI_1601026083_EKO...sumbernya dijelaskan di dalam tulisan dan daftar pustaka. Semarang, 4 Mei 2020

Chapter V: Discussionstudentsrepo.um.edu.my/4636/8/8_Chapter_5.pdf · The overall prevalence of trichuriasis, ascariasis and hookworm infections were 95.6%, 47.8% and 27.9%, respectively.

Chapter V: Discussionstudentsrepo.um.edu.my/4636/8/8_Chapter_5.pdf · The overall prevalence of trichuriasis, ascariasis and hookworm infections were 95.6%, 47.8% and 27.9%, respectively.

Facial affect detection using convolutional neural networkscs231n.stanford.edu/reports/2016/pdfs/011_Report.pdf · face image sequences [11]. Their recognition rate is 95.6% on the

Facial affect detection using convolutional neural networkscs231n.stanford.edu/reports/2016/pdfs/011_Report.pdf · face image sequences [11]. Their recognition rate is 95.6% on the

U.S. SMALL BUSINESS ADMINISTRATION 2019 Small Business ... · 14,006: 93.8: 380,067: 91.2: Health Care and Social Assistance; 1,802 95.6: 23,542: 40.8: 1,052,856: 38.5: Retail Trade

U.S. SMALL BUSINESS ADMINISTRATION 2019 Small Business ... · 14,006: 93.8: 380,067: 91.2: Health Care and Social Assistance; 1,802 95.6: 23,542: 40.8: 1,052,856: 38.5: Retail Trade

 · 4.3 2M A Cetune FONTE deve pre'erencialmente com a saber7 ogçåo a dc SINAP. no SCRO esta gara do SCRO no site DN. T)

 · 4.3 2M A Cetune FONTE deve pre'erencialmente com a saber7 ogçåo a dc SINAP. no SCRO esta gara do SCRO no site DN. T)

arXiv:1609.08490v1 [physics.ins-det] 27 Sep 2016 · biased to 1400 V. We used an Agilent Acqiris DC282 10-bit waveform digitizer sampling at 2 GS/s to acquire 80,000 waveforms. Energy

arXiv:1609.08490v1 [physics.ins-det] 27 Sep 2016 · biased to 1400 V. We used an Agilent Acqiris DC282 10-bit waveform digitizer sampling at 2 GS/s to acquire 80,000 waveforms. Energy

ABC CO., LTDSample)_NEW.pdf · - 기타비유동자산 - - - - - - 자산총계 20,612 16,516 16,702 100.0 100.0 100.0 유동부채 17,168 12,477 15,968 83.3 75.5 95.6 - 단기매입채무

ABC CO., LTDSample)_NEW.pdf · - 기타비유동자산 - - - - - - 자산총계 20,612 16,516 16,702 100.0 100.0 100.0 유동부채 17,168 12,477 15,968 83.3 75.5 95.6 - 단기매입채무

兵庫県の特別支援教育についてsho-bo/kounaikenshuu/hyogonot...752 719 95.6% 340 325 95.6% 12 児 童 生 徒 数 視 覚 障 害 聴 覚 障 害 知 的 障 害 肢 体

兵庫県の特別支援教育についてsho-bo/kounaikenshuu/hyogonot...752 719 95.6% 340 325 95.6% 12 児 童 生 徒 数 視 覚 障 害 聴 覚 障 害 知 的 障 害 肢 体

List of Institution with Sector/Specializations and Intake as … · 2018-02-19 · Brindavan Institute of Technology and Science SCRO Andhra Pradesh Electronics DTH Set Top Box Installation

List of Institution with Sector/Specializations and Intake as … · 2018-02-19 · Brindavan Institute of Technology and Science SCRO Andhra Pradesh Electronics DTH Set Top Box Installation

upmsp.edu.in€¦ · XLS file · Web view96.2 96 96 95.8 95.8 95.8 95.8 95.6 95.6 95.6 95.4 95.4 95.4 95.4 95.2 95.2 95.2 95 95 95 95 95 95 94.8 94.8 94.8 94.8 94.8 94.8 94.6 94.6

upmsp.edu.in€¦ · XLS file · Web view96.2 96 96 95.8 95.8 95.8 95.8 95.6 95.6 95.6 95.4 95.4 95.4 95.4 95.2 95.2 95.2 95 95 95 95 95 95 94.8 94.8 94.8 94.8 94.8 94.8 94.6 94.6