Dasar desain interaksi - WordPress.com

Dasar desain interaksi - WordPress.com

Dasar Desain Interaksi Dasar Desain Interaksi Desain: Proses Desain kaya cerita desain

Navigasi siapa mereka, apa yang mereka menyukai ... Skenario apa yang terjadi ketika Pengguna

apa itu, intervensi, tujuan, kendala menemukan jalan sekitar Anda sistem Iterasi dan Prototipe tidak pernah benar pertama kalinya! Apa Itu Desain ? mencapai tujuan dalam keterbatasan Tujuan Maksud

Kendala Untuk siapa?, mengapa mereka menginginkannya bahan, platform Hasil bernilai jual Aturan Desain Umumnya :

Pahami material yang ada Pada IMK : Pahami komputernya : Pahami pengguna : Kemampuan, tools, kapasitas, platforms

Psikologi, sosial, kesalahan manusia pada sistem Dan dari interaksi user terhadap sistem Kesalahan Manusia laporan kecelakaan .. aircrash, kecelakaan industri, kesalahan rumah sakit tetapi

tiang beton retak karena terlalu banyak beban berat menyalahkan tiangnya? Tidaktetapi. kesalahan desain kita tahu bagaimana berperilaku beton di bawah tekanan manusia salah adalah normal Pertanyaannya, mau menyalahkan manusia?

kita tahu bagaimana pengguna berperilaku di bawah tekanan sehingga desain untuk itu! memperlakukan pengguna setidaknya dari bentuk fisik! Fokus Dari Sistem the user Siklus Hidup Software Dengan Model Air Terjun Waterfall Model Kekurangan Dari Model Ini Adalah

Adanya kesulitan dalam mengakomodasi perubahan setelah proses dijalani. Fase sebelumnya harus sudah lengkap dan selesai dikerjakan sebelum ke fase berikutnya. Masalah Dalam Waterfall Perubahan sulit dilakukan karena sifatnya kaku : Cocok untuk kebutuhan yang dikumpulkan secara lengkap.

Perubahan ditekan sekecil mungkin. Umumnya digunakan untuk rekayasa sistem yang besar dimana proyek di kerjakan di beberapa tempat. Proses Desain what is wanted interviews ethnography scenarios task analysis guidelines principles

analysis precise specification design what is there vs. what is wanted dialogue notations evaluation heuristics prototype

implement and deploy architectures documentation help Langkah-langkah Kebutuhan Analisa

apa yang harus dilakukan dan bagaimana untuk memutuskan Iterasi dan prototyping pemesanan dan pemahaman Desain apa yang ada dan apa yang diinginkan ...

mendapatkan sesuatu dengan benar ... dan menemukan apa yang benar-benar dibutuhkan! Implementasi dan penyebaran membuat dan mendapatkan hal itu di luar sana bagaimana bisa dilakukan semuanya ! ! Terbatasnya waktu design trade-off Kegunaan? Menemukan masalah dan memperbaikinya?

Memutuskan apa yang harus diperbaiki? System yang sempurna yang di desain buruk Terlalu baik terlalu banyak upaya dalam desain Fokus ke User Ketahui siapa pemakainya Persona (karakter) Cari tahu kebiasaan/budayanya

Ketahui Siapa Pemakainya siapa mereka? mungkin dia tidak seperti Anda! berbicara dengan mereka mengawasi mereka

menggunakan imajinasi Anda Persona Menjelaskan contoh user Digunakan sebagai pengganti user Tidak diperlukan user yang nyata Apa yang dipikirkan Joni

Rincian masalah Dibuat se-nyata mungkin Cari tahu Kebiasaan/Budayanya pengamatan langsung di rumah psikiatri pasien

paket probe item ke prompt tanggapan umpamanya kaca untuk mendengarkan pada dinding, kamera, kartu pos diberikan kepada orang-orang untuk terbuka di lingkungan mereka sendiri, mereka merekam apa yang bermakna bagi mereka digunakan untuk

menginformasikan wawancara, ide-ide prompt, desainer enculture the systems info and help management messages start add user remove user

navigation design struktur lokal - layar tunggal main screen struktur global - keseluruhan situs remove user add user confirm

levels widget choice menus, buttons etc. screen design application navigation design environment other apps, O/S

the web widget choice screen design navigation design environment

elements and tags page design site structure the web, browser, external links physical devices

widget choice screen design navigation design environment controls

buttons, knobs, dials physical layout modes of device the real world think about structure within a screen

local looking from this screen out global later ... structure of site, movement between screens wider still

relationship with other applications local from one screen looking out goal seeking goal start goal seeking goal start progress with local knowledge only ...

goal seeking goal start but can get to the goal goal seeking goal start try to avoid these bits! four golden rules

knowing where you are knowing what you can do knowing where you are going or what will happen knowing where youve been or what youve done where you are breadcrumbs

shows path through web site hierarchy top level category web site live links to higher levels sub-category this page beware the big button trap things

