Interface Design

User interface desain adalah desain komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web dengan fokus pada pengalaman pengguna dan interaksi. Tujuan dari user interface design adalah membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna-apa yang sering disebut pengguna desain yang berpusat. User interface design yang bagus memfasilitasi dan menyelesaikan tugas di tangan tanpa menarik perhatian yang tidak perlu pada dirinya sendiri. Desain grafis dapat dimanfaatkan untuk mendukung kegunaan. Proses desain harus menyeimbangkan fungsi teknis dan elemen visual (misalnya, model mental) untuk menciptakan sebuah sistem yang tidak hanya operasional saja tetapi juga bermanfaat serta dapat disesuaikan dengan kebutuhan pengguna berubah.

Interface design terlibat dalam berbagai proyek dari sistem komputer, untuk mobil, untuk pesawat komersial; semua proyek-proyek ini melibatkan banyak interaksi sama manusia dasar, namun juga membutuhkan beberapa keterampilan yang unik dan pengetahuan. Akibatnya, desainer cenderung mengkhususkan diri pada jenis proyek tertentu dan memiliki kemampuan berpusat di sekitar keahlian mereka, apakah itu perancangan perangkat lunak, penelitian pengguna, desain web, atau desain industri.

Proses

Ada beberapa tahap dan proses dalam user interface design, beberapa di antaranya lebih dituntut atas daripada yang lain, tergantung pada proyek.

» Fungsi persyaratan pengumpulan hingga perakitan daftar fungsi yang diperlukan oleh sistem untuk mencapai tujuan proyek dan potensi kebutuhan pengguna.

» User analisis - menganalisis potensi pemakai sistem baik melalui diskusi dengan orang-orang yang bekerja dengan pengguna dan / atau potensi pemakai sendiri. pertanyaan Khas meliputi:

» Apa yang akan pengguna ingin sistem untuk melakukan?

» Bagaimana sistem fit dengan alur kerja normal pengguna atau kegiatan sehari-hari?

» Bagaimana cerdas secara teknis adalah pengguna dan apa sistem tidak seupa pengguna sudah gunakan?

» Seperti apa tampilan & merasa gaya banding kepada pengguna?

» Arsitektur Informasi - pengembangan proses dan / atau arus informasi darisistem(misalnya untuk sistem pohon telepon, ini akan menjadi sebuah pohon pilihan flowchart dan untuk situs web ini akan menjadi aliran situs yang menunjukkan hirarki dari halaman).

» Prototyping - pengembangan wireframes, baik dalam bentuk kertas atau prototip layar interaktif sederhana. Prototipe ini dilepaskan dari semua tampak & merasa elemen dan konten yang paling dalam rangka untuk berkonsentrasi pada antarmuka jaringan.

» Kegunaan pengujian - pengujian prototipe pada teknik pengguna-sering menggunakan yang sebenarnya yang disebut berpikir keras protokol di mana Anda meminta pengguna untuk berbicara tentang pikiran mereka selama pengalaman.

» Grafis Desain interface - tampilan yang sebenarnya & merasa User interface desain akhir grafis (GUI). Ini mungkin didasarkan pada temuan dikembangkan selama pengujian kegunaan jika kegunaan adalah terduga, atau berdasarkan tujuan komunikasi dan gaya yang menarik bagi pengguna. Dalam kasus yang jarang terjadi, mungkin grafis drive prototipe, tergantung pada pentingnya bentuk visual versus fungsi. Jika interface telah membutuhkan beberapa kulit, mungkin ada beberapa desain interface untuk satu panel kontrol, fitur fungsional atau widget. Fase ini sering merupakan upaya kolaborasi antara desainer grafis dan interface designer pengguna, atau ditangani oleh orang yang ahli dalam kedua disiplin.

User interface design memerlukan pemahaman yang baik tentang kebutuhan pengguna.

Penelitian sampai dengan yang sedang berlangsung

User interface design telah menjadi topik penelitian yang cukup besar, termasuk pada estetika.

Keinginan untuk memahami aplikasi hingga spesifik UI isu-isu awal dalam pengembangan perangkat lunak, bahkan sebagai aplikasi yang sedang dikembangkan, menyebabkan penelitian tentang alat GUI prototyping cepat yang mungkin menawarkan simulasi meyakinkan tentang bagaimana aplikasi yang sebenarnya mungkin berperilaku digunakan produksi .

Beberapa penelitian ini menunjukkan bahwa berbagai tugas pemrograman untuk perangkat lunak berbasis GUI bisa, pada kenyataannya, akan ditentukan melalui cara lain selain menulis kode program.

