aca Pedoman Antarmuka

These guidelines are designed to help developers and designers create a beautifully consistent experience on the elementary OS desktop. They were written for interface designers, graphic artists and software developers who will be working on elementary OS. They will not only define specific design elements and principles, but will also instill a philosophy that will help you decide when it is appropriate to deviate from the Guidelines. Adhering to the suggestions contained here will provide many benefits:

Untuk membantu Anda meraih tujuan tersebut, pedoman ini akan membahas elemen antarmuka dasar, bagaimana menggunakan mereka dan menempatkan mereka bersama secara efektif, dan bagaimana membuat aplikasi Anda terintegrasi baik dengan destop. Hal yang paling penting adalah mengikuti pedoman ini akan mempermudah dalam mendesain aplikasi baru, bukannya lebih sulit.

Namun, harap diingat bahwa ini adalah pedoman, bukan buku peraturan. Paradigma interaksi yang baru dan menakjubkan muncul setiap hari, dan masih banyak lagi yang menunggu untuk ditemukan. Ini adalah dokumen hidup yang bisa dan pasti akan terus berubah.

Untuk bagian yang belum ditulis, harap mengacu pada HIG GNOME (Pedoman Antarmuka Manusiawi GNOME)

Filosofi Desai

The elementary OS HIG isn't just about a set of concrete rules; it's meant to be flexible and extensible. As such, this very first portion of the guideline is all about the guiding philosophy we employ. For a quick crash course, we like "The User is Drunk":

Apa Yang Bukan Desai

Before we get into all the things that make up elementary OS apps, there is a clarification that needs to be made. We need to understand what exactly design is about, but more importantly we want to smash two major myths:

  1. Desain adalah bukan sesuatu yang Anda tambahkan setelah Anda selesai membuat sebuah produk. Apakah anda menyadarinya atau tidak, Anda secara konsisten merancang semua Anda anda buat. Itu adalah hal mendasar dalam membuat sesuatu. Desain bukan hanya apa yang terlihat. Tidak hanya warna dan fon. Desain adalah bagaimana sesuatu tersebut bekerja. Ketika Anda memutuskan untuk menambahkan sebuah tombol yang melakukan sesuatu, itu desain. Anda membuat keputusan untuk menambah tombol dengan sebuah ikon atau label dan lokasi tombol berada dan ukuran dan warna tombol tersebut. Keputusan adalah desain.

  2. Desain adalah bukan hanya, seperti, pendapatmu, teman. Desain adalah sebuah pengujian. Suatu desain akan memenuhi suatu tujuan tertentu daripada desain yang lain. Perhatikan berbagai jenis berbeda. Sebuah sepeda lipat memiliki seperangkat berbeda dari tujuan desain dari sepeda gunung. Hal-hal seperti berat, ukuran, dan tapak ban adalah faktor penting dalam membantu pengguna yang dituju mencapai tujuan mereka. Karena kami mengerti bahwa desain adalah tentang bagaimana memecahkan suatu masalah spesifik, kita juga harus mengerti bahwa kita dapat obyektif membandingkan efektivitas dua desain untuk memecahkan masalah.

  1. Design Is Not Veneer, Aral Balkan
  2. Design is Not Subjective, Jeff Law

Keringkasa

Selalu jadikan aplikasi anda mudah dipahami. Fungsi aplikasi anda harus selalu jelas. Anda dapat melakukannya dengan berbagai cara, tetapi salah satu cara terbaik adalah dengan mengikuti prinsip keringkasan.

Hindari Penumpukan Fitu

Terus memperkaya aplikasi Anda dengan fitur-fitur baru rasanya memang menyenangkan. Tetapi, penting untuk diingat bahwa setiap fitur baru memiliki harga yang harus dibayar, seperti:

Jadikan Modula