other things more things the thing from outer space where do they go? lots of room for extra text! modes lock to prevent accidental use remove lock - c + yes to confirm frequent practiced action

if lock forgotten in pocket yes gets pressed goes to phone book in phone book c delete entry yes confirm oops ! global between screens within the application hierarchical diagrams

the system info and help management add user remove user messages hierarchical diagrams ctd. parts of application

screens or groups of screens typically functional separation the systems info and help management add user messages remove user

navigating hierarchies deep is difficult! misuse of Millers 7 2 short term memory, not menu size optimal? many items on each screen but structured within screen

see /e3/online/menu-breadth/ think about dialogue what does it mean in UI design? Minister: do you name take this woman Man: I do Minister: do you name take this man Woman: I do Minister: I now pronounce you man and wife think about dialogue what does it mean in UI design? Minister: do you name take this woman marriage service

general flow, generic blanks for names pattern of interaction between people computer dialogue pattern of interaction between users and system but details differ each time network diagrams main screen remove user

confirm add user show different paths through system network diagrams ctd. what leads to what what happens when including branches more task oriented then hierarchy

main screen remove user add user confirm wider still between applications and beyond ... wider still style issues:

functional issues platform standards, consistency cut and paste navigation issues embedded applications links to other apps the web

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell screen design and layout ABCDEFHIJKLM NOPQRSTUVWXYZ basic principles grouping, structure, order alignment use of white space basic principles ask

what is the user doing? think what information, comparisons, order design form follows function available tools grouping of items order of items

decoration - fonts, boxes etc. alignment of items white space between items grouping and structure logically together physically together Billing details: Name Address: Credit card no Delivery details: Name Address: Delivery time Order details:

item quantity cost/item size 10 screws (boxes) 7 3.71 cost 25.97

order of groups and items think! - what is natural order should match screen order! use boxes, space etc.

set up tabbing right! instructions beware the cake recipie syndrome! mix milk and flour, add the fruit after beating them decoration use boxes to group logical items use fonts for emphasis, headings but not too many!!

ABCDEFHIJKLM NOPQRSTUVWXYZ alignment - text you read from left to right (English and European) align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess

fine for special effects but hard to scan boring but readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess alignment - names Usually scanning for surnames make it easy!

Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Janet Gregory Russell Dix Finlay Abowd Beale

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell alignment - numbers think purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142

497.6256 alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34 multiple columns

scanning across gaps hard: (often hard to avoid with large data base fields) sherbert toffee chocolate fruit gums coconut dreams 75 120 35 27 85 multiple columns - 2

use leaders sherbert toffee chocolate fruit gums coconut dreams 75 120 35 27 85 multiple columns - 3

or greying sherbert toffee chocolate fruit gums coconut dreams (vertical too) 75 120 35 27 85 multiple columns - 4

or even (with care!) bad alignment sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 white space - the counter WHAT YOU SEE white space - the counter WHAT YOU SEE THE GAPS BETWEEN

space to separate (pemisahan) space to structure space to highlight (menyorot) physical controls grouping of items defrost settings defrost settings type offood

food type of time tocook cook time to physical controls grouping of items order of items 1) of type

of heating 1) type heating 2) temperature 2) temperature 3) to time 3) time cookto cook 4) start 4) start 1 2 3 4

physical controls grouping of items order of items decoration different colours different colours for for

different functions different functions lines aroundrelated related lines around buttons (temp up/down) buttons physical controls grouping of items

order of items decoration alignment centered text in buttons centred text

in buttons ? easy to scan ? ? easy to scan ? physical controls grouping of items order of items

decoration (hiasan) alignment white space gaps aidgrouping grouping gaps to to aid

tindakan pengguna dan kontrol pengguna memasukkan informasi tahu apa yang harus dilakukan affordances (kemampuan) memasukkan informasi forms, dialogue boxes

Alan Dix Address: Lancaster presentation + data input masalah tata letak yang sama Name: alignment - N.B. different label lengthsAddress: Layout yang Logis Name: ?

Lancaster Name: Alan Dix Menggunakan analisis tugas Address: Pengelompokan natural order for entering information Alan Dix Lancaster top-bottom, left-right (depending on culture)

set tab order for keyboard entry N.B. see extra slides for widget choice knowing what to do apa yang aktif apa pasif mana Anda mengklik mana Anda mengetik gaya konsisten membantu

umpamanya digarisbawahi web link label dan ikon tindakan standar untuk umum bahasa - tebal = arus atau tindakan Kemampuan (affordances) psychological term Untuk obyek fisik shape and size suggest actions

affords grasping (genggaman) also cultural buttons afford pushing Untuk obyek layar pick up, twist, throw

mug handle buttonlike object affords mouse click physical-like objects suggest use culture of computer use icons afford clicking or even double clicking not like real buttons! sesuai tampilan presenting information aesthetics and utility colour and 3D localisation &

