Prototyping

Apa itu Prototyping ??

—        Dalam interaksi manusia dan computer, Prototipe  merupakan simulasi atau animasi dari bakal sistem.

—        Prototipe merupakan suatu metode dlm pengembangan sistem yg menggunakan pendekatan utk membuat sesuatu program dg cepat & bertahap shg segera dpt dievaluasi oleh pemakai

—        Prototipe ini memang benar-benar cocok utk user yg awam IT.

—        Dalam pembuatan prototipe kita dpt menerapkan UCD (User Centered Design).

Tahapan prototipe yaitu identifikasi kebutuhan pemakai, membuat prototipe, menguji prototipe, memperbaiki prototipe, mengembangkan versi produksi.

Keunggulan Prototipe

1. Adanya komunikasi yang baik antara pengembang dan pelanggan
2. Pengembang dapat bekerja lebih baik dalam menentukan kebutuhan pelanggan
3. Pelanggan berperan aktif dalam pengembangan sistem
4. Lebih menghemat waktu dalam pengembangan sistem
5. Penerapan menjadi lebih mudah karena pemakai mengetahui apa yang diharapkannya.

Kelemahan Prototipe

1. Pelanggan kadang tidak melihat atau menyadari bahwa perangkat lunak yang ada belum mencantumkan  kualitas perangkat lunak secara keseluruhan dan juga belum memikirkan kemampuan pemeliharaan untuk jangka waktu lama
2. Pengembang biasanya ingin cepat menyelesaikan proyek. Sehingga menggunakan algoritma dan bahasa pemrograman yang sederhana untuk membuat prototyping  lebih cepat selesai  tanpa memikirkan  lebih lanjut bahwa program tersebut hanya merupakan cetak biru sistem .
3. Hubungan pelanggan dengan komputer yang disediakan  mungkin  tidak mencerminkan teknik perancangan yang baik

Karakteristik Dalam Proses UCD ( User Centered Design )

—        Memahami user dan kebutuhannya.

—        Fokus pada user pada tahap awal  desain dan mengevaluasi hasil desain.

—        Mengidentifikasi, membuat dokumentasi dan menyetujui kegunaan dan tujuan pengalaman user.

—        Perulangan hampir dapat dipastikan. Para perancang tidak pernah berhasil hanya dalam satu kali proses.

Mengapa menggunakan Prototype?

- Evaluasi dan feedback pada rancangan interaktif.

- Stakeholder (dalam hal ini user) dapat melihat, menyentuh, berinteraksi  dengan prototype.

- Anggota tim dapat berkomunikasi secara efektif.

- Para perancang dapat mengeluarkan ide-idenya.

- Memunculkan ide-ide secara visual dan mengembangkannya.

- Dapat menjawab pertanyaan yang membantu pemilihan di antara alternatif-alternatif.

Dimensi Prototype

Dalam hal ini terdapat beberapa dimensi Prototype yaitu :

penyajian, lingkup, executability dan maturation. 

Metode Pembuatan Prototyping Dengan Cepat

Langkah menggunakan Metode Komputer, yaitu :

Menirukan lebih banyak kemampuan sistem.

- Pada umumnya hanya baru beberapa aspek atau fitur

- Dapat berpusat pada lebih banyak detail

- Bahaya: Para pemakai jadi lebih segan untuk menyarankan  perubahan sekali ketika mereka melihat prototype yang lebih realistis.

Terminologi

1. Prototype Horisontal

•       Sangat luas, mengerjakan sebagian besar   interface, tetapi   tidak mendalam

2. Prototype Vertikal

•       Lebih sedikit aspek atau fitur dari interface yang disimulasikan, tetapi dilaksanakan dengan rincian yang sangat baik

3. Early Prototyping (prototipe cepat)

4. Late Prototyping (prototipe lambat)

5. Low-fidelity Prototyping (prototype dengan tingkat ketepatan yang                                           rendah).

Contoh (1) storyboard:

- Digunakan di awal desain.

- Biasanya digunakan dengan skenario, lebih terinci, dan dapat

   diputar ulang.

- Kumpulan dari sketsa/frame individual.

- menyajikan urutan inti cerita.

- menunjukkan bagaimana kemungkinan user dapat mengalami

  peningkatan melalui setiap aktifitas.

Contoh (2) sketsa:

