Primary & Secondary Actions

Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible.
Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Save”. They enable form completion, the most important action on the form.
Secondary actions are actions such as “Cancel”, “Go back”, or “Reset”. They are less important, alternative actions, which often have negative consequences when used accidentally. For example, hitting “Reset” erases all the data a user has entered.

Two different ways to distinguish primary and secondary actions on a Web form.

Two different ways to distinguish primary and secondary actions on a Web form.

What problem does the pattern solve?

  • You have a Web form containing both primary and secondary actions.

When to use it?

  • You have a Web form containing both primary and secondary actions.

How to use it?

  • First of all, avoid secondary actions whenever possible. Do you really need that “reset” button?
  • Ensure a clear visual distinction between primary & secondary actions. Add visual weight to primary action elements (stronger color and/or bigger size), and reduce the weight on secondary action elements (use a link instead of a button, use lighter color).
  • Align primary action button vertically with the input fields to create a clear path to completion.

Why to use it?

  • All form actions are not equal, and therefore the visual presentation of actions should match their importance to make it easier to complete a form.
  • Visual distinction helps users make “good” choices. For example, “Cancel” is secondary action which is rarely used compated to primary actions. Therefore, the visual weight of it should be reduced in some way to minimize the risk of selecting it unintentionally.

Accessibility

Sources

The pattern is inspired by “Primary and Secondary Actions” from Luke Wroblewski’s book “Web Form Design: Filling in the Blanks”.

Useful links

Example images (10 examples)

Comments

  • Adiux ⋅ Feb. 16, 2012 17:07

    Isn't it more natural to have the primary function on the right?
    tripit vs delicious

  • Parvej Solkar ⋅ March 6, 2013 07:09

    Thanks a lot....!!!

    Definately changes appraoch towards designing primary and secondary actions on web page

  • Godaddy Renewal Coupons (www) ⋅ Nov. 19, 2016 13:21

    I really enjoyed reading your article. I found this as an informative and interesting post, so i think it is very useful and knowledgeable.

  • IT Company Jaipur (www) ⋅ Nov. 23, 2016 08:23

    Its a nice information to have. Thanks for sharing it.

  • Obat Diabetes Basah (www) ⋅ Nov. 26, 2016 04:23


    Penyakit Diabetes bukan menjadi masalah untuk setiap yang tahu caranya untuk mencegahnya, khususnya menggunakan Amazon plus. Namun akan suatu masalah bagi mereka yang tidak tahu cara mencegahnya. Untuk itu mulailah hidup sehat bersama Obat diabetes alami Amazon Plus.

  • Obat Herbal Kolesterol Tinggi (www) ⋅ Nov. 26, 2016 04:23

    Obat Tradisional Kolesterol Tinggi merupakan solusi terbaik untuk Anda yang mempunyai kendala dengan kolesterol tinggi. Amazon yang dibuat menggunakan bahan utama alami teruji dari alam, sehingga Juice of Mangosteen sangat terpercaya serta dijamin untuk dikonsumsi.

  • Obat Asma Tradisional Paling Ampuh (www) ⋅ Nov. 26, 2016 04:24

    Amazing Juice of Mangosteen Obat Asma Alami memamg paling bagus. Cukup 30 mili setiap pagi dan malam sesudah makan, serta rasakan khasiatnya. Saat ini saya sudah bisa beraktivitas dengan terkendali tanpa gangguan dari penyakit asma, karna saya sudah disembuhkan oleh Jus Kulit Manggis Obat Tradisional Asma Alamiah.

  • Obat Vertigo (www) ⋅ Dec. 2, 2016 08:24

    PENYAKIT VERTIGO adalah salah satu bentuk dari gangguan keseimbangan pada telinga bagian dalam yang menyebabkan penderita merasa pusing atau keadaan disekitar serasa berputar. Kelainan ini disebabkan adanya gangguan keseimbangan baik sentral atau perifer, kelainan pada telinga sering sekali menyebabkan vertigo. Untuk menentukan kelainan yang menyebabkan vertigo, dokter biasanya akan melakukan pemeriksaan elektronistagmografi.

    PENYEBAB VERTIGO

    Penyakit vertigo sering terjadi akibat adanya gangguan pada telinga bagian dalam. Beberapa faktor penyebab paling umum antara lain :

    Benign paroxysmal positional vertigo atau BPPV. BPPV terjadi ketika adanya gangguan pada partikel kalsium kecil (canaliths) di kanal telinga bagian dalam. Kemudian telinga bagian dalam akan mengirimkan sinyal sinyal ke organ otak tentang gerakan relatif kepala dan tubuh terhadap gravitasi. Hal ini membantu Anda menjaga keseimbangan Anda. BPPV ini dapat terjadi tanpa adanya alasan yang diketahui Selain itu BPPV juga dapat terjadi mungkin ada hubungannya dengan usia.
    Penyakit Meniere. Gangguan pada telinga bagian dalam yang diduga akibat adanya penumpukan tekanan fluida serta terjadinya perubahan di telinga. Gangguan ini dapat memicu penyakit vertigo bersamaan dengan telinga berdenging (tinnitus), dan gangguan pendengaran.
    Neuritis vestibular atau labyrinthitis. Gangguan pada telinga bagian dalam, umumnya terkait dengan masalah infeksi (disebabkan oleh virus). Infeksi mengakibatkan peradangan pada telinga bagian dalam di sekitar saraf yang penting, dimana saraf tersebut berfungsi untuk membantu dan menjaga keseimbangan tubuh.

    Vertigo Mungkin Berhubungan Dengan :

    Sakit Kepala Migrain
    Cedera Pada Bagian Leher Atau Kepala
    Terjadi Gangguan Pada Otak Seperti Tumor Atau Stroke
    Obat-Obatan Tertentu Yang Dapat Menyebabkan Kerusakan Pada Telinga

  • Packers And Movers Jaipur (www) ⋅ today 08:48

    Really It is useful information. Thanks and keep sharing.