Desain Halaman Web Terinspirasi oleh Edward Tufte
 

Berikut set pertanyaan dan jawaban tentang desain Web membentuk dasar dari sebuah artikel di majalah Prancis "Masuknya" di mana saya diwawancarai tentang pengaruh prinsip-prinsip desain Edward Tufte sebagai mereka berlaku untuk halaman di World Wide Web.

(Q) Apakah isu-isu dari karya Edward Tufte yang relevan untuk situs Web?

Masalah yang saya anggap paling relevan adalah:

• Media Keluaran: penulis hardcopy tahu target media mereka, tapi konten Web dapat diberikan pada perangkat yang berbeda secara radikal dalam hal ukuran, resolusi, dan bahkan jenis media itu sendiri (workstation high end, laptop kecil, PDA, braille, kata yang diucapkan, dll )
• Harapan pengguna: pengguna Web mendekati informasi yang berbeda dari di atas kertas dan lebih mungkin untuk memindai informasi dari membacanya
• Ergonomi: teknologi saat ini untuk browsing Web jauh lebih rendah daripada hardcopy dalam banyak cara. Yang menampilkan resolusi rendah, posisi tampilan adalah tetap, dan kontrol mouse / keyboard sangat canggung dibandingkan dengan pensil dan kertas
• Ruang isi: banyak ruang halaman Web diambil oleh menu, toolbar, dan kontrol navigasi, sehingga mengurangi ruang untuk konten
• Kesalahan ejaan: ini menyebabkan kegagalan sebenarnya navigasi dan pencarian sebagai lawan hanya malu atau kebingungan
• Konversi ke hardcopy: ini sering gagal karena font yang hilang, hilang konversi grafis, serta ukuran dan halaman masalah tata letak
• Grafik sampah dan dis-informasi: resolusi rendah dari tampilan saat ini ditambah dengan berkedip-kedip menampilkan CRT berarti bahwa kekacauan dan moire pola kurangi bahkan lebih dari tampilan di atas kertas dan berkontribusi kelelahan dan kebingungan.
• Warna: resolusi rendah dari tampilan dan kemudahan dan biaya nol warna berarti bahwa warna dapat baik digunakan untuk lebih efektif menyampaikan informasi (misalnya, ketika semua elemen dari pangsa topik tunggal warna yang sama) atau bisa disalahgunakan memperburuk kebingungan .
• Dokumentasi data: karena jauh lebih mudah untuk melemparkan sebuah halaman Web dari mempublikasikan sebuah artikel di jurnal atau majalah, dan karena mesin pencari dapat mengeruk halaman berdasarkan kata kunci, ada yang jauh lebih besar mungkin dari menghadapi pengetahuan sampah di web. Saya melihat kebutuhan yang kuat di masa depan untuk memiliki situs bersertifikat dalam beberapa cara untuk memastikan informasi yang berkualitas dan memiliki mesin pencari sensitif terhadap sertifikasi ini.
• Density informasi: resolusi rendah layar dan lambat kali download untuk file besar membuat informasi kepadatan tinggi kurang diinginkan di Web. Berbagai teknik dapat digunakan untuk mengkompensasi hal ini, seperti dokumentasi ukuran file dan waktu download, pilihan grafis resolusi yang berbeda, koleksi thumbnail dan / atau gambar cropped yang, ketika diklik di layar versi resolusi tinggi dari thumbnail, dll
• Teks dibandingkan grafis: kali download, kemampuan browser yang berbeda, dan isu-isu resolusi ujung keseimbangan teks dibandingkan grafis lebih ke arah teks.
• Sequential dibandingkan pemahaman gestalt: Tufte menunjukkan bahwa kepadatan tinggi grafis di atas kertas membiarkan Anda melihat pola yang kompleks sebagai gestalt tunggal. Namun, display Web interaktif dapat menyebabkan Anda secara berurutan meskipun langkah-langkah yang mengekspos Anda hanya dengan konteks yang perlu Anda ketahui berdasarkan pilihan Anda sebelumnya, bukan seperti pohon telepon visual. Dalam beberapa kasus ini lebih efektif daripada layar kepadatan tinggi, dalam kasus lain itu kurang begitu.
• Mempertahankan konteks: jauh lebih mudah untuk tersesat di situs Web daripada buku karena ada begitu banyak jalur untuk mengejar. Oleh karena itu, alat navigasi yang efektif adalah jauh lebih penting di Web daripada untuk hardcopy.