Penelitian dalam beberapa tahun terakhir sangat termotivasi oleh berbagai peningkatan perangkat yang dapat, berdasarkan Hukum Moore, host interface sangat kompleks.

Ada juga penelitian untuk menghasilkan user interface secara otomatis, untuk mencocokkan tingkat pengguna kemampuan untuk berbagai jenis interaksi.

Selengkapnya...

17 Prinsip User Interface

17  Perancangan User Interface

1. User Compatibility

Seorang perancang sistem harus benar-benar paham tentang pengetahuan, cara berpikir dan cara menerima informasi dari user sehingga sistem yang nantinya akan digunakan oleh user dapat membuat user lebih produktif. Dan yang harus diperhatikan juga adalah bahwa perancang (designer) atau developer tidak sama dengan user

2. Product Compatibility

Selalu memperhatikan dan mempertahankan kompatibilitas antar produk, misalnya mampu mengorbankan User Interface yang memungkinkan sistem lebih kompatibel.

3. Task Compatibility

Rancanglah interface sistem sesua dengan tugas dari user, jangan samapi user kesulitan untuk menggunakannya, karena hal ini dapat menyebabkan aplikasi yang kita buat tidak akan terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user.

4. Work Flow Compatibility

Selalu mengorganisasikan setiap fungsinya sesuai dengan kategori fungsinya sehingga dapat memfasilitasi sega perubahan tugas user.

5. Consistency

Prinsip ini sudah jelas, bahwa sistem harus  konsisten terhadap fungsionalitas / kegunaan dari sistem tersebut. Contoh sederhananya adalah ketika user menekan tombol “save” maka proses yang terjadi adalah penyimpanan bukan hapus data.

6. Familiarity

Gunakanlah konsep, terminologi dan pengaturannya yang mudah dipahami oleh user. Seperti ikon atau gambar “Recycle Bin” pada Sistem Operasi Windows, ini membuktikan bahwa fokus user terhadap gambar tersebut adalah file-file yang sudah dihapus sebelumnya.

7. Simplicity

Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu gunakan system default pada aplikasi yang dirancang. Maksudnya adalah sediakan dan utamakanlah fungsi – fungsi yang benar-benar sesuai dengan tugas dari user. Usahakan agar tidak menampilkan semua fungsionalitasnya.

8. Direct Manipulation

Maksud dari prinsip ini adalah user dapat langsung menyaksikan aksi sistem pada suatu objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf “A” maka di layar akan langsung muncul huruf “A”.

9. Control

Sistem yang digunakan oleh user jangan sampai membuat user merasa frustasi dan dikontrol oleh user. Seperti memberikan komentar pada saat user melakukan kesalahan dengan bahasa yang tidak membuat user merasa dikontrol oleh sistem tersebut.

10. WYSIWYG

WYSIWYG (What You See Is What You Get), artinya adanya korespondensi satu ke satu antara informasi di layar dengan informasi di printed-output atau file. Contoh, pada saat kita membuat laporan menggunakan Microsoft Office lalu mencetaknya (print out) laporan tersebut, maka hasil print out harus sama dengan yang ada pada lembar kerja Microsoft Office.

11. Flexibility

Prinsip ini merupakan prinsip yang sangat penting bagi user dengan keterbatasan fisik. Ini berarti mengijinkan banyak kontrol dari user yang mendukung untuk menggunakan aplikasi yang kita rancang dan mampu mengakomodir kemampuan user yang lain. Seperti aplikasi yang dapat didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).

12. Responsiveness

Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user. Seperti menampilkan Progress Bar.


13. Invisible Technology

Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat direkomendasikan dalam membuat User Interface. Sehingga user tidak memiliki rasa khawatir dan ketakutan untuk menggunakan aplikasinya.


14. Robustness

Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang baik untuk mengimplementasikan prinsip ini.


15. Protection

Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya memproteksi kesalahan-kesalahan umum manusia. Seperti pada saat kita menutup lembar kerja Microsoft Office yang belum kita simpan sebelumnya, maka Office akan secara otomatis memberikan konfirmasi untuk menyimpannya atau tidak.


16. Ease of Learning

Buatlah sistem yang mudah dipelajari bagi user novice (awam). Hal ini akan memberikan motivasi kepada user tersebut untuk menggunakannya.


17. Ease of Use

Buatlah sistem yang mudah digunakan untuk expert user. Sehingga sistem yang kita bangun tidak hanya dipakai untuk novice user tetapi bisa juga dipakai untuk user yang sudah ahli (berpengalaman).

