The best WebApp interfaces are effic

The best WebApp interfaces are efficient in their presentation of content and func- tion, but they should also be aesthetically pleasing. Aesthetic design, also called graphic design, is an artistic endeavor that complements the technical aspects of both interface design and content design. Without it, a WebApp may be useful, but




unappealing. With it, a WebApp draws its users into a world that embraces them on a visceral, as well as an intellectual level.
But what is aesthetic? There is an old saying, “beauty exists in the eye of the be- holder.” This is particularly appropriate when aesthetic design for WebApps is con- sidered. To perform effective aesthetic design, we again return to the user hierarchy developed as part of the analysis model (Chapter 7) and ask, “Who are the WebApp’s users, and what WebApp look do they desire?”


How Do We Create an Aesthetically Pleasing Layout?

Every Web page has a limited amount of “real estate” that can be used to support nonfunctional aesthetics, navigation features, informational content, and user- directed functionality. The development of this real estate is planned during aes- thetic design.
Like all aesthetic issues, there are no absolute rules when screen layout is designed. However, a number of general layout guidelines are worth considering:

• Don’t be afraid of white space. It is inadvisable to pack every square inch of a Web page with information. The resulting clutter makes it dif- ficult for the user to identify needed information or features and creates visual chaos that is not pleasing to the eye. Referring back to Figure 9.3, the designer has chosen to provide a navigation link to content describing
technical details rather than incorporating this content on the existing page. The reason is to keep the page from becoming too busy and preserve white space.
• Emphasize content. After all, that’s the reason the user is there. Nielsen [Nie00] suggests that the typical Web page should be 80 percent content with the remaining real estate dedicated to navigation and other features. Referring back to Figure 9.1, the SafeHomeAssured.com home page is almost all content, providing the user with a picture of what SafeHome products are about.
• Organize layout elements from top-left to bottom-right. The vast majority of users will scan a Web page in much the same way as they scan the page of a book—top-left to bottom-right. If layout elements have specific priorities, high-priority elements should be placed in the upper-left portion of the page real estate.
• Group navigation, content, and functionality geographically within the page. Humans look for patterns in virtually all things. If there are no discernable patterns within a Web page, user frustration is likely to increase




(due to unnecessary searching for needed information). The interface design (e.g., Figure 9.3) for SafeHomeAssured.com places all major functions in the upper left-hand corner and has all content presented left to right and top
to bottom.

• Don’t extend your real estate with the scrolling bar. Although scroll- ing is often necessary (especially once you drill down to the detailed content pages), most studies indicate that users would prefer not to scroll. It is better to reduce page content or to present necessary content on multiple pages. The interface designer for the SafeHomeAssured.com WebApp violates this rule (it may be necessary to scroll to certain functionality or content), arguing
that necessary content overrides a desire to limit scrolling.

• Consider resolution and browser window size when designing the layout. Rather than defining fixed sizes within a layout, the design should specify all layout items as a percentage of available space [Nie00].
• Design the layout for freedom of navigation. The generic layout of
all WebApp pages should assume that the user will navigate to the page in ways that are not expected (e.g., via a direct link from a search engine). The layout should be designed to accommodate unpredictable arrival without confusion (on the part of the user). It is also important to ensure that a user is not allowed to navigate to a secure page without first passing through security validation. For example, if a visitor tried to navigate directly to the SafeHomeAssured.com monitoring services page shown in Figure 9.8, the visi- tor would be redirected automatically to the log-in page.
• Don’t assume that the layout will be consistent across different display devices and browsers. Design the layout so that it is effective on both large and small displays, using features that are properly translated on the majority of popular browsers.
• If you use photos, make them small format with the option to enlarge. Large JPEG files can take time to download. Most users will be satisfied with a thumbnail photo as long as they have the option to look at a larger version.
• If you want a cohesive layout, look, and feel across all WebApp pages, use a cascading style sheet (CSS). A CSS allows you to specify one look and feel (e.g., font type, size, and style) across all Web pages. Just as important, the CSS lets you modify the look and feel across all pages by making changes to only one file.

Nielson [Nie00] suggests an interesting design exercise when he states: “. . . go through your design elements and remove them one at a time. If your design works without a certain element, kill it. Simplicity always wins over complexity . . .”

Results (Indonesian) 1:

Antarmuka WebApp terbaik yang efficient dalam presentasi konten dan func-tion, tetapi mereka juga harus estetis. Desain estetika, juga disebut desain grafis, adalah sebuah upaya artistik yang melengkapi aspek-aspek teknis desain antarmuka dan konten desain. Tanpa itu, WebApp mungkin akan berguna, tetapi



tidak menarik. Dengan itu, WebApp menarik penggunanya ke dalam dunia yang merangkul mereka pada mendalam, serta tingkat intelektual.
tapi apa estetika? Ada pepatah lama, "Kecantikan ada di mata menjadi pemegang." Hal ini terutama sesuai ketika estetika desain untuk WebApps adalah con-sidered. Melaksanakan desain estetika yang efektif, kita lagi kembali ke hirarki pengguna yang dikembangkan sebagai bagian dari analisis model (Bab 7) dan bertanya, "Siapakah WebApp pengguna, dan melihat WebApp apa yang mereka inginkan?"


Bagaimana kita menciptakan Layout yang estetis menyenangkan?