Di antara situs yang saya sukai adalah:

• NASA Skywatch situs di: http://spaceflight.nasa.gov/realdata/sightings/index.html.

Ini memberikan informasi tentang jumlah satelit yang besar di orbit. Halaman awal menjelaskan tujuan di kedua teks dan streaming media format, membahas sumber daya yang dibutuhkan dalam hal waktu download dan ukuran file, dan berisi kontrol navigasi dua tingkat yang bagus yang mengarahkan Anda untuk setiap bagian dari situs NASA.

Java Applet memberikan informasi tentang satelit dan posisi orbital yang melayani baik insinyur teknis dan masyarakat melalui tabel dan peta warna trek orbital dijelaskan terhadap diidentifikasi dan diuraikan rasi bintang untuk lokasi tertentu. Hal ini mudah digunakan, menarik, dan sangat informatif.

• Situs lain yang baik adalah: http://www.nsf.gov halaman awalnya adalah menarik, kompak, menggunakan beberapa grafis, dan download dengan cepat. Hal ini juga berisi informasi yang bagus dua tingkat kontrol navigasi, kontak, privasi, membantu, dan kustomisasi, alat pencarian, pilihan untuk kategori penampil (siswa, guru, Prinsip Penyidik), dan banyak dari halaman berikutnya menawarkan beberapa pilihan untuk melihat data, seperti HTML, teks biasa, dan format PDF. Banyak, tapi tidak semua, halaman mempertahankan tampilan yang sama dan merasa dan kontrol navigasi dari halaman rumah.
• Beberapa grafis sangat informatif dapat ditemukan dengan mengklik pada "Peta Pasar" di: http://www.smartmoney.com/maps/

Sementara itu awalnya dibuka dengan iklan-benar berguna dan mengganggu yang tersisa pada layar untuk waktu yang lama dan memberi Anda petunjuk mengenai apa yang berikut, tampilan yang dihasilkan adalah layak. Ini berisi representasi dari banyak saham, dikelompokkan berdasarkan sektor, dan kode oleh daerah berwarna yang ukurannya mencerminkan pangsa pasar mereka, dan yang warna dan intensitas menunjukkan kinerja saham mereka: arti merah penurunan tajam terang, arti hitam tidak ada perubahan, dan hijau terang yang menunjukkan kenaikan kuat , dengan nuansa menengah di antara. Melirik layar hari ini, saya dapat melihat bahwa saham Teknologi adalah cara turun, saham energi naik, seperti staples konsumen. Aku bisa melihat sektor secara lebih rinci, dapat mouse daerah untuk mengidentifikasi saham tertentu dan mendapatkan beberapa informasi kinerja, dan dapat klik pada saham untuk mendapatkan informasi rinci. Hal ini juga berisi sebuah panel yang memungkinkan Anda menyesuaikan peta. Ini adalah contoh yang baik dari grafis multi-fungsi yang memungkinkan Anda melihat informasi dalam berbagai cara.

Sebuah situs web yang baik menggabungkan berikut:

• Hal ini didasarkan pada pengguna yang berpusat (sebagai lawan perusahaan, struktur, atau lainnya sudut pandang), diuji desain user
• Halaman awal berisi HTML berteknologi rendah sederhana yang memuat cepat, tidak memerlukan plugin, bekerja pada hampir semua browser, menempatkan informasi yang paling penting di bagian atas, dan memberitahu orang-orang segera:
  • apa pelajaran mencakup atau apa masalah itu alamat
  • jika memiliki informasi yang mereka cari
  • jika informasi tersebut saat ini (misalnya, tanggal-terakhir diubah)
  • apa bukti bahwa informasi tersebut akurat