Selengkapnya...

Pengertian dan Tujuan Design Interface

Desain Antarmuka atau yang lebih sering dikenal dengan istilah Design Interface adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman dan interaksi penggunanya.

Tujuan dari penggunaan design interface ini adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin. Bagaimana user berinteraksi dengan komputer menggunakan tampilan antarmuka (interface) yang ada pada layar komputer.

Design Interface ini sangat penting karena akan sangat berpengaruh pada user dalam menggunakan atau berkomunikasi dengan komputer. Apabila suatu program sulit untuk digunakan, maka hal ini akan memaksa user untuk melakukan suatu kesalahan saat menggunakan program tersebut.

Dari tahun ke tahun teknologi berkembang sangat pesat oleh sebab itu, perkembangan dari Human Computer Interface (HCI) menjadi sangat penting bagi seorang analyst yang merancang atau menciptakan suatu software. Di mana harus memperhatikan kaidah-kaidah atau prinsip prinsip dasar seperti User Friendly dan User Oriented.

Sekarang ini banyak berbagai jenis komputer sistem yang ada seperti: dekstop, laptop, notebook, PDA, dan yang lainnya. Oleh sebab itu, desain antarmuka ini berperan sangat penting karena, jika berbeda device maka tampilan antarmuka akan berbeda juga. Seperti contoh antarmuka di laptop akan berbeda dengan antarmuka di PDA. Tergantung dari seberapa besar screen dan support sistemnya.

User Design Interface ini bukan lagi hanya sebatas pada tampilan. Tapi juga mencakup suara dan gerakan tubuh. Voice Recognition merupakan salah satu Design Interface yang melibatkan suara. Aplikasi yang sudah diterapkan adalah dalam translate.google.com sehingga kita tidak perlu untuk mengetik kata-kata yang ingin kita terjemahkan. Contoh lain nya adalah gerakan tubuh yang ada dalam WII. Kalian yang senang main game pasti tahu device ini di mana ada suaatu remote yang dipegang guna mendeteksi setiap gerakan yang pengguna lakukan.

Selengkapnya...

Tujuan interfce user, perbandingan interface, tipe-tipe interface, tipe interaksi.

Tujuan Interface

Tujuan sebuah interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua (barangkali kedua tertua setelah gesture) yang dipakai orang untuk berkomunikasi sehari-harinya.Praktis, semua pengguna komputer dan Internet (kecuali mungkin anak kecil yang memakai komputer untuk belajar membaca) dapat mengerti tulisan.

Meski pada umumnya panduan interface menyarankan agar ikon tidak diberi tulisan supaya tetap mandiri dari bahasa, namun elemen interface lain seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak input dan tombol pilihan semua menggunakan bahasa. Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal.

Meskipun penting, namun sayangnya kadang penggunaan bahasa, seperti pemilihan istilah, sering sekali dianggap kurang begitu penting. Terlebih dari itu dalam dunia desain situs Web yang serba grafis, bahasa sering menjadi sesuatu yang nomor dua ketimbang elemen-elemen interface lainnya.

Interface ada dua jenis, yaitu :

Graphical Interface : Menggunakan unsur-unsur multimedia (seperti gambar, suara, video) untuk berinteraksi dengan pengguna.

Text-Based : Menggunakan syntax/rumus yang sudah ditentukan untuk memberikan perintah.

Perbandingan Interface Website Baik dan Kurang Baik

A.    Interface website yang kurang  baik.

Silahkan anda lihat interface diatas. Dilihat secara kasat mata sudah jelas bahwa website ini  sudah tidak menarik dan tidak enak dimata.Bagaimana user bisa berlama-lama memanjakan dirinya dengan info-info yang tersedia di website tersebut dengan desain dan interface seperti diatas yang pasti orang pusing melihatnya L.  Ada 4 point yang ingin saya komentari :

1. Content

   Merupakan salah satu yang sangat penting dan harus ada dalam sebuah website.Content adalah isi dan inti dari suatu website. Dapat dilihat diatas dimana content tersebut  tidak jelas,maksudnya seseorang  tidak akan tau/sulit untuk membedakan dimana yang merupakan content dan yang bukan,seperti  iklan,category,link, dsb.