setiap halaman Web memiliki jumlah terbatas "real estate" yang dapat digunakan untuk mendukung nonfungsional estetika, fitur navigasi, informasi konten, dan user - diarahkan fungsionalitas. Perkembangan ini real estat direncanakan selama aes - thetic desain.
seperti semua masalah estetika, ada tidak ada aturan mutlak ketika tata letak layar dirancang. Namun, sejumlah pedoman tata letak umum yang layak dipertimbangkan:

• Jangan takut spasi. Ini inadvisable untuk Pak setiap inci persegi dari halaman Web dengan informasi. Dihasilkan kekacauan membuat dif-ficult bagi pengguna untuk mengidentifikasi informasi yang diperlukan atau fitur dan menciptakan kekacauan visual yang tidak berkenan kepada mata. Merujuk kembali ke gambar 9.3, perancang telah memilih untuk memberikan navigasi link ke konten menggambarkan
rincian teknis daripada memasukkan konten ini pada halaman yang sudah ada. Alasannya adalah untuk menjaga halaman dari menjadi terlalu sibuk dan melestarikan ruang putih.
• menekankan konten. Setelah semua, itu adalah alasan pengguna yang ada. Nielsen [Nie00] menunjukkan bahwa halaman Web khas harus 80 persen konten dengan sisa real estate yang didedikasikan untuk navigasi dan fitur lainnya. Merujuk kembali ke gambar 9.1, halaman rumah SafeHomeAssured.com adalah hampir semua konten, menyediakan pengguna dengan gambar SafeHome apa produk yang tentang.
• mengatur unsur-unsur tata letak dari kiri atas ke kanan bawah. Sebagian besar pengguna akan memindai halaman Web dalam banyak cara yang sama seperti mereka scan halaman buku — kiri atas ke kanan bawah. Jika elemen-elemen tata letak memiliki prioritas specific, unsur-unsur prioritas tinggi harus ditempatkan di bagian kiri halaman real estate.
• Grup navigasi, isi, dan fungsi geografis dalam halaman. Manusia mencari pola di hampir semua hal. Jika tidak ada pola discernable dalam halaman Web, pengguna frustrasi cenderung meningkat



(karena tidak perlu mencari informasi yang diperlukan). Desain antarmuka (misalnya, Gambar 9.3) untuk SafeHomeAssured.com tempat semua fungsi utama di sudut kiri atas dan telah meninggalkan semua konten yang disajikan ke kanan dan atas
bawah.

• tidak memperpanjang real estat Anda dengan bar bergulir. Meskipun gulir-ing sering diperlukan (terutama sekali Anda telusuri konten halaman rinci), kebanyakan studi menunjukkan bahwa pengguna akan lebih suka untuk tidak gulir. Hal ini lebih baik untuk mengurangi konten halaman atau untuk menyajikan konten yang diperlukan pada beberapa halaman. Perancang antarmuka untuk SafeHomeAssured.com WebApp melanggar aturan ini (mungkin perlu untuk menggulir ke fungsi atau konten tertentu), berdebat
bahwa konten perlu mengabaikan keinginan untuk membatasi bergulir.

• mempertimbangkan resolusi dan browser ukuran jendela ketika merancang tata letak. Daripada defining fixed ukuran dalam sebuah layout, desain harus menentukan tata letak semuanya sebagai persentase dari ruang yang tersedia [Nie00].
• desain layout untuk kebebasan navigasi. Tata letak generik
semua halaman WebApp harus mengasumsikan bahwa pengguna akan menavigasi ke halaman dengan cara yang tidak diharapkan (misalnya, melalui link langsung dari mesin pencari). Tata letak harus dirancang untuk mengakomodasi tak terduga kedatangan tanpa kebingungan (pada bagian pengguna). Hal ini juga penting untuk memastikan bahwa pengguna tidak diizinkan untuk menavigasi ke halaman aman tanpa posisi melewati keamanan validasi. Misalnya, jika pengunjung mencoba untuk menavigasi langsung ke SafeHomeAssured.com pemantauan Layanan laman yang ditampilkan dalam gambar 9.8, visi-tor akan diarahkan secara otomatis ke log-in halaman.
• jangan menganggap bahwa tata letak akan konsisten di perangkat tampilan yang berbeda dan browser. Desain tata letak sehingga efektif pada menampilkan baik besar dan kecil, menggunakan fitur yang diterjemahkan dengan baik pada sebagian besar browser populer.
• jika Anda menggunakan foto, membuat mereka kecil format dengan opsi untuk memperbesar. Besar files JPEG dapat mengambil waktu untuk mendownload. Kebanyakan pengguna akan satisfied dengan foto thumbnail selama mereka memiliki opsi untuk melihat versi lebih besar.
• jika Anda ingin tata letak yang kohesif, melihat, dan merasakan semua WebApp halaman menggunakan sebuah cascading style sheet (CSS). CSS memungkinkan Anda untuk menentukan satu tampilan dan nuansa (misalnya, jenis font, ukuran, dan gaya) di semua halaman Web. Sama pentingnya, CSS memungkinkan Anda memodifikasi tampilan dan nuansa di semua halaman dengan membuat perubahan hanya satu file.

Nielson [Nie00] menunjukkan desain latihan yang menarik ketika ia menyatakan: "... pergi melalui elemen desain Anda dan menghapus mereka satu pada satu waktu. Jika desain Anda bekerja tanpa elemen tertentu, membunuh itu. Kesederhanaan selalu menang atas kompleksitas... "