- Sketsa sangat penting untuk low-fidelity prototyping.

- Jangan takut dengan kemampuan menggambar.

- Menyajikan “tampilan” yang kotor dan cepat dari interface, konsep

   desain, dll.

Contoh (3) “wizard-of-oz”:

- User berpikir mereka berinteraksi dengan komputer, tapi developer

  lebih menanggapi hasilnya daripada sistemnya.

- Biasanya dilakukan di awal desain untuk memahami apa yang   

   diharapkan oleh user.

6. Mid-fidelity prototyping (prototype dengan tingkat ketepatan  

                           sedang)

   Contoh tools yang digunakan: powerpoint, illustrator, dll.

7. High-fidelity prototyping (prototype dengan tingkat ketepatan yang                                         tinggi)

    Tools umum yang digunakan:

                      Macromedia Director, Visual Basic, Flash, 
                      illustrator.

A. Prototyping Tools

1. Draw/Paint Program, contoh: Photoshop, Coreldraw

- Menggambar setiap layar, baik untuk dilihat.

- Prototype horisontal, tipis.

- Adobe Photoshop.

 

Contoh :

2. Scripted Simulations/Slide Show,
    contoh: Powerpoint, Hypercard,Macromedia Director, HTML.

- Letakkan tampilan seperti storyboard dengan (animasi) perubahan diantaranya.

- Dapat memberikan user catatan yang sangat spesifik.

- Disebut chauffeured prototyping.

- Macromedia Director.

3. Interface Builders, contoh: Visual Basic, Delphi, UIMX.

    - Tools untuk menampilkan jendela, kendali, dan lain-lain dari interface.

      contoh :

·        Fitur yang baik

- Mudah dikembangkan dan memodifikasi layar.

- Mendukung jenis interface yang dikembangkan.

- Mendukung berbagai macam divasi Input/Output.

- Mudah untuk memodifikasi dan menghubungkan layar.

- Mengijinkan memanggil prosedur eksternal dan program.

- Mengijinkan mengimpor teks, grafik, media lain.

- Mudah untuk dipelajari dan digunakan.

- Dukungan yang baik dari vendor.

Sumber :

—         Surbakti, Irfan; Santosa, Insap; Interaksi Manusia Dan Komputer, Edisi Jurusan  
        Teknik Informatika-ITS, 2006

—        Sudarmawan; Ariyus, Dony; Interaksi Manusia dan Komputer, Andi Offset  
       Yogyakarta, 2007

Read More

Design

“Look & Feel” porsi dari sebuah tampilan. Apa yang dihadapi seseorang pada awalnya. Awalnya penyampaian sebuah kesan, suasana hati

Filosofi-Filosofi Desain

Pilihan pribadiku:

-         Unsur-unsur visual ekonomi

-         Sedikit adalah lebih

-         Bersih, terorganisasi baik

Prinsip – prisip Design yang terdiri dari :  Metafora, Clariy (kejelesan), Konsistensi, Alignment (kelurusan), proximity, dan  Kontras

1. Metaphore

Mencoba mempresentasikan dan memberikan hubungan yang lebih familiar dengan elemen visual.

Dapat dilihat pada situs : http://www.worldwidestore.com. 

Komentar saya tentang situs tersebut :

Pada situs ini terdapat perpaduan banyak warna, gambar berupa benda – benda kuno yang terdiri dari patung, perhiasan, maupun souvenir yang lain.

Pada situs worldwidestore ini mempunyai background awan dan latar belakang awal tampilan pada tulisan berwarna putih dengan kombinasi warna. Dalam hal ini, situs yang ada di worldwidestore sudah mengikuti ketentuan warna terbaik, agar user tidak bosan jika membuka situs tersebut.

Kemudian worldwide store ini juga menggunakan tampilan antarmuka berbasis grafis dimana kumpulan obyek yang berupa benda – benda unik sudah sesuai dengan apa yang diinginkan untuk si user. Dan pada situs ini juga membuat urutan visual dan fokus pengguna dengan baik berupa benda – benda yang disusun rapi dengan bentuk 3 dimensi. Sehingga, pada saat kita masuk ke area space mall kita dapat melihat semua benda – benda unik tersebut sesuai dengan urutan yang ada di setiap rak. Dan seakan – seakan kita sebagai user masuk kedalam mal tersebut  mengelilingi sekitar mal yang ada.