• Halaman awal memiliki logo mengidentifikasi dan berisi atau memiliki link ke:
  • peta situs
  • kontak informasi
  • informasi tentang organisasi yang bertanggung jawab
  • bentuk umpan balik situs atau pointer ke sebuah kelompok diskusi
  • jaminan untuk keamanan dan privasi
  • situs terkait
  • Informasi tentang teknologi yang dibutuhkan untuk melihat halaman berikutnya di situs (misalnya, versi browser, download yang diperlukan, ukuran file atau kali ownload)
• Halaman berikutnya di situs memiliki banyak kualitas dari halaman awal, tetapi juga:
  • menggunakan tampilan yang sama dan merasa sebagai halaman rumah dalam hal penampilan dan lokasi dari logo dan informasi lainnya yang secara unik mengidentifikasi situs (style sheet eksternal yang berguna untuk ini)
  • menyediakan kontrol navigasi yang konsisten yang terlihat sama dan berada di lokasi yang sama, seperti "Next", "Sebelumnya", dan "Home" tombol (terutama menghindari halaman di mana tombol "Kembali" tidak bekerja)
  • display konteks dan lokasi: Dalam situs kompleks sangat penting untuk mengetahui di mana Anda berada, dan di mana Anda telah. Sementara frame menimbulkan masalah kegunaan utama mereka kadang-kadang digunakan untuk memberikan daftar isi yang tetap konstan di seluruh situs. URL yang hanya berisi kata-kata sederhana dan tanpa simbol dapat membantu mengidentifikasi lokasi di sebuah situs, serta diagram pohon yang menyoroti lokasi pengguna saat
  • Jendela kontrol benar: Sebuah proliferasi jendela yang tinggal di sekitar menyebabkan kekacauan dan kebingungan (serta risiko keamanan jika pengguna melakukan lebih dari surfing) tapi windows yang secara otomatis menutup sendiri mungkin mengejutkan dan membingungkan pengguna: desainer web harus mempertimbangkan ini masalah berdasarkan pada keadaan yang berlaku
• Semua halaman menggunakan:
  • latar belakang diredam yang tidak mengganggu overlay informasi
  • kontras yang baik antara latar belakang dan teks atau kontrol
  • warna-warna cerah hemat untuk menyorot isi penting
  • warna yang sama untuk semua item yang termasuk dalam kategori yang sama
  • teks kecuali grafis memberikan keuntungan yang nyata
  • informasi struktural terlihat, seperti judul, sub-judul, dan daftar peluru di tempat paragraf panjang
  • ruang putih sebagai pembatas utama
  • secara substansial mengurangi teks dibandingkan dengan hardcopy
  • mantra memeriksa untuk memastikan bahwa navigasi dan fungsi pencarian kerja

Untuk beberapa keindahan sejauh ada di mata orang yang melihat bahwa pengguna dilatih untuk menafsirkan pola-pola tertentu dapat melihat keindahan dalam sebuah situs yang masuk akal bagi mereka, tapi tampaknya jelek dan tidak terorganisir untuk seseorang tanpa latar belakang mereka (sering kita melihat apa yang kita harapkan lebih dari apa yang ada, bukan seperti katak yang sebagian besar buta terhadap segala sesuatu yang tidak kecil, gelap, dan bergerak tersentak - lalat).

Namun, untuk situs yang tidak memerlukan pengetahuan khusus, saya percaya estetika dapat dicapai melalui desain yang jelas yang menekankan kegunaan, terutama jika penambahan estetika hanya ditambahkan ketika mereka sadar dibenarkan dalam hal utilitas mereka

• Perbedaan ukuran: jika kita membatasi pembahasan kita untuk "tradisional" komputer dan display, maka perbedaan ukuran layar (sebagai lawan resolusi) tidak sangat mempengaruhi pemahaman grafis sejak besar layar 19 inch hanya 2,5 kali luas kecil 12 inch. Namun, kita sekarang melihat peningkatan jumlah perangkat, seperti PDA, ponsel, dan bahkan jam tangan, yang berselancar di Web dan yang layar 100 kali lebih kecil. halaman Web yang khas hanya tidak akan muat di perangkat tersebut, dan desain halaman harus secara khusus ditargetkan untuk mereka, meskipun XML / XSL mungkin sering digunakan untuk kembali tujuan dokumen yang lebih besar untuk muat.