internationalisation menyajikan informasi purpose matters sort urutan (yang kolom, abjad numerik) text vs. diagram menyebarkan grafik vs. histogram prinsip-prinsip presentasi kertas digunakan! but add interactivity softens design choices e.g. re-ordering columns dancing histograms (chap 21) name size

chap10 chap1 chap10 chap5 chap11 chap1 chap12 chap14 chap13 chap20 chap14 chap8 17 12 12 16

51 17 262 22 83 27 22 32 estetika dan utilitas desain estetika meningkatkan kepuasan pengguna dan meningkatkan

produktivitas keindahan dan utilitas mungkin bertentangan gaya visual terlibat mudah untuk membedakan desain yang bersih sedikit perbedaan membingungkan latar belakang di balik teks baik untuk melihat, tapi sulit untuk membaca

tetapi dapat bekerja sama misalnya desain meja dalam produk konsumen pembeda utama (misalnya iMac) colour and 3D

keduanya sering digunakan dengan sangat buruk! Warna monitor yang lebih tua terbatas palet berhati-hatilah buta warna! gunakan hemat untuk memperkuat informasi lainnya Efek 3D baik untuk informasi fisik dan beberapa grafik bad use of colour over use - without very good reason (e.g. kids site)

colour blindness poor use of contrast do adjust your set! adjust your monitor to greys only can you still read your screen? di seluruh negara dan budaya lokalisasi & internasionalisasi

globalisasi mengubah antarmuka untuk budaya tertentu / bahasa mencoba untuk memilih dll simbol-simbol yang bekerja di mana-mana hanya mengubah bahasa? menggunakan sumber database bukan teks literal

tapi ukuran perubahan, urutan kiri-kanan dll lebih dalam isu-isu asumsi dan nilai-nilai budaya makna simbol prototyping iteration and prototyping getting better

and starting well prototyping anda tidak pernah mendapatkan benar pertama kali jika pada awalnya Anda tidak berhasil ... design prototype re-design evaluate

OK? done! Perangkap prototyping bergerak sedikit demi sedikit ... tapi ke mana? Malverns or the Matterhorn? 1. membutuhkan titik awal yang baik 2. perlu memahami apa yang salah

Recently Viewed Presentations

  • Competitivitatea Fiscală - Concept Și Condiții De Existență

    Competitivitatea Fiscală - Concept Și Condiții De Existență

    rdine cvasi-socială (OCS): obiectivată, sintetică, parțial predictibilă, fără scop. c. ... (Arrow) c. are ar putea fi semnificația unor propoziții indicative de tipul ipotezelor sau postulatelor, având în vedere faptul că ele „ ...
  • American Marketing Association Membership

    American Marketing Association Membership

    American Nuclear Society Material Science and Technology Division Presentation to the ANS Board of Directors Todd Allen University of Wisconsin June 8, 2005 San Diego
  • Moon Sponge Painting 2nd Grade Art Project West

    Moon Sponge Painting 2nd Grade Art Project West

    Presentation modified and prepared by Alice Finch 2013. ... There is a die-cut tool in the office that you can use to cut out yellow star shapes. You can write their names on the stars, which creates a nice display....
  • Period 4: Global interactions, c. 1450 to c. 1750

    Period 4: Global interactions, c. 1450 to c. 1750

    New forms of Social Organizations and modes of production. B. Slavery in Africa continued both the traditional incorporation of slaves into households and the export of slaves to the Mediterranean and the Indian Ocean.
  • 2017 ACC/AHA/HFSA Focused Update of the 2013 ACCF/AHA

    2017 ACC/AHA/HFSA Focused Update of the 2013 ACCF/AHA

    2017 ACC/AHA/HFSA Focused Update of the 2013 ACCF/AHA Guideline for the Management of Heart Failure Developed in Collaboration With the American Academy of Family Physicians, American College of Chest Physicians, and International Society for Heart and Lung Transplantation
  • Work Activities December 2010 1 Objectives  We will

    Work Activities December 2010 1 Objectives We will

    Secondary education for a person who does not have a high school diploma or General Equivalency Diploma (GED) This is a core plus activity . If the parent does not have a high school diploma or GED and the parent...
  • To encourage and support excellence in teaching and learning ...

    To encourage and support excellence in teaching and learning ...

    A different view is not per se particularly valuable. Indeed Alex Standish (2009) warns us against teaching geography that imposes a view of how to live; this ceases to be education and is closer to indoctrination. But the point was,...
  • The Growing Opportunity in Functional Medicine: A Business

    The Growing Opportunity in Functional Medicine: A Business

    FUNCTIONAL MEDICINE OPPORTUNITIESNUTRIENT REPLETION. Flagged during dispensing with key drug classes (statins, antibiotics, etc.) to generate a recommendation at point of sell. Pharmaceutical Grade supplements (tested and validated) Possible validation through pharmacy/patient initiated laboratory. DOCUMENT THESE SIGNIFICANT CLINICAL INTERVENTIONS