Akan tetapi, kekurangannya pada  situs ini pada saat kita memasuki space mall tersebut, pada saat kita mengklik yang kita inginkan, tampilan dari  space mall yang berjalan tidak pernah berhenti dan terus berulang – ulang karena tak ada delay waktu yang men set tampilan tersebut.

2. Clarity

Dalam interaksi manusia computer terdapat design computer yang salah satunya adalah Clarity artinya Kejelasan.

Pada situs : http://www.schwab.com

Komentar saya tentang situs tersebut :

            Schwab ini menggambarkan sebuah perusahaan yang bergerak di bidang  investasi, penyimpanan, dan pengatur keuangan seseorang melalui penjualan saham, diman penuualan transksi saham tersebut berada dibursa efek yng ada di new york. Mereka mencari para investor yng ingin menanamkan modalnya investasi di schwab.

            

            Dalam hal ini, situs schwab ini sudah menjelaskan isi dari perusahaannya dengan terperinci. Mengenai tentang design dalam interaksi manusia dan komputer, bahwa kita ketahui latar belakang putih dengan dominan tulisan hitam, biru, dan merah serta garis tebal pada teks tersebut dengan warna yang sama sebelumnya sudah mengikuti ombinasi warna terbaik.  

3. Consistency

Apa itu Consistency ?

Consistency (Konsistensi) merupakan atribut yang sangat penting untuk membantu pengguna dalam mengembangkan mentalitas yang diperlukan dalam pengoperasian sebuah sistem computer.

Sistem yang konsisten akan mendorong pengembangan mentalitas dengan cara memberikan semcam petunjuk kepada pengguna untuk mengekstrapolasi pengetahuan yang saat itu ia miliki untuk dapat memahami perintah – perintah yang baru dan lengkap dengan opsion yang ada.

Konsistensi harus diterapkan pada semua aspek perancangan antarmuka pengguna. Perintah – perintah harus mempunyai sintaksis yang terstandarisasi dan urutan parameter harus mempunyai tata letak yang konsisten pula; format pemasukan data harus kompatibel dan konsisten dengan format tampilan data.

Dalam sistem berbasis frame (misalnya pada dialog berbasis pengisian barang), pengguna sering dihadapkan pada sejumlah tampilan yang penuh dengan infomasi. Dalam hal ini perancng harus konsisten dalam menggunakan ruang tampilan yang tersedia. Dengan cara seperti ini, pengguna secara tidak langsung akan membawa dirinya sendiri untuk mempelajari berbagai tipe informasi yang dapat ditemukan.

Dapat kita lihat pada situs  http://www. Santafean.com

Komentar :

Pada situs Santafean itu merupakan situs yang menarik dimana situs ini memiliki opsion dalam membuka suatu halaman yang konsisten dengan format tampilan data. Sehingga pengunjung sangat mudah mengklik berbagai pilihan yang ada di santafean dan  memberikan kemudahan langsung bagi para user.

Kemudian kosakata grafis yang konsisten dan sesuai

1. Alignment

Alignment ini merupakan perataan / perapian teks yang ada di pengolah kata maupun aplikasi lain. Agar memberikan kesan menarik dan rapi, setiap perancang perlu mengikuti standard ketentuan agar perancangan yang dibuat berhasil dengan sempurna. Baik dalam merancang suatu tulisan dengan perpaduan warna itu diperlukan juga dengan perapian teks, agar si user tidak kebingungan pada saat melihat tulisan kita.

2. Proximity

Merupakan pengelompokkan objek sejenis dan memisahkan yang tidak mirip untuk menunjukkan  hubungan dan kepentingan.

      

3. Contrast

Apa itu contrast ??

Contrast yaitu hubungan antara cahaya yang dikeluakan oleh suatu obyek dan cahaya dari latar belakang obyek itu. Kontras didefinisikan sebagai selisih antara luminans obyek dengan latar belakangnya dibagi dengan luminas latar belakang.

Kontras jug terdiri dari nilai kontras positif dan nilai kontras negative. Kemudian Obyek dapat mempunyai kontras negative atau positif tergantung dai luminans obyek itu terhadap luminans latar belakangnya.

Dapat kita lihat pada situs http://www.delta.com

Komentar saya :

