INTERAKSI MANUSIA DAN KOMPUTER. Astrid Lestari Tungadi, S.Kom., M.TI.

Transkripsi

1 INTERAKSI MANUSIA DAN KOMPUTER Astrid Lestari Tungadi, S.Kom., M.TI.

2 ATTENTION 1. Menentukan tujuan website

3 ATTENTION 1. Menentukan tujuan website

4 ATTENTION 2. Gambaran jelas tentang situs dan pembuatan sitemap

8 ATTENTION 3. Informasi yang Disajikan

9 4. Segmen Pengguna ATTENTION

10 1. Layout Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan keseimbangan layout secara keseluruhan. Susunan paling umum adalah atasbawah-kiri-kanan.

11 1. Layout Tip: Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca. Susun elemen berdasarkan skala prioritas dari paling penting penting kurang penting. Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di sebelah kiri, sedangkan sidebar di sebelah kanan. Perhatikan pula keseimbangan susunan elemen desain.

12 2. White Space White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda yang belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya. Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda.

13 2. White Space Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014): Berfungsi sebagai separator untuk setiap elemen desain. Memberi fokus terhadap elemen yang ingin ditonjolkan. Memberi kesan desain yang lebih clean dan relaxing. Menciptakan layout yang lebih seimbang dan harmonis. Meningkatkan keterbacaan teks. Tip: Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen lainnya. White space juga termasuk jarak antarbaris dan antarparagraf dalam body text.

14 3. Jenis Huruf Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya.

15 3. Jenis Huruf a. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan pada buku, surat kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR), Garamond, Georgia, Cambria.

16 3. Jenis Huruf b. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.

17 3. Jenis Huruf c. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll), memberikan kesan klasik, santai, dan kasual. Anda bisa menggunakan jenis huruf ini untuk judul post, tetapi hindari menggunakannya untuk body text.

18 3. Jenis Huruf d. Dekoratif, sama seperti script, huruf dekoratif juga memiliki banyak sekali variasi dari mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text. Tetapi, Anda bisa menggunakan huruf jenis ini untuk tulisan di image asalkan hanya untuk satu atau dua kata, bukan untuk kalimat panjang.

19 3. Jenis Huruf d. Dekoratif

20 3. Jenis Huruf Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai dengan karakter situs web atau produk Anda.

21 3. Jenis Huruf Legibility adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit diolah oleh pembaca, misalnya jenis-jenis huruf script atau dekoratif.

22 Kata pertama menggunakan title case atau kombinasi huruf besar dan kecil, sedangkan yang kedua memakai all caps atau kapital. 3. Jenis Huruf Perhatikan contoh huruf berikut, keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang berbeda.

23 3. Jenis Huruf Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama. Readibility juga berhubungan dengan jarak antarhuruf dan jarak antarkata.

24 3. Jenis Huruf Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda, Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna paling baik untuk body text adalah hitam atau gradasi abu-abu tua. Warna lain di dalam body text hanya dipergunakan untuk link atau subjudul. Judul? Boleh, Anda boleh memakai huruf berwarna-warni untuk judul atau judul sidebar, tetapi pastikan warna yang Anda gunakan konsisten.

25 3. Jenis Huruf Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling pas untuk body text biasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen lainnya bisa Anda sesuaikan dengan bidang layout.

26 3. Jenis Huruf Tip: Jenis huruf sans serif paling baik untuk digunakan di layar. Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa mengkombinasikan antara huruf serif dengan sans serif atau script dengan sans serif. Misalnya, Georgia untuk judul dan Helvetica untuk body text. Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px untuk footer.

27 4. Pilihan Warna Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri. Warna juga memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam bawah sadar. Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain sebuah web.

28 4. Pilihan Warna

29 4. Pilihan Warna

30 4. Pilihan Warna Tip: Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya. Misalnya, latar putih atau abu-abu muda untuk latar dan hitam atau abu-abu tua untuk huruf body text. Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale). Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya. Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa menggunakan warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