2. Coloring

    Pewarnaan juga sangat mendukung dalam pengembangan sebuah website,dengan tujuan agar interface tidak membosankan ,dengan warna yang slalu monton hitam putih. Sedangkan pewarnaan diatas kurang baik. Website diatas memang sudah menggunakan warna diluar hitam putih,namun sangat tidak sinkron,terlalu banyak warna-warna yang tidak match,tapi mungkin menurut si pembuat website tersebut itu menarik. Kalau boleh komentar sedikit, website ini bisa diibaratkan buku gambar yang dipakai untuk menggambar seorang anak-anak yang sedang belajar menggambar/mewarnai,jadi ya seperti itu hasilnya acak kadul J.

3. Desain

    Ini  lebih parah lagi,dimana tidak memiliki struktur desain yang baik . Lihat contoh diatas misalnya ,seseorang yang berkunjung pasti akan tidak enak melihat desain website tersebut dan mungkin juga akan bingung.Tidak jelas dimana yang footer,header,sidebar dan contentnya. Selanjutnya gambar background yang acak-acakan yang sangat mengganggu pemandangan.

4.Text

    Untuk tulisan jelas kurang baik,terlalu banyak jenis font yang cukup mengganggu dan penempatan yang kurang baik karena tidak didukung oleh desain yang baik pula.

Sebaiknya dalam penggunaan font untuk sebuah website memakai font yang umum dipakai dan mudah dan enak dibaca semua orang,jangan cuma enak  dilihat dari diri sendiri tapi orang tidak.

                

B .Interface website yang baik

Sample gambar diatas diambil dari http://tif.uad.ac.id dan merupakan salah  satu website UAD di jurusan  informatika.Dilihat sepintas saja sudah jelas  bahwa interfacenya sangat bagus dan terstruktur, berbeda dengan website satunya yang tidak teratur dan acak-acakan. Mungkin yang membedakan adalah website ini  didesain oleh orang yang ahli dalam bidangnya.

1.      Content

   Sangat terlihat sekali perbedaan  dengan website yang sebelumnya dijelaskan diatas. Pada website ini terlihat jelas content yang bagus,jelas dan tidak membingungkan user.

Mungkin dengan content yang seperti ini user akan lebih berlama-lama nongkrong di website kita untuk memanjakan mata dan otak dengan isi-isi yang ada dan bermanfaat.

2.      Coloring

   Pewaranaan sudah cukup baik,dimana  tidak terlalu banyak warna yang mencolok dan membuat pusing. Mungkin karena ini merupakan website formal  jadi penggunaan warnanya tidak terlalu banyak.

3.      Desain

   Pada website ini jelas terlihat memiliki  rancangan desain yang sangat baik,sesuai dengan aturan dalam pembangunan interface sebuah web. Terlihat jelas mana yang content dan mana yang bukan,dan menggunakan background yang sederhana ,bukan gambar yang  justru akan membuat web tampak aneh. Dengan tampilan interface seperti ini ,jadi seseorang tidak akan pusing/bingung lagi untuk mencari apa yang ingin dicari diweb tersebut.

4.      Text

    Dalam penggunaan text dapat dibilang baik,karena tidak terlalu banyak penggunaan jenis  font yang aneh-aneh, dan hanya menggunakan beberapa jenis font yang umum sering digunakan, serta mudah untuk dibaca semua orang.

Ulasan

     Dari perbandingan  diatas mungkin kita menjadi sedikit  tahu seperti apa  dan bagaimana interface yang baik. Untuk membuat suatu interface yang baik dalam suatu website kita harus memperhatikan beberapa hal penting :

1.       Harus memahami konsep dasar dari interaksi manusia dan computer.

2.       Harus  mendesain interaksi dan proses.

3.       Terdapat notasi,dialog dan desain dalam interface

4.       Model-model dari system

5.       Pendukung implementasi interface

Untuk lebih detailnya  mengenai cara pembuatan interface yang baik  dan benar mungkin akan saya jelaskan dilain waktuJ. Tidak  ada kesmpurnaan didunia ini,kesmpurnaan hanyalah milik Allah semata  dan  sebagai hamba yang baik sepatutnya kita harus selalu berusaha dan berdoa, maka dari itu Jika  ada kritik dan saran silahkan komentari post ini untuk manfaat bersama.thx.

tipe-tipe interface

Interface adalah suatu komunikasi yang fitur yang tersedia supaya user dapat mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua (barangkali kedua tertua setelah gesture) yang dipakai orang untuk berkomunikasi sehari-harinya.Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal.Terlebih dari itu dalam dunia desain situs Web yang serba grafis.

Tipe interface pada sistem operasi :

1.Command Line Interface (CLI)

2.Graphical User Interface (GUI)

tipe-tipe interaksi

Tipe interaksi pada interaction:

1. Direct adalah suatu pengoperasian secara langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash.