Build small, modular apps that communicate well. elementary OS apps avoid feature overlap and make their functions available to other apps either through Contractor or over D-Bus. This both saves you time as a developer (by other apps making their functions available to you), and is a courteous gesture towards other developers (by making your app's functions available to them).

Hindari Konfigurasi

Jika memungkinkan, hindari sepenuhnya menyediakan pengaturan atau konfigurasi apapun di dalam apl Anda. Menyediakan pengaturan biasanya adalah hal yang jalan keluar yang mudah dalam membuat keputusan tentang desain perilaku sebuah apl. Tetapi sama seperti masalah fitur yang kurang penting, pengaturan artinya lebih banyak kode, kutu, uji coba, dokumentasi dan kompleksitas.

angun untuk Pengalaman "Bisa Langsung Digunakan"

Design with sane defaults in mind. elementary OS apps put strong emphasis on the out of the box experience. If your app has to be configured before a user is comfortable using it, they may not take the time to configure it at all and simply use another app instead.

Tanya Sistem Operasi

Dapatkan informasi sebanyak mungkin secara otomatis. Daripada menanyakan pengguna nama atau lokasi mereka, tanyakan pada sistem semua informasi ini. Hal ini menghemat waktu apa yang pengguna lakukan dan membuat apl Anda tampak cerdas dan terintegrasi dengan baik.

Apakah Anda Sungguh Membutuhkannya?

Ketika Kamu Harus Melakuka

Ketika Anda Sangat Terpaksa Harus

Jagalah semuanya tetap kontekstual. Daripada menyelipkan banyak saran di dalam dialog konfigurasi, cobalah tampilkan saran tersebut sesuai konteks objek yang dipengaruhi (mirip seperti tombol shuffle dan repeat yang muncul di aplikasi musik Anda).

Jika apl Anda perlu dikonfigurasikan sebelum bisa digunakan (seperti aplikasi surat), sajikan konfigurasi ini di dalam jendela utama seperti Layar Sambutan. Sekali lagi, pastikan ini adalah langkah yang harus terapkan. Menambahkan layar langkah konfigurasi yang tidak perlu membuat pengguna menghentikan apa yang mereka ingin lakukan ketika mereka menjalankan apl Anda untuk pertama kali.


Lihat Juga:

  1. Checkboxes That Kill Your Product oleh Alex Limi
  2. Don't Give Your Users Shit Work oleh Zach Holma
  3. The Wizard Anti-Pattern by Stef Walter

Panduan Ringkas

Kebanyakan pengguna tidak ingin membaca seluruh isi panduan terlebih dahulu sebelum mulai menggunakan aplikasi Anda. Karena itu mereka ingin agar aplikasi Anda mudah mereka pahami.

Gunakan Kata-Kata yang Mudah Dimengerti

Avoid technical jargon and assume little-to-no technical knowledge. This lets your app be "self-documenting."

erikan penjelasan nonteknis, jangan hanya pesan-pesan-galat khusus. Jika ada sesuatu yang salah, berikan penjelasan mengenai apa yang terjadi dan bagaimana cara memperbaikinya.


Untuk informasi lebih lanjut, baca Kaidah Penulisan.

Alur Kerja Pengguna

Desain yang nampak adalah bagian besar dari pengalaman pengguna, tetapi begitu juga alur kerja pengguna, atau bagaimana mereka berinteraksi dengan sebuah aplikasi. Di bagian ini, kita ulas beberapa langkah penting alur kerja yang umum:

Kesan Pertama

Pengaturan yang Dibutuhka

When a user first launches an app, they should be able to get down to business as quickly as possible. If configuration is not absolutely required for the first use, they should not be required to configure anything. If configuration is required, they should be presented with a clean and simple welcome screen within the app. Avoid separate configuration dialogs when launching.

Kecepatan Membuka

Peluncuran pertama aplikasi anda adalah kesan pertama pengguna dari aplikasi anda; ini adalah kesempatan untuk benar-benar memamerkan desain dan kecepatan. Jika aplikasi Anda harus mengkonfigurasi hal-hal di latar belakang sebelum tampak dijalankan, hal ini memberikan kesan bahwa aplikasi lambat atau memerlukan waktu yang lama untuk memulai kepada pengguna. Sebaliknya, fokus pada membuat jendela aplikasi yang muncul dengan cepat dan siap untuk digunakan, dan melakukan tugas lainnya di belakang layar. Jika tugas di latar belakang membatasi (mis. pengguna tidak dapat melakukan tugas-tugas tertentu sampai itu selesai), tunjukkan beberapa jenis indikasi bahwa proses latar belakang sedang berjalan dan batasi item antarmuka menjadi tidak sensitif kepada pengguna (lihat: Konsep Widget).

Menyambut Pengguna

If there is no content to show the user, provide actions they can act upon by using a simple welcome screen. Let them open a document, add an account, import a CD, or whatever makes sense in the context of the app.

Me-reset Aplikasi

Jika pengguna me-reset aplikasi (mis. menghapus semua lagu di daftar koleksi atau menghapus semua akun email di aplikasi klien email), kembalikan aplikasi kepada keadaannya semula seperti ketika baru dijalankan untuk pertama kali.

Peluncuran Normal

Ketika pengguna menjalankan sebuah aplikasi, mereka melakukan tindakan secara eksplisit dan mengharapkan respon yang cepat atau langsung. Anda harus fokus pada tiga bidang utama saat menjalankan aplikasi: kecepatan, kejelasan tentang apa yang harus dilakukan selanjutnya, dan kondisi aplikasi.

Kecepata

Seperti yang telah dikatakan sebelumnya, kecepatan, terutama ketika menjalankan sebuah aplikasi, sangat penting. Harus ada sedikit mungkin jeda antara waktu pengguna memutuskan untuk menjalankan sebuah aplikasi dan mulai menggunakannya secara instan. Jika aplikasi anda membutuhkan splash screen, maka anda telah salah.

Mudah Dimengerti

Ketika pengguna menjalankan apl Anda, mereka harus tahu dengan pasti apa yang harus mereka lakukan selanjutnya. Hal ini dapat dicapai dengan mengikuti pedoman antarmua apl lain (untuk memastikan apl Anda konsisten dengan apl lainnya) dan dengan menawarkan tindakan pasti awal mulai. Jika apl Anda umumnya menampilkan "item", seperti lagu atau surel, pastikan pengguna mendapatkan item tersebut dengan langsung menampilkannya ketika apl terbuka. Jika tidak ada item yang terbuka sebelumnya, Anda harus menawarkan untuk membuka atau membuat item baru (seperti sebuah dokumen) dengan menggunakan layar sambutan.

Keadaa

Jika pengguna sebelumnya telah menggunakan apl Anda, adalah yang terbaik untuk mengembalikan keadaan apl Anda ketika pengguna membukanya lagi. Ini artinya apl kembali ke saat sebelum pengguna menutupnya sehingga mereka bisa langsung melanjutkan pekerjaannya lagi. Untuk pemutar musik, ini artinya membuka pada tilikan saat sebelum pengguna menutupnya dan jeda lagu saat pengguna menutup apl tersebut. Untuk penyunting dokumen, ini artinya terbuka dengan dokumen yang sama, di posisi yang sama dengan kursor berada di titik yang sama pada halaman.

Always Provide an Undo

Sometimes a user will perform an action which could possibly be destructive or traditionally irreversible. Rather than present the user with a warning, apps should let the user undo the action for an appropriate amount of time. Some prime examples of when this behavior is useful are:

Perilaku ini harus menjadi yang terakhir diimplementasikan dengan menyediakan waktu tunggu antara ketika aplikasi menunjukkan pengguna apa yang sedang terjadi dan melaksanakan tindakan yang sebenarnya. Untuk menjaga tetap responsif, aplikasi harus selalu nampak seperti melaksanakan tindakan sesaat setelah pengguna memulainya.

Perilaku ini menghasilkan keseimbangan terbaik dengan menjaga jarak pengguna sambil memastikan mereka tidak akan melakukan sesuatu yang tidak diinginkan. Penting untuk tetap menjaga tindakan pembatalan sederhana dan intuitif; cara yang umum adalah dengan menggunakan bilah info, walaupun metode yang lain mungkin juga tepat.


aca juga: Never Use a Warning When you Mean Undo oleh Aza Raski

Selalu Menyimpa

Users should feel confident when using elementary OS; they should know that everything they see is saved and up to date.

Apps in elementary OS should operate around an always-saved state. This means that changes the user makes are instantly applied and visible and that making the user manually save things is a legacy or specialized behavior.

Sebagai contoh, dialog Info Lagu harus memutakhirkan informasi trek secara instan tanpa pengguna harus menekan tombol simpan, preferensi pengguna harus diterapkan sesaat pengguna memanipulasi widget terkait, dan menutup aplikasi harus berarti bahwa saat membukanya lagi akan kembali seperti saat pengguna menutupnya.

Menutup

Ketika pengguna menutup aplikasi, biasanya karena mereka telah selesai mempergunakannya dan mereka ingin menyingkirkannya dengan cepat.

Keadaan Tersimpa

Aplikasi harus menyimpan keadaan terkini ketika ditutup sehingga bisa dibuka seperti saat pengguna menutupnya. Idealnya menutup dan membuka aplikasi tidak beda dari konsep tradisional tentang meminimalkan dan memaksimalkan sebuah aplikasi; yang artinya, semua elemen harus tersimpan termasuk dokumen yang terbuka, posisi gulir, riwayat urung, dll.

Tugas Lata

Jika memang harus bagi sebuah aplikasi menyelesaikan tugas latar setelah jendela ditutup, maka tugas harus diselesaikan sesegera mungkin setelah jendela tertutup. Jika aplikasi menjalankan tugas latar berulang (seperti klien surel), tugas latar harus ditangani oleh daemon yang terpisah yang tidak bergantung pada aplikasi itu sendiri.

Menutup Jendela Aplikasi

Hal ini tidak diinginkan pada jendela aplikasi untuk hanya meminimalkan jendela daripada menutup ketika pengguna mencoba untuk menutupnya. Sebaliknya, jendela aplikasi harus "tersembunyi". Jika memungkinkan maka akan melanjutkan proses di latar belakang (seperti download / mentransfer, bermain musik, atau mengeksekusi perintah terminal) backend aplikasi harus melanjutkan tugas dan berhenti ketika tugas selesai. Jika tidak jelas bahwa proses selesai (seperti dengan file download / mentransfer atau perintah terminal), aplikasi dapat menunjukkan pemberitahuan menginformasikan pengguna bahwa proses telah selesai. Jika itu adalah jelas, seperti dengan musik, maka tidak ada pemberitahuan diperlukan.

Membuka ulang Jendela Aplikasi

Jika pengguna kembali membuka aplikasi sementara proses latar belakang masih berjalan, maka aplikasi harus terbuka persis sebagaimana jendela telah terbuka sepanjang waktu. Misalnya, terminal harus menunjukkan keluaran terminal, pemutar musik harus pada halaman yang sama itu ketika tertutup, dan browser harus kembali ke halaman itu pada sebelumnya. Untuk lebih jelasnya, lihat diskusi tentang kondisi aplikasi pada Jalankan Normal.


aca juga: That's It, We're Quitting oleh Matthew Paul Thomas

Integrasi Destop

An important advantage that developers have when choosing the elementary OS platform is the ability to seamlessly integrate their application with the default desktop. Outlined below are the several ways in which you can make your application feel beyond native in elementary OS. This section will cover things like:

Peluncur Aplikasi

Metode utama untuk menemukan dan menggunakan aplikasi Anda hanyalah melalui sebuah peluncur aplikasi di dalam Slingshot atau pada dok. Untuk menyediakan peluncur ini, Anda harus memasang berkas .desktop yang sesuai bersama dengan aplikasi Anda. Termasuk memberi peluncur nama yang tepat, menempatkannya di kategori yang benar, menetapkan sebuah ikon, dll.

erkas .desktop mengikuti Spesifikasi Entri Destop freedesktop.org. Mereka harus dipasang di /usr/share/applications. Pengguna bisa membuat peluncur mereka sendiri dengan menempatkan berkas .desktop di ~/.local/share/applications.

Isi dari berkas .desktop harus mengikuti formula berikut:

Title adalah GenericName yang memperbolehkan Anda Comment.

Title

You should not include descriptive words in your title. For example, Dexter is called "Dexter," not "Dexter Address Book." Midori is just "Midori," not "Midori Web Browser." Instead, use the GenericName attribute of your app's .desktop file for a generic name, and the Comment attribute for a longer descriptive phrase.

GenericName

Jika aplikasi Anda dapat dengan mudah dikategorikan atau dijelaskan dengan sebuah nama umum, Anda harus menggunakannya untuk atribut GenericName pada berkas .desktop aplikasi Anda. Jika Anda bisa berkata, "Aplikasi saya adalah sebuah ____", maka apapun yang cocok di baris kosong tersebut bisa jadi nama umum. Contoh, Maya adalah sebuah kalender, jadi nama umumnya adalah "Kalender".

Anda harus tidak menyertakan artikel (sebuah, suatu, sesuatu) atau kata "program", "app", atau "aplikasi" pada nama umum aplikasi Anda.

Nama umum harus dalam format Huruf Judul dan dapat digunakan di seluruh sistem untuk lebih menggambarkan atau mengkategorikan aplikasi Anda.

Comment

The system uses an app's Comment attribute (found in the .desktop file) to succinctly inform a user what can be done with the app. It should be a short sentence or phrase beginning with a verb and containing the primary nouns that your app deals with. For example, the following are appropriate comments:

Komentar aplikasi harus dalam format Huruf Kalimat, tidak menyertakan tanda baca akhir (titik, tanda seru, atau tanda tanya), dan harus sesingkat mungkin menggambarkan kegunaan utama dari aplikasi.

Categories

The following categories may be used to aid with searching or browsing for your app. Keep in mind that you can add more than one and you should add all that apply:

Untuk info lebih lanjut, baca spesifikasi entri menu FreeDesktop.Org.

Keywords

Anda juga dapat menyertakan kata kunci pada peluncur untuk membantu pengguna menemukan aplikasi Anda melalui pencarian. Ikuti kaidah dari "X-GNOME-Keywords" (untuk peluncur aplikasi) dan "X-AppInstall-Keywords" (untuk pemasang aplikasi). Sebagai contoh, peramban web mungkin menyertakan "Internet" sebagai kata kunci meskipun bukan nama aplikasi, nama umum, atau deskripsi. Hasilnya, seorang pengguna mencari "Internet" akan menemukan aplikasi yang diinginkan. Berikut beberapa contohnya:

Keywords should be single words (in title case) separated by semicolons.


aca juga: Spesifikasi Entri Destop dari FreeDesktop.org

Pembangu

Contractor is a service and a protocol for exposing services easily between apps. It lets apps interact with other apps and services without hardcoded support for them. You simply add Contractor support, and then any service registered with Contractor is now available for your app to use. Your app can integrate with Contractor in two different ways:

Menampilkan Hasil dari Contracto

Contractor results are typically presented to users in menu form. Keep the following in mind when presenting Contractor results:

Integrasi dengan Dok

Integrate your app with Pantheon's dock communicate to communicate its status to the user at a glance.

ilah Laju

Make progress bars unambiguous by referring to a single, specific task. For example, use progress bars to indicate the status of lengthy processes like file transfers and encoding. Do not use progress bars to compound the progress of different types of action.

Emblem

A badge shows a count of actionable items managed by your app. Its purpose is to inform the user that there are items that require user attention or action without being obtrusive. This is a passive notification. A badge should not show totals or rarely changing counters. If the badge is not easily dismissed when the user views your app, it is likely that this is not a good use of a badge.

Indikator Sistem

Indikator adalah ikon kecil yang bersemayam di panel atas. Indikator menyediakan pengguna tempat untuk memonitor berbagai macam pengaturan dan kejadian. Mengklik ikon menunjukkan menu kecil dengan tindakan relevan yang tersedia untuk pengguna.

Does Your App Need an Indicator?

The indicator area is prone to clutter and inconsistent paradigms. Given that users will probably install many third-party apps, we must be careful about the number of indicators we show and how they behave. Keep in mind that only a very small set of applications need or benefit from an indicator. Avoid adding an indicator if:


See also: Farewell to the Notification Area by Matthew Paul Thomas

Widget Penampung

Jendela

Windows form the foundation of your app. They provide a canvas with basic, built-in actions such as "closing" and "resizing". Although users may see windows as being all the same, elementary OS has several distinct window types. It's important to understand the types of windows available to you, window behavior in general, and behavior that is specific to a certain window type. This section will cover the different types of windows available in elementary OS. Although each type of window is a bit different, think of them all as a subclass of a window. Unless otherwise stated, they all behave as an average window.

Judul Jendela

Ketika berhadapan dengan judul jendela, pertimbangkan bahwa kegunaan utama mereka adalah membedakan antara satu jendela dengan yang lain. Judul jendela yang baik menyediakan keterangan yang membantu seorang pengguna membuat pilihan. Simpan dalam ingatan saat Anda mempertimbangkan hal-hal berikut:

Dialog

24
Dialog warning icon

Primary text providing basic information and a suggestion

Secondary text providing further details. Also includes information that explains any unobvious consequences of actions.

24
Cancel
Suggested Action

Teks Peringata

Sebuah teks peringatan berisi teks utama dan teks tambahan.

The primary text contains a brief summary of the situation and offer a suggested action. This text should use the CSS class primary.

Teks tambahan memberikan informasi yang lebih terperinci mengenai situasi yang terjadi serta efek samping yang mungkin dari semua pilihan yang ada. Penting untuk diingat bahwa mestinya pengguna cukup membaca teks utama untuk menentukan apa yang harus dilakukan dan teks tambahan hanya berperan sebagai penjelas. Teks tambahan ditempatkan di bawah teks utama dengan jarak satu baris huruf normal.

uat teks utama dan teks tambahan dapat diblok sehingga pengguna dapat menyalinnya dengan mudah, misalnya ke dalam pesan email.

Urutan Tombol

"OK" Tidaklah Baik

When presenting a dialog to a user, always use explicit action names like "Save..." or "Shut Down". Consider how "OK" lets users proceed without understanding the action they are authorizing. Not all users will read the question or information presented to them in a dialog. Using specific action names will make it harder for a user to select an unintended action and may even encourage them to read the presented information before making a selection.

Dialog Preferensi

Preference dialogs should be made Transient, but not Modal. When a user makes a change in a preference dialog, the change should be immediately visible in the UI. If the dialog is modal, the user may be blocked from seeing (and especially from interacting with) the change. This means they will have to close the dialog, evaluate the change, then possibly re-open the dialog. By making the dialog transient, we keep the dialog on top for easy access, but we also let the user evaluate and possibly revert the change without having to close and re-open the preference dialog.


aca juga:

  1. Why 'Ok' Buttons In Dialog Boxes Work Best On The Right oleh UX Moveme
  2. Why The Ok Button Is No Longer Okay oleh UX Moveme
  3. Should I use Yes/No or Ok/Cancel on my message box? di UX StackExchange
  4. Where to Place Icons Next to Button Labels oleh UX Moveme

Jendela Muncula

Popovers sebagaimana jendela kontekstual. Mereka menampilkan konten secara langsung, biasanya yang berhubungan dengan sesuatu yang diklik dan menutup ketika tidak diklik, seperti menu.

Sebuah popover harus digunakan ketika pengguna ingin melakukan tindakan yang cepat tanpa keluar dari UI utama. Beberapa contoh di mana popover dapat digunakan seperti menambahkan kontak dari email, menambahkan bookmark di browser, atau menampilkan download atau transfer file.

Popovers tidak seharusnya digunakan ketika hanya menampilkan daftar sederhana item; sebaiknya gunakan menu. Demikian juga, jangan gunakan popover jika pengguna memerlukan lebih dari beberapa detik di dalamnya; sebaiknya gunakan dialog. Ingat bahwa popovers itu kontekstual dan harus langsung berhubungan dengan elemen UI dari mana mereka berinteraksi.

ilah Ala

A Toolbar is useful for providing users with quick access to an app's most used features. Besides Buttons, a Toolbar is one of the most frequently used UI elements. It may seem like a simple container, but it is important to remain consistent in its use and organization.

Mengurutkan Item Bilah Ala

Item pada bilah alat harus disusun dari kiri ke kanan dengan urutan semakin penting objek semakin berada di kiri, dengan MenuApl selalu berada di ujung kanan bilah. Jika bilah memiliki banyak item, sebaiknya item-item tersebut dibagi ke dalam kelompok-kelompok yang dipisahkan dengan spasi di antara tiap kelompok. Selalu ingat bahwa ketika ditampilkan dengan bahasa RTL, urutan bilah alat Anda harus dibalik.

Elemen Perkakas UI

elementary OS uses consistent user interface (UI) elements to bring a unified and predictable experience to users, no matter what app they're using. When used properly, this ensures a small (or nonexistent) learning curve for your app.

Konsep Widge

Sebelum kita mendalami semua widget yang tersedia di OS elementary, kita perlu membahas beberapa konsep dasar yang berlaku ke semua widget. Menggunakan konsep ini dengan benar akan memberi pengalaman penggunaan yang lebih baik dan membantu Anda menghindari memilah-milah banyak laporan kutu.

Kendali Yang Tidak Bekerja

Kesalahan paling umum para pengembang adalah membuat kendali yang tidak melakukan apa-apa. Harap diingat bahwa kita ingin mempersembahkan sebuah lingkungan dimana pengguna merasa nyaman dalam menjelajah. Seorang pengguna yang penasaran akan sering berinteraksi dengan pengendali berharap terjadi sesuatu. Ketika pengendali tidak melakukan apa-apa, hal ini akan menyebabkan mereka kebingungan dan khawatir (Berprasangka, "uh-oh Saya tidak tahu apa yang terjadi!"). Dalam beberapa kasus, kendali yang tidak melakukan apa-apa akan membuat kacau dan menambah kerumitan UI Anda.

Consider the "clear" button present in search fields. This button only appears when it is relevant and needed. Clicking this button when the field is already clear essentially does nothing. 

Sensitifitas

Sometimes it doesn't make sense for a user to interact with a widget until some pre-requisite is fulfilled. For example, It doesn't make sense to let a user click a browser's "Forward" button unless there is forward history available. In this case, you should make the "Forward" button insensitive or a user may click it, expecting a result, and be confused when nothing happens.

iasanya lebih baik membuat widget tidak sensitif daripada menyembunyikannya. Membuat sebuah widget tidak sensitif menginformasikan kepada pengguna bahwa tombol widget memiliki kegunaan, tapi hanya setelah kondisi tertentu tercapai. Menyembunyikan widget memberi kesan fungsi tersebut tidak tersedia sama sekali atau dapat membuat pengguna bertanya-tanya kenapa fitur sebuah tiba-tiba "menghilang".

Widget Tersembunyi

Ketika sebuah widget hanya masuk akal pada konteks tertentu (bukan sebagai indikator atau pelaksana tindakan) terkadang memang perlu untuk menyembunyikannya. Contohnya kebutuhan perangkat keras: Tidak masuk akal untuk menampilkan opsi tampilan-ganda jika sistem hanya memiliki tampilan tunggal. Membuat opsi tampilan-ganda tidak sensitif juga bukan hal yang membantu pada sistem ini. Pengecualian lain untuk aturan ini adalah widget yang pengguna hanya lihat dalam konteks tertentu, seperti contoh tombol "clear" diatas. Terakhir, harap diingat bahwa butir yang tidak sensitif akan tetap dikenali oleh pembaca layar, sedangkan widget tersembunyi tidak.

Jarak

Pemerataa


aca juga: Form Label Proximity: Right Aligned is Easier to Scan oleh UX Moveme

ilah Info

ilah info memberikan informasi dan tindakan yang sesuai konteks kepada pengguna dengan tingkat urgensitas yang berbeda-beda.

Penting untuk menentukan tingkat urgensitas atau tipe dari bilah info yang akan digunakan. Ada empat tipe bilah info yang tersedia:

Layar Sambuta

Layar Sambutan adalah cara yang ramah untuk membantu para pengguna mulai menggunakan aplikasi Anda.

Penggunaa

iasanya Layar Sambutan digunakan untuk aplikasi seperti Noise dan Scratch dimana Anda harus mengimpor atau membuat obyek dalam sebuah pustaka sebelum Anda dapat berinteraksi dengan mereka. Hal ini memberi pengguna Anda jalan yang jelas untuk memulai dan menunjukkan langkah-langkah yang harus segera dilakukan sebelum aplikasi benar-benar bisa digunakan.

If your app lets users clear its library, make sure that it returns to the Welcome Screen instead of an empty list.

Pelabela

Layar Sambutan terdiri dari 2 set label:

Ikonografi

Pengelompokan bersama setiap tindakan adalah ikon yang membantu dengan cepat menggambarkan maksud tindakan. Biasanya ini ikon Tindakan, tetapi Anda dapat menggunakan ikon Tempat ketika mengimpor atau mengatur lokasi dan bahkan ikon Aplikasi jika Anda harus membuka utilitas konfigurasi.

Senarai Sumbe

Senarai sumber mungkin bisa digunakan sebagai bentuk tertinggi navigasi. Senarai sumber berguna untuk menampilkan lokasi yang berbeda, tanda buku, atau kategori di dalam aplikasi Anda.

agian-bagia

A source list may be separated into different collapsible sections, each with its own heading. For example, a file manager might have a section for bookmarked locations, a section for storage devices attached to the computer, and a section for network locations. These sections help group related items in the source list and lets the user hide away sections they might not use.

Jika memungkinkan, hindari menumpuk bagian yang dapat diluaskan di dalam senarai sumber; Jika Anda memang menginginkan hal ini, Anda mungkin ingin berpikir ulang mengenai bagian tersebut.

Hirarki

Hirarki penting bagi senarai sumber, keduanya berada di dalam widget itu sendiri dan di dalam lingkup yang lebih luas dari aplikasi Anda.

agian-bagian dalam senarai sumber dapat di urutkan dari yang paling penting ke yang kurang penting di bawah. Jika Anda kesulitan menentukan relasi penting masing-masing bagian, pikir tentang bagian yang mana seorang pengguna mungkin akan sering gunakan. Mengurutkan bagian seperti ini memastikan bahwa bagian yang penting akan terus kelihatan, meskipun senarai sumber terlalu kecil untuk menampung semua butirnya, butir yang paling bawah masih akan dapat diakses dengan menggulirkannya.

Senarai sumber terletak di sisi kiri sebuah jendela (atau sisi kanan untuk bahasa berteks kanan-ke-kiri). Karena pengguna membaca dengan arah ini, bilah samping diletakkan sebelum (dan oleh karena itu pada tingkat yang lebih tinggi) dari isi aplikasi.

Tombol

Buttons are an incredibly important widget to understand since your app will undoubtedly contain them. 

Tombol Ala

Pelabela

Tombol Alat hampir selalu hanya berupa ikon dan tidak memiliki garis tepi. Mereka tidak boleh mengandung label.

Tip Ala

Semua Tombol Alat harus memiliki tooltips, karena mereka tidak memiliki label. Ini membantu pengguna dengan kekurangan serta memberikan terjemahan untuk sebuah ikon yang belum diakui. Tooltips harus ditulis dalam Huruf Kalimat.

Seperti label tombol teks, tooltip harus menggambarkan secara jelas apa yang akan terjadi ketika tombol ditekan.

Teks Tombol

Pelabela

Label Teks Tombol harus huruf besar di setiap kata.

Seperti item menu, label Tombol Teks harus terdiri dari Aksi atau Lokasi tetapi bukan status. Pastikan bahwa label tombol ini jelas menggambarkan apa yang akan terjadi ketika ditekan.

"Buang Akun", "Transfer ke Laptop Jim", and "Impor 20 Lagu" adalah label yang bagus.

"OK", "Get more storage!", and "Low Battery" are not good button labels. The "Get more storage!" label has incorrect capitalization and unnecessary punctuation. The other two labels do not indicate what will happen as a result of clicking the button.

Tip Ala

Karena Tombol Text memiliki label yang jelas dan eksplisit, biasanya tidak perlu untuk menggunakan tooltip.

Tombol Grup

Penggunaa

Tombol Grup digunakan untuk mengelompokkan tindakan yang serupa maupun saling berkaitan. Sebagai contoh, mereka dapat mengelompokkan opsi teks seperti Tebal, Miring, dan Garis Bawah. Atau yang saling berkaitan seperti tilikan Grid, Daftar, atau Kolom.

Pelabela

Tombol Grup harus tidak boleh berwarna. Hanya ikon simbolis 16px ATAU teks. Jangan menggabungkan ikon dengan teks.


  1. Why The OK Button Is No Longer Okay oleh UX Moveme
  2. Should I use Yes/No or Ok/Cancel on my message box? di UX StackExchange

MenuApl

MenuApl adalah menu opsional yang dibuka menggunakan ikon berbentuk gerigi di sebelah paling kanan bilah alat aplikasi. Menyediakan butir menu yang relevan sebagai pengganti bilah menu tradisional "Berkas, Sunting, Tilik...".

Penggunaa

Anda harus mempertimbangkannya terlebih dahulu apakah aplikasi Anda membutuhkan widget ini. Walaupun kebanyakan aplikasi memilikinya, aplikasi Anda mungkin tidak serta merta membutuhkan sebuah MenuApl.

Ketika menambahkan item ke MenuApl Anda, pertimbangkan hal berikut:

Ruas Telusu

Apps that support the searching or filtering of content should include a search field on the right side of the app's toolbar. This gives users a predictable place to see whether or not an app supports searching, and a consistent location from which to search. Gtk+ provides a convenient complex widget for this purpose called Gtk.SearchEntry.

Distinguish Between Search and Find

Search is for filtering the contents of a library, i.e. Music or Videos, to the matching items. Search is typically initiated when typing anywhere in a library view.

Find is for highlighting matching instances of a string, i.e. in a text editor, web page, or Terminal. It is triggered by a keyboard shortcut (Ctrl+F) or with a search icon. The find bar appears in a revealer below the headerbar with relevant actions such as find next, find previous, highlight all, etc. The revealer may also contain other relevant actions such as replace or go to line.

Perilaku

Jika memungkinkan untuk menyertakan fungsi penelusuran di dalam aplikasi Anda, maka lebih baik menyertakannya. Senarai apapun atau representasi dari banyak bagian data harus dapat ditelusuri menggunakan ruas telusur yang mengindahkan aturan berikut:

Pelabela

Ruas telusur harus berisi teks petunjuk yang menjelaskan apa yang akan ditelusuri. Anda dapat menyetel ini menggunakan entri properti "placeholder_text".

Sebagian besar ruas telusur harus menggunakan format "Search OBJECTS" dimana OBJECTS adalah sesuatu yang akan ditelusuri, seperti Kontak, Akun, dll.

Jika ruas telusur berinteraksi dengan layanan penelusuran, teks petunjuk harus sama dengan nama layanan tersebut, misal, "Google" atau "Yahoo!"

Kotak Centang & Jungkita

Kotak Centang

Kotak centang menghadirkan cara untuk pengguna dapat memilih beberapa item dari sebuah daftar.

Penggunaa

Gunakan kotak centang ketika pengguna melakukan pemilihan item. Pastikan pengguna dapat jungkit keadaan kotak centang dengan mengklik label yang terasosiasi dengan kotak centang.

Pelabela

Label yang terkait dengan Checkbox seharusnya merupakan kata benda atau frase kata benda.

Jungkitan/Sakela

Jungkitan/Sakelar menghadirkan cara bagi pengguna untuk membuat "nyala" atau "mati" fitur atau perilaku tertentu.

Penggunaa

Jangan menggunakan switch untuk memasukkan item terkait sebagai bagian dari daftar, sebaiknya gunakan Checkbox. Pikirkan switch bertindak atas layanan independen dan checkbox sebagai benda yang termasuk dalam daftar. Ini merupakan perbedaan penting untuk membuat.

Perhatikan bahwa opsi "Rekam dari mikrofon" adalah kandidat bagus untuk switch. Anda mengaktifkan dan menonaktifkan layanan rekaman ini.

Namun, jika ada dua pilihan "Rekam suara sistem" dan "Rekam dari mikrofon" Anda sekarang berurusan dengan daftar item terkait untuk dimasukkan sebagai bagian dari layanan rekaman besar (yang mana kondisi on dan off independen dari termasuk apa layanan tersebut). Dalam hal ini, kotak centang lebih tepat untuk menunjukkan inklusi ini.

Pelabela

ila memungkinkan, langsung memanggil layanan yang anda kehendaki. Jangan gunakan kata-kata yang menggambarkan keadaan yang digambarkan widget seperti "Aktifkan Multitouch", "Gunakan Multitouch", atau "Disable Multitouch". Hal ini dapat membuat situasi yang membingungkan secara logis. Sebaliknya, hanya gunakan kata benda dan tulis "Multitouch".


aca juga: 3 Ways to Make Checkboxes, Radio Buttons Easier to Click oleh UX Moveme

uku Catata

Notebooks are a type of widget that lets apps show one of multiple pages (also colloquially referenced as "tab bars").

Notebook Statis

Sebuah Notebook Statis adalah satu set kecil tab yang tidak berubah, sering terlihat pada preferensi atau pengaturan layar. Tab yang muncul terkait tombol berpusat di bagian atas area konten. Sebuah Notebook Statis biasanya berisi 2-5 tab.

Notebook Dinamis

Sebuah Notebook Dinamis adalah cara dari sebuah aplikasi untuk menyediakan fungsi tabbing yang dikelola pengguna, sering terlihat di web browser. Tab muncul melekat pada toolbar di tab bar mereka sendiri di atas konten yang relevan. Tab dapat diatur kembali dan ditutup dan "tab baru" tombol di sebelah kiri dari widget notebook.

Ikonografi

Penampilan ikon adalah salah satu bagian terpenting dalam elementary OS. Ikon menyusun sebagian besar elemen antarmuka yang akan sering dihadapi oleh pengguna Anda. Ikon akan membuat sistem tampak hidup dan lebih mudah dikenali oleh otak manusia.

entuk

Tiap ikon sebaiknya memiliki bentuk/siluet yang berbeda satu sama lain agar lebih mudah dikenali. Bentuknya jangan terlalu rumit, tetapi tidak harus selalu berbentuk segi empat tumpul.

Warning dialog iconChat iconPhotos iconVideos iconOnline accounts iconTerminal icon

Metafora

Ikon yang dibuat untuk hardware atau jenis file (seperti MimeType atau Ikon Printer), bentuknya menunjukkan bentuk benda tersebut dalam wujud di dunia nyata. Misalnya, Ikon untuk kamera adalah kamera yang dihias.

Camera iconHard disk iconMouse iconPackage iconHTML Text iconComputer icon

Ikon Aksi

Action icons are used to represent common user actions, such as "delete", "play", or "save". These icons are mostly found in app toolbars, but can be found throughout the OS.

Previous iconNext iconDocument export iconPrint iconSave iconDelete iconCut iconUndo iconInverse iconPlay iconNew tag iconMenu icon

If your app makes use one of these common actions, reference its corresponding icon instead of creating your own. This ensures a consistent user experience and aids in user recognition of common functions.

Jika aplikasi anda memiliki aksi yang unik, anda mungkin harus membuatkan aksi anda sendiri. Ketika anda melakukan ini, coba untuk mengikuti pemandangan dan perasaan dari ikon-ikon aksi yang sudah ada, dan mengikut sertakanya didalam aplikasi anda.

palet warna

elementary OS menggunakan six ukuran ikon utama pada OS nya dan lebih baik jika anda mengikut sertakan ke-enam itu sebagai bagian dari aplikasi anda

16 pixel Terminal icon24 pixel Terminal icon32 pixel Terminal icon48 pixel Terminal icon64 pixel Terminal icon128 pixel Terminal icon
16 24 32 48 64 128
128 pixel Terminal icon
128

Design each icon for the size it's meant to be viewed at. In other words, do not design one icon and resize it to fill the remaining sizes, the best result is when each icon is designed individually. For more information about this practice (called "pixel-fitting") and its importance, we recommend reading Dustin Curtis' article, Pixel-fitting.

palet warna

Color, don't be afraid to use it! Many of the elementary OS icons use vibrant colors; it's best to reserve muted tones and greys for boring system icons.

Mail iconRSS Reader iconWeb browser iconPhotos iconNetwork iconCalendar icon

Colors do have their connotations, so be cognisant of this when picking them. For instance: red is usually associated with error or "danger" and orange with warnings. But you can use these color connotations to help convey your icon's meaning, such as green for "go".

Symbolic Icons

Symbolic icons are common system icons, that symbolize files, devices, or directories and are also used to represent common actions like cut, copy, and save.

Each symbolic icon is a reduced form of its full-color counter part. This minimal design ensures readability and clarity even at small sizes.

Symbolic vs. colored icon

Colored vs. Symbolic Icons

The use of full-color and symbolic icons is not interchangeable, both have appropriate uses.

Full color icons are best used for:

Symbolic icons are best used:

Komposisi

There are three aspects to note when designing an elementary OS icon:

Composition breakdown of elementary OS Videos icon Composition breakdown of elementary OS Terminal icon

Keeping these lines in mind while designing, means you can place elements along them so icons appear more consistent when put together. For example, notice how some elements in both the Terminal and Videos icon above relate to the mean line.

Pengukuran Umum

Jika anda mendesain sebuah ikon berbentuk kotak, seperti yang terdapat pada Terminal yang terlihat diatas, maka pertimbangkan kembali lah pengukuran umum (dalam pixel) untuk masing-masing iko

Ukuran Kanvas Garis Dasa x-Height erarti Tinggi Garis
16x16 1 14 8
24x24 2 20 12
32x32 2 26 16
48x48 3 40 24
64x64 4 56 32
128x128 9 104 64

Pengecualia

agaimanapun ada pengecualian. Banyak ikon (terutama ikon mimetype) memiliki elemen yang naik dan turun, dimana unsur-unsur yang melampaui garis dasar dan garis x-height (yang ditampilkan di sini di oranye.)

Composition exception example in elementary OS Video icon Composition exception example in elementary OS Terminal icon

Komponen yang lebih melingkar pada umumnya membutuhkan beberapa pelebihan, untuk mengkonpensasi ilusi optikal yang membuat mereka terlihat lebih kecil daripada rekan mereka yang berbentuk kotak.

Garis Besar & Kontras

All elementary OS icons have a thin outline (stroke) to improve their contrast. The width of this stroke is one pixel for all icons, at every size. The color of the outline is a darker variant (30% darker) of the primary color of the icon. For instance, in the calendar icon below, the green header has a stroke of a darker green.

Example of contrast in elementary OS Calendar icon Example of contrast in elementary Settings icon

To further improve contrast, strokes are also semi-transparent. This ensures that icons appear sharp against a variety of backgrounds. Also, if the element is near-white, this stroke acts as a border and contains, rather than overlaps, its corresponding element. See the above icon for an example of this.

ayangan & Sorota

If you picture an icon sitting on a shelf, facing you, with a light source above it, you may see a small fuzzy shadow near the bottom. Also, since the edges of an object tends to reflect more light due to your position relative to it and to the light source, they will have a highlight. Both these effects are something elementary OS icons emulate in their design to lend them a degree of realism.

Tepi Highligh

Untuk mengapply tepi dari efek highlight untuk ikon anda, gambar secara halus, 1 piksel, Goresan kedalam sebagai highlight. Garis ini sedikit lebih cerah di bagian atas dan bagian bawah daripada di tepi.

Edge highlight example in elementary OS Music icon

Penurunan Bayanga

To draw the shadow, you'll start by drawing a rectangle. Then fill it with a linear gradient that is perpendicular to the bottom margin of the icon. The gradient has three stops, the first and last of which have zero opacity. Then this entire shape is set to 60% opacity.

Next create two smaller rectangles to "bookend" the larger. Fill each with a gradient identical to the first, but make it radial instead. Center the radial gradient in the middle of a short edge with each stop directly out to the nearest edge—see below for an example. Both these rectangles are also set to 60% opacity.

ayangan Piktogram

jika ikon anda punya sebuah piktogram, seperti memainkan segitiga pada ikon dibawah, anda dapat memberi itu sedikir bayangan untuk membuat itu terlihat nyata dan menarik dari background

To do this, first duplicate the pictogram, fill it with solid black and set it to 15% opacity. Next, shift it 1 pixel down and place it below the pictogram. Create a copy of this shadow and give it a 1 pixel stroke (also black) and adjust this element to 7% opacity.

ahan-Bahan Iko

You are free to add gloss (extra highlights) to your icon but this is only a good idea if you're emulating a surface that is more-reflective in real life (such as plastic, glass, etc.) For instance, a sheet of paper is not glossy therefore a icon emulating paper would not be either.

Apa yang harus dilakukan dan apa yang jangan dilakuka

Di bawah adalah beberapa contoh "lakukan dan jangan lakukan" untuk dipertimbangkan ketika membuat ikon untuk apl Anda.

Teks

Although elementary OS primarily uses graphics as a means of interaction, text is also widely used for things like button labels, tooltips, menu items, dialog messages, and more. Using text consistently and clearly both in terminology and format is an extremely important part of designing your app and helps add to the overall cohesiveness of the elementary OS platform.

Kaidah Penulisa

Gunakan aturan berikut agar teks mudah dipahami dan konsisten:

Singka

Jangan jejali pengguna dengan bacaan yang panjang. Teks yang panjang akan tampak membosankan dan membuat pengguna urung membaca pesan Anda. Sajikan kepada pengguna teks yang singkat namun padat.

erpikir Sederhana

Anggap saja pengguna adalah seseorang yang cerdas, tetapi tidak secara teknikal. Hindari kata yang panjang dan tidak umum, dan fokus pada kata kerja, kata benda, kata sifat yang umum dan sederhana. Jangan pernah gunakan jargon teknikal.

Pergi Ke Baris Paling Bawah

Sampaikan informasi yang paling penting di awal teks Anda. Jika pengguna berhenti membaca, mereka masih tetap mengingat apa yang mereka butuhkan.

Jangan Mengulang-ulang

Pengulangan dapat menimbulkan ketidak-nyamanan dan menambah panjang yang seharusnya tidak perlu pada pesan Anda.

Gunakan Hirarki Visual

Hirarki visual membantu pengguna dalam membaca dan memahami teks yang Anda buat sekaligus mengetahui apa yang paling penting. Gunakan tajuk dan gaya teks lainnya dengan sewajarnya.

ahasa

While much of elementary OS is developed in English, there are many users who do not know English or prefer their native language. While putting text into your app, keep the following in mind:

esar-Kecil Huruf

Setiap unsur teks pada antarmuka, termasuk label, tombol, dan menu, harus mengikuti salah satu kaidah penulisan: penulisan kalimat atau penulisan judul.

Kaidah Penulisan Kalima

Kaidah ini mengikuti aturan ejaan standar penulisan kalimat.

Hanya huruf pertama kalimat dan huruf pertama kata-kata tertentu yang ditulis dengan huruf besar. Diterapkan pada penulisan label dan teks deskripsi.

Kaidah Penulisan Judul

Kaidah ini mengikuti aturan penulisan judul buku atau artikel.

Tulis huruf pertama pada kata pertama dan terakhir dengan huruf besar. Huruf pertama pada semua kata benda, kata ganti, kata sifat, kata kerja, dan kata keterangan ditulis dengan huruf besar. Diterapkan pada penulisan judul, label tombol, menu, dan sebagian besar widget lain.

Catatan/Pengecualia

eberapa kata benda harus ditulis sebagaimana adanya; yang berarti, misalnya, Google harus tetap ditulis "Google", elementary harus tetap ditulis "elementary", dan MPEG harus tetap ditulis "MPEG". Jika Anda tidak yakin dengan ejaan resmi kata-kata tertentu, rujuklah panduan penulisan kata yang dimaksud.

Tanda Baca

Tatahuruf yang tepat sangat penting di dalam elementary OS. Tidak hanya demi konsistensi, tetapi juga untuk mengikuti aturan serta mengesankan bahwa elementary OS adalah platform yang serius dan profesional.

Hindari Kesalahan Umum

Tanda Hubung & Tanda Pisah

Tanda Hubung (-)

Gunakan \u2010 di dalam kode Anda. Tanda hubung digunakan untuk:

En Dash (–)

Gunakan \u2013 di dalam kode Anda. Tanda pisah en dash digunakan untuk:

Em Dash (—)

Gunakan \u2014 di dalam kode Anda. Tanda pisah em dash digunakan untuk:


Jika Anda ragu, kunjungi Pedoman Penulisan Tanda Baca Bahasa Indonesia di Wikipedia.

Kaidah-kaidah tersebut berlaku pada bahasa Indonesia; bahasa lain mungkin memiliki kaidah sendiri yang harus disesuaikan oleh para penerjemahnya.

Penggunaan Elipsis

Tanda elipsis (…) digunakan untuk dua alasan utama: memberitahu pengguna bahwa ada informasi tambahan yang diperlukan dan ada bagian teks yang dihilangkan.

Informasi Tambaha

Gunakan elipsis untuk memberitahu pengguna bahwa informasi tambahan atau suatu tindakan dibutuhkan sebelum pekerjaan dapat dilanjutkan. Biasanya ini berarti bahwa jendela baru, kotak dialog, toolbar, dsb. akan muncul untuk menerima informasi tambahan dari pengguna sebelum pekerjaan dapat dilanjutkan. Ini penting karena biasanya ketika sebuah tombol ditekan, pengguna mengharapkan pekerjaannya dapat segera berlangsung, sedangkan adanya tanda elipsis menandakan ada hal lain yang harus dilakukan terlebih dahulu. Lebih spesifiknya, tanda elipsis digunakan ketika:

Teks yang Dipotong

Ellipses should be used when shortening text that cannot fit in any specific place. For example, if a playlist's name is longer than the space available in the sidebar, truncate it and use an ellipsis to signify its truncation. There are two ways to use an ellipsis when shortening text:

Jika Anda tidak yakin, sebaiknya Anda gunakan pemotongan di tengah karena bagian awal dan akhir teks tetap utuh. Penting untuk Anda ingat untuk tidak menampilkan teks yang terpotong. Pemotongan sebaiknya hanya terjadi akibat tindakan pengguna seperti mengubah ukuran bilah samping atau memasukkan teks yang terlalu panjang.

Kapan untuk Tidak Menggunakan Elipsis


Selalu pastikan untuk menggunakan karakter elipsis yang benar (…), bukan deretan tiga karakter tanda titik (.).

Menamai Item Menu

Item menu harus memiliki nama yang berupa jenis tindakan atau lokasi, bukan deskripsi. Pastikan nama item menu singkat tetapi cukup menjelaskan tindakan yang akan dilakukan setelah item tersebut diklik.

"Cari di Halaman..." dapat diterima karena cukup menjelaskan tindakan yang akan dilakukannya. "Sistem Sudah Mutakhir" tidak dapat diterima. Apa yang akan terjadi jika saya mengkliknya? Kemana saya akan dibawa? Apa yang akan dilakukannya? Semuanya tidak terjelaskan.