31 4. Pilihan Warna

32 5. Navigasi Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs website Anda. Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan dan menemukan data.

33 5. Navigasi

34 5. Navigasi Tip: Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header. Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web Anda. Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris navigasi. Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik. Anda bisa menggunakan navigasi linear atau navigasi hamburger.

35 6. Tombol Search Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan, sedangkan tombol search adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

36 6. Tombol Search

37 6. Tombol Search Tip: Letakkan tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di bawah header. Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA gunakan simbol lup yang merupakan simbol universal. Untuk pengalaman pengguna yang lebih baik, Anda bisa menggunakan fitur Google custom search.

38 7. Halaman About Me/Us Jika Anda bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis yang sama sekali baru, atau bukan pemilik situs web yang sangat terkenal, laman About Me/Us memiliki beberapa fungsi: Memperkenalkan diri/perusahaan Anda. Memperkenalkan jasa/produk yang Anda miliki. Menjelaskan secara spesifik bidang yang Anda geluti. Membangun engagement dengan pembaca. Percaya atau tidak, pembaca lebih suka membaca tulisan dari seseorang yang dia kenal daripada dari penulis misterius. Jika Anda adalah blogger, laman About Me akan memudahkan calon klien menemukan informasi tentang siapa Anda.

39 7. Halaman About Me/Us

40 7. Halaman About Me/Us

41 7. Halaman About Me/Us Tip: Letakkan laman About Me/Us di navigasi agar mudah ditemukan. Laman About Us bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau organisasi. Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan tentang siapa diri Anda, tetapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin Anda tonjolkan. Tidak usah terlalu panjang, ini profil, bukan cerpen.

42 7. Halaman About Me/Us Tip: Anda juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Kontak? Ya, Anda bisa memasukkan juga kontak di laman About Me. Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose yang sekiranya membentuk citra diri Anda. Jika Anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan.

43 8. Halaman Contact Halaman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Halaman kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang yang sulit dihubungi sering kali membuat frustrasi. Anda bisa meletakkan halaman kontak di beberapa tempat: navigasi, header, footer.

44 8. Halaman Contact

45 8. Halaman Contact Apa saja yang harus ada di laman kontak: Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel. Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel. Form (opsional).

46 9. Footer yang Informatif Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial. Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi lain yang memudahkan pembaca.

47 10.Kualitas Image Walau bagaimanapun, kita harus tetap mempertimbangkan aspekaspek visual untuk memikat pembaca. Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten.

48 10.Kualitas Image

49 10.Kualitas Image Tip: Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI. Jika Anda belum familiar dengan ini, Anda bisa melihatnya di properties. Klik kanan image properties details. Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah. Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri. Jika Anda menggunakan foto dari stock images, pastikan Anda memakai foto gratis, bukan yang berlisensi seperti Shutterstock, Depositphotos, dll.

50 10.Kualitas Image Tip: Gunakan foto yang relevan dengan konten. Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, bukan hanya menyebutkan Foto: Google. Sebab Google adalah mesin pencari, bukan penyedia foto gratis. Jika Anda menggunakan foto sendiri dan ingin menggunakan watermark, gunakan watermark sewajarnya. Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

51 PROJECT IV Desain suatu website (menggunakan Edraw atau Photoshop) sesuai tujuan dari studi kasus Anda. Buatlah 2 (dua) buah versi tampilan yaitu versi web browser komputer dan web browser mobile. Desain website berjumlah minimal 4 halaman (Home dan About Us/Contact Us wajib ada).

52 PROJECT IV PEMBAGIAN KELOMPOK DAN STUDI KASUS: Kelompok 1 : & Website Perusahaan berstandar nasional Kelompok 2 : & Website E-Commerce Kelompok 3 : & Website Berita Kelompok 4 : & Website Sekolah Playgroup dan Taman Kanak-Kanak

53