Situs delta itu merupakan situs yang menawarkan jasanya dibidang travel dalam layanan online. Dimana layout / tampilan pada delta tersebut sangat sedehana dan tidak mengeluarkan banyak warna serta susunan opsi / pilihan untuk mencari data yang ada di delta secara terurut. Dalam hal ini tampilan Delta ini sudah mengikuti tata aturan kombinasi warna terbaik agar user pada saat membuka situs ini tidak terlihat bosan dan mudah untuk melakukan transaksi atau berdialog secara langsung.

           Sumber penjelasan tentang beberapa item yang terdiri dari Metaphor, Clarity,                 Consistency, Alignment, Proximity dan contrast berasal dari :

• Santosa, P. Insap, Interaksi Manusia & Komputer Teori dan Praktek, ANDI ,Yogyakarta,1997.

Read More

DIALOG

Dialog dalam arti umum adalah percakapan antara dua kelompok atau lebih

Dialog dalam konteks perancangan user interface adalah struktur dari percakapan antara user dan sistem computer.

Bahasa Komputer dibagi menjadi 3 tingkatan :

1. Leksikal

 

·        merupakan tingkat yang paling rendah

·        yaitu bentuk icon pada layar ,

·        pada bahasa manusia, ekuivalen dengan  bunyi dan ejaan suatu kata

2. Sintaksis
• yaitu urutan dan struktur dari input dan output
• pada bahasa manusia, ekuivalen dengan grammar suatu kalimat

3. Semantik

·        yaitu arti dari percakapan yang berkaitan dengan pengaruhnya pada  struktur data internal komputer dan/atau dunia eksternal.

·        pada bahasa manusia, ekuivalen  dengan arti yang berasal dari para partisipan  dalam percakapan

 Dalam user interface, istilah dialog hampir mirip dengan tingkat sintaksis, tapi juga meliputi sifat-sifat leksikal.

Dialog manusia-komputer

· Berbeda dengan dialog antar manusia pada umumnya, dialog dengan komputer   

    biasanya terstruktur dan terbatas

·   Beberapa ciri-ciri dari dialog terstruktur yang nantinya ditemukan dalam dialog   

    Computer :

1. menyebutkan beberapa hal tertentu secara  berurutan
2. beberapa bagian dari dialog dilakukan secara bersamaan (concurrently)
3. dialog berikutnya tergantung pada respons dari partisipan
4. dialog terstruktur biasanya tidak langsung menuju pada arti kata -  katanya

      / semantik tapi pada level sintaksis

A. PROSES PERANCANGAN DIALOG

   

Dalam hal ini, interaksi manusia dan computer juga terdapat Ragam Dialog.  Berbagai teknik dialog interaktif yang memungkinkan terjadi komunikasi antara manusia dengan computer pada dewasa ini cukup bervariasi, dimulai dari yang sederhana sampai yang cukup canggih.

Apa itu ragam dialog ??

Ragam dialog adalah cara yang digunakan untuk mengorganisasikan berbagai teknik dialog.

Dalam melihat perbedaan teknik dialog yang digunakan ketika anda bekerja dalam lingkungan DOS dibandingkan dengan ketika Anda bekerja dalam lingkungan Microsoft Windows.

Teknik dialog yang digunakan dalam program pengolah kata, misalnya Wordstar versi 4.0 pun berbeda dengan yang digunakan dalam Microsoft Word.

Antarmuka yang menggunakan berbagai teknik dialog pada dasarnya adalah untuk mendapatkan satu kriteria yang sangat penting dalam pengoperasian sebuah program aplikasi, yakni aspek ramah dengan pengguna.

Secara umum, ragam dialog interaktif dapat dikelompokkan menjadi 9 kategori, yaitu :

1. Dialog berbasis perintah tunggal (command line dialogue)
2. Dialog berbasis bahasa pemrograman (Programming language dialogue)
3. Antarmuka berbasis bahasa alami ( natural language interface)
4. Sistem menu
5. Dialog berbasis pengisian barang ( form filling dialogue)
6. Antarmuka berbasis ikon
7. Sistem penjedelaan (windowing system)
8. Manipulasi langsung
9. Antarmuka berbasis interaksi grafis.

Berikut ini gambaran dialog antar manusia dan Komputer :

Sumber :

•  //staffsite.
• Santosa, P. Insap, Interaksi Manusia & Komputer Teori dan Praktek, ANDI ,Yogyakarta,1997.

Read More