2. Menu selection adalah suatu yang memilih perintah dari daftar yang disediakan.

3. Command language adalah suatu penulisan perintah yang sudah ditentukan pada program.

4. Natural language – perintah dengan bahasa alami : Menggunakan bahasa alami untuk mendapatkan hasil.

Kesimpulan : mekanisme komunikasi antara pengguna (user) dengan sistem. User Interface dapat menerima informasi dari pengguna (user) dan memberikan informasi kepada pengguna (user) untuk membantu mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi

Selengkapnya...

Pengertian Struktur Navigasi Dan Story Board

STRUKTUR NAVIGASI

Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia mempunyai suatu pedoman dan arah informasi yang jelas. Dalam pembuatan aplikasi multimedia terdapat empat macam bentuk dasar struktur navigasi yang digunakan, yaitu : Struktur Navigasi Linear, Struktur Navigasi Non Linear, Struktur Navigasi Hierarchi, dan Struktur Navigasi Composite.

1. Struktur Navigasi Linear

Merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. Biasanya struktur ini digunakan Multimedia Presentasi karena tidak menuntut keinteraksian tetapi hanya memerlukan keindahan dan kemudahan menampilkan data sebagai informasi.

Gambar Struktur Navigasi Linear

2. Struktur Navigasi Non Linear

Struktur navigasi non linear ( tidak berurut ) merupakan pengembangan dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur linear ini berbeda dengan percabangan pada struktur hierarki, karena pada percabangan non linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada master page dan slave page.

Gambar Struktur Navigasi Linear

3. Struktur Navigasi Hierarchi

Struktur navigasi hierarchi ( bercabang ) merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan informasi yang berdasarkan criteria tertentu. Informasi pada halaman utama disebut parent dan informasi pada cabangnya disebut child.

Gambar Struktur Navigasi Hierarchi

4. Struktur Navigasi Composite

Struktur Navigasi Composite ( campuran ) merupakan struktur gabungan dari ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas. Kelebihan dengan menggunakan struktur navigasi ini adalah suatu aplikasi mampu memberikan keterkaitan informasinya lebih baik.

Gambar Struktur Navigasi Composite

STORYBOARD

            Storyboard adalah jalan lain untuk menjelajahi kemungkinan narasi atau untuk melatih sebuah penampilan. Para orang tua mengatakan bahwa “sebuah gambar dapat menerangkan ribuan kata” sangat cocok untuk storyboard. Pada umumnya, pada pembuatan film, buku komik dan animasi, sebuah skrip dikembangkan sebelum storyboard dibuat. Penerangan cerita tidak selalu memerlukan skrip yang selesai untuk mengambil keuntungan dalam proses storyboard.
            Namun kita harus memiliki cerita dan cerita terebut memiliki konsep yang kuat. Storyboard yang baik dapat membantu kita memahami sebuah cerita yang tidak biasa atau memfasilitasi perkembangan cerita aslinya. Sebuah storyboard adalah sebuah seri dari gambar yang bersambung, dengan atau tanpa kata, yang memberitahukan sebuah cerita yang berkelanjutan.
           Seni dan lembar storyboard tersedia di toko kebutuhan seni, tetapi kita juga dapat membuatnya sendiri. Cukup gambar satu seri kotak pada sebuah kertas tulis horizontal. Beri sedikit ruang dibawah setiap kotak untuk kata-kata. Kita dapat membuatnya langsung dengan bolpoin atau bisa juga menggunakan komputer. Setelah kita memiliki contoh desainnya, cetak atau perbanyak beberapa lembar untuk digunakan. 

Character Design

Dalam pembuatan karakter terdapat beberapa tips yang dapat diikuti. Seorang karakter akan menjadi menarik jika memenuhi kriteria sebagai berikut :

1. Karakter itu menginginkan sesuatu untuk dicapai.
2. Untuk mencapai keinginannya itu si karakter harus berjuang menghadapi berbagai tantangan. Hal ini dapat berupa kepemilikan tubuh, sebuah hubungan, keadaan pikiran, dll.

• Contoh Pembuatan Storyboard

          Storyboard merupakan naskah yang dituangkan dalam bentuk gambar atau sketsa yang berguna untuk lebih memudahkan cameraman dalam pengambilan gambar Nih salah satu contohnya storyboard dalam pembuatan video klip, berikut contoh gambar :

Storyboard menampilkan informasi Karakter dan bagaimana mereka bergerak komunikasi antar karakter (jika ada) Durasi antara frame di storyboard Lokasi dan perlakuan kamera.

Selengkapnya...