Dibandingkan dengan besar lipat out peta atau halaman yang memungkinkan mata untuk dengan mudah menyapu di daerah yang luas, Web penampil mengandalkan link ke beberapa halaman yang berisi bagian-bagian dari pandangan, dan konteks keseluruhan hilang - siapa saja yang menggunakan peta jenis buku tahu bagaimana sulitnya untuk mengikuti rute yang melintasi halaman yang berbeda; sama, perbandingan dalam grafik ilmiah besar sangat sulit untuk membuat ketika penonton tidak bisa melihat semua itu sekaligus.

Selain itu, saat ini layar LCD menawarkan sudut pandang layar yang terbatas, sehingga bahkan jika mereka resolusi besar atau tinggi, mereka akan membuat pemahaman di daerah yang luas yang sulit.

• Perbedaan dalam resolusi: ini bahkan lebih penting daripada ukuran. Secara teoritis bahkan halaman dirancang untuk layar 20 inci akan muat di layar jam tangan jika resolusi yang sama, tapi layar resolusi rendah tidak hanya memaksa pengguna ke horisontal bergulir, namun mungkin gagal untuk membuat bagian-bagian utama dari itu.

Dibandingkan dengan kertas, display yang umum digunakan saat ini memiliki resolusi lima sampai 10 kali lebih sedikit. Akibatnya, detail kasar, teks kecil adalah samar dan kabur, dan melihat melelahkan, terutama ketika layar flicker hadir. Juga, konteks keseluruhan hilang, memaksa pengguna untuk mengingat dan menghubungkan informasi dari layar sebelumnya, sesuatu yang pikiran manusia adalah kurang cocok.

Di sisi lain, Web menyediakan alat-alat yang sebagian mengkompensasi ini:

• meskipun kekurangan kegunaan tertentu, terutama berkenaan dengan navigasi, satu dapat menggunakan frame untuk menampilkan gambaran menyeluruh dari adegan dalam satu frame dalam bentuk peta gambar yang dapat diklik: ketika pengguna mengklik suatu daerah di peta ikhtisar, resolusi tinggi Mengingat sebagian dari gambar muncul di frame 2. Hal ini sangat efektif jika gambar di frame pertama menyoroti area yang diklik pada, menampilkan posisi mouse saat ini relatif terhadap peta, dan jika peta gambar termasuk sejumlah besar tumpang tindih serta berbagai tingkat zoom, memperbaiki kesempatan untuk menampilkan semua konteks yang diinginkan.
• kadang-kadang animasi dapat secara efektif digunakan di tempat "kelipatan kecil": gambar yang halus dan cepat berubah, terutama ketika berada di bawah kontrol pengguna penuh, sering dapat menyampaikan informasi lebih baik dari halaman resolusi tinggi statis

• Namun, perlu diketahui bahwa ukuran dan resolusi keuntungan kertas lebih menampilkan akan hilang dalam 5-10 tahun: sudah dua megapiksel layar LCD pada komputer Laptop di pasar; IBM baru-baru ini meluncurkan LCD 22 inci dengan menakjubkan 9 megapixel yang benar-benar saingan halaman yang dicetak (saat ini sangat mahal tapi pasti akan turun harga), dan ClearType (TM) teknologi sub-pixel Miscosoft ini sangat meningkatkan resolusi efektif teks dan / gambar hitam putih, kadang-kadang dengan 300%

Selain itu, LCD yang lebih baru memiliki bidang pandang yang lebih luas, dan mereka tidak berkedip. Dalam waktu dekat, tablet PC dengan masukan stylus dapat diselenggarakan dan dimanipulasi seperti majalah, lebih unggul untuk menunjuk, menggambar, dan menulis dari mouse dan keyboard, dan akan ditambah dengan suara dan audio input / output. Sangat display layar besar berada di jalan serta menampilkan retina untuk komputer dpt dipakai memberikan resolusi tinggi gambar stereoscopic benar bahwa tampaknya pemakainya menjadi 6 kaki lebar.

Web dapat menyediakan lingkungan informasi yang lebih kaya daripada yang mungkin dengan halaman statis di atas kertas, seperti:

• Up-to-date informasi: informasi Web tidak hanya dapat lebih banyak arus dari hardcopy, tetapi dapat seketika seperti dalam kasus lalu lintas Web Cams, pemesanan tiket, laporan stok, readouts GPS, dll
• Pengguna dikontrol animasi: kelipatan kecil biasanya digunakan untuk mensimulasikan animasi di atas kertas, tetapi Web menawarkan kemungkinan jauh lebih besar, seperti
  • gerak waktu sebenarnya
  • kontrol pengguna dari kecepatan dan arah (maju dan mundur)
  • animasi yang dipilih pengguna subset sehingga transisi tertentu dapat diamati pada berbagai kecepatan dan arah
  • membekukan bingkai capture bahwa satu atau lebih frame dalam animasi
  • real time respon terhadap input yang diberikan baik dari pengguna atau sumber eksternal
• Grafis 3D: seringkali sulit untuk menemukan sudut pandang yang tepat untuk adegan 3D yang kompleks di atas kertas, karena setiap tampilan tunggal, atau bahkan satu set pandangan, dapat menyembunyikan atau mendistorsi informasi penting. Tapi 3D visualisasi data di Web, seperti yang disediakan oleh VRML atau program lain, memungkinkan pengguna untuk melihat data dari berbagai sudut. Beberapa tahun yang lalu saya melihat sebuah wawasan demonstrasi oleh JW Tukey yang menjelajahi multi-dimensi (10-12 dimensi) set data secara interaktif. Awalnya semua yang muncul adalah set titik berarti acak, tetapi karena ia runtuh data bersama dimensi tertentu dan diterapkan rotasi, kurva kuat dan sederhana muncul yang menggambarkan hubungan penting.

Meskipun benar bahwa kontrol objek 3D agak sulit saat ini, seperti yang biasanya kita melakukannya melalui mouse pada permukaan 2D, akan lebih mudah dalam waktu dekat melalui headset yang menarik dan ringan yang menawarkan visi stereoscopic benar dikombinasikan dengan kamera stereo bahwa posisi track tangan di 3D, yang memungkinkan kita untuk "mengambil" dan memanipulasi gambar 3D dengan mudah seperti yang kita lakukan benda dunia nyata.

• Kepadatan tinggi grafis: meskipun penawaran hardcopy resolusi lebih tinggi dari display saat ini, teknologi Web tertentu membiarkan Anda memperbesar untuk melihat set data dalam jauh lebih rinci daripada yang mungkin di atas kertas.
• Analisis data eksplorasi: Web memungkinkan satu tidak hanya untuk melihat tapi memanipulasi dan menerapkan transformasi data untuk mengungkap hubungan yang tidak akan pernah bisa diamati di atas kertas
• Perangkat informasi Universal: Web, terutama melalui akses nirkabel, mungkin mengikat bersama segala bentuk informasi yang saat ini disediakan oleh banyak perangkat yang berbeda: jam tangan, jam alarm, radio, TV, koran, majalah, buku, CD, komputer, video game, hukum, keuangan, dan medis catatan, lisensi, izin, ruang kelas, teater, dll

Di antara cacat desain yang lebih menjengkelkan saya sering lihat adalah:

• Kurangnya informasi tanggal / waktu: informasi yang paling volatile untuk beberapa derajat. A "tanggal-terakhir diubah" sangat penting bagi sebagian besar situs, dan data bergantung waktu pada halaman membutuhkan dokumentasi waktu
• Navigasi membingungkan, jendela yang menonaktifkan navigasi, atau terlalu banyak jendela pop-up
• Halaman awal yang memuat terlalu lambat atau memerlukan plugin atau sumber daya yang luar biasa, atau script yang menonaktifkan browser
• Kurangnya informasi situs, seperti peta situs dan informasi kontak
• Kekacauan dalam hal tata letak yang membingungkan, paragraf panjang, grafis mengganggu, latar belakang mencolok, penggunaan yang tidak konsisten warna (warna yang berbeda dalam topik yang sama atau warna yang sama untuk topik yang berbeda), pola moire
• Ketidakpekaan ke batas teknis atau petunjuk: halaman Web harus menyediakan sumber alternatif melihat bagi mereka dengan browser yang terbatas, komputer, atau keterbatasan fisik.