CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Designing the perfect button. Everything you need to know about what… | by Domas Markevičius | Wix UX</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2022-09-23T05:58:32.585Z"/><meta data-rh="true" name="title" content="Designing the perfect button. Everything you need to know about what… | by Domas Markevičius | Wix UX"/><meta data-rh="true" property="og:title" content="Designing the perfect button"/><meta data-rh="true" property="al:android:url" content="medium://p/e77ec1f32ee5"/><meta data-rh="true" property="al:ios:url" content="medium://p/e77ec1f32ee5"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button…"/><meta data-rh="true" property="og:description" content="Everything you need to know about what makes a button great."/><meta data-rh="true" property="og:url" content="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5"/><meta data-rh="true" property="al:web:url" content="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:813/1*Jb5JszpcYpCmuwO3Z9Z2kg.png"/><meta data-rh="true" property="article:author" content="https://medium.com/@domasmark"/><meta data-rh="true" name="author" content="Domas Markevičius"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Designing the perfect button"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/e77ec1f32ee5"/><meta data-rh="true" property="twitter:description" content="Everything you need to know about what makes a button great."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:813/1*Jb5JszpcYpCmuwO3Z9Z2kg.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:creator" content="@domasmark"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="7 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@domasmark"/><link data-rh="true" rel="canonical" href="https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/e77ec1f32ee5"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*Jb5JszpcYpCmuwO3Z9Z2kg.png"],"url":"https:\u002F\u002Fwix-ux.com\u002Fdesigning-the-perfect-button-e77ec1f32ee5","dateCreated":"2022-06-13T13:26:58.512Z","datePublished":"2022-06-13T13:26:58.512Z","dateModified":"2022-09-23T05:58:41.579Z","headline":"Designing the perfect button - Wix UX","name":"Designing the perfect button - Wix UX","description":"Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button…","identifier":"e77ec1f32ee5","author":{"@type":"Person","name":"Domas Markevičius","url":"https:\u002F\u002Fwix-ux.com\u002F@domasmark"},"creator":["Domas Markevičius"],"publisher":{"@type":"Organization","name":"Wix UX","url":"wix-ux.com","logo":{"@type":"ImageObject","width":272,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:544\u002F7*V1_7XP4snlmqrc_0Njontw.png"}},"mainEntityOfPage":"https:\u002F\u002Fwix-ux.com\u002Fdesigning-the-perfect-button-e77ec1f32ee5"}</script><style type="text/css" data-fela-rehydration="582" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="582" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(26, 137, 23, 1)}.es{border-color:rgba(26, 137, 23, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(26, 137, 23, 1)}.ez:disabled:hover{border-color:rgba(26, 137, 23, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{margin-left:auto}.gt{margin-right:auto}.gu{max-width:813px}.ha{clear:both}.hc{cursor:zoom-in}.hd{z-index:auto}.hf{max-width:100%}.hg{height:auto}.hh{line-height:1.23}.hi{letter-spacing:0}.hj{font-style:normal}.hk{font-weight:700}.if{margin-bottom:-0.27em}.ig{line-height:1.394}.jb{align-items:baseline}.jc{width:48px}.jd{height:48px}.je{border:2px solid rgba(255, 255, 255, 1)}.jf{z-index:0}.jg{box-shadow:none}.jh{border:1px solid rgba(0, 0, 0, 0.05)}.ji{margin-left:-12px}.jj{width:28px}.jk{height:28px}.jl{z-index:1}.jm{width:24px}.jn{margin-bottom:2px}.jo{flex-wrap:nowrap}.jp{font-size:16px}.jq{line-height:24px}.js{margin:0 8px}.jt{display:inline}.ju{color:rgba(26, 137, 23, 1)}.jv{fill:rgba(26, 137, 23, 1)}.jy{flex:0 0 auto}.kb{flex-wrap:wrap}.ke{white-space:pre-wrap}.kf{margin-right:4px}.kg{overflow:hidden}.kh{max-height:20px}.ki{text-overflow:ellipsis}.kj{display:-webkit-box}.kk{-webkit-line-clamp:1}.kl{-webkit-box-orient:vertical}.km{word-break:break-all}.ko{padding-left:8px}.kp{padding-right:8px}.lq> *{flex-shrink:0}.lr{overflow-x:scroll}.ls::-webkit-scrollbar{display:none}.lt{scrollbar-width:none}.lu{-ms-overflow-style:none}.lv{width:74px}.lw{flex-direction:row}.lx{z-index:2}.ma{-webkit-user-select:none}.mb{border:0}.mc{fill:rgba(117, 117, 117, 1)}.mf{outline:0}.mg{user-select:none}.mh> svg{pointer-events:none}.mq{cursor:progress}.mr{margin-left:4px}.ms{margin-top:0px}.mt{opacity:1}.mu{padding:4px 0}.mx{width:16px}.mz{display:inline-flex}.nf{padding:8px 2px}.ng svg{color:#6B6B6B}.nx{line-height:1.58}.ny{letter-spacing:-0.004em}.nz{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.os{margin-bottom:-0.46em}.ot{max-width:1384px}.oz{line-height:1.12}.pa{letter-spacing:-0.022em}.pb{font-weight:600}.pu{margin-bottom:-0.28em}.qa{text-decoration:underline}.qb{line-height:1.18}.qp{margin-bottom:-0.31em}.qq{margin-top:10px}.qr{max-width:728px}.qu{font-style:inherit}.qv{font-style:italic}.qw{list-style-type:disc}.qx{margin-left:30px}.qy{padding-left:0px}.re{margin-top:32px}.rf{margin-bottom:14px}.rg{padding-top:24px}.rh{padding-bottom:10px}.ri{background-color:#000000}.rj{height:3px}.rk{width:3px}.rl{margin-right:20px}.rm{margin-bottom:26px}.rn{margin-top:6px}.ro{margin-top:8px}.rp{margin-right:8px}.rq{padding:8px 16px}.rr{border-radius:100px}.rs{transition:background 300ms ease}.ru{white-space:nowrap}.rv{border-top:none}.rw{height:52px}.rx{max-height:52px}.ry{box-sizing:content-box}.rz{position:static}.sb{max-width:155px}.sm{height:0px}.sn{margin-bottom:40px}.so{margin-bottom:48px}.tc{border-radius:2px}.te{height:64px}.tf{width:64px}.tg{align-self:flex-end}.th{color:rgba(255, 255, 255, 1)}.ti{fill:rgba(255, 255, 255, 1)}.tj{background:rgba(25, 25, 25, 1)}.tk{border-color:rgba(25, 25, 25, 1)}.tn:disabled{opacity:0.1}.to:disabled:hover{background:rgba(25, 25, 25, 1)}.tp:disabled:hover{border-color:rgba(25, 25, 25, 1)}.tq{flex:1 1 auto}.tw{padding-right:4px}.tx{font-weight:500}.ue{margin-top:16px}.un{gap:18px}.uo{fill:rgba(61, 61, 61, 1)}.uq{fill:#242424}.ur{background:0}.us{border-color:#242424}.ut:disabled:hover{color:#242424}.uu:disabled:hover{fill:#242424}.uv:disabled:hover{border-color:#242424}.vg{border-bottom:solid 1px #E5E5E5}.vh{margin-top:72px}.vi{padding:24px 0}.vj{margin-bottom:0px}.vk{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(15, 115, 12, 1)}.eu:hover{border-color:rgba(15, 115, 12, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jr:hover{text-decoration:underline}.jw:hover:not(:disabled){color:rgba(15, 115, 12, 1)}.jx:hover:not(:disabled){fill:rgba(15, 115, 12, 1)}.me:hover{fill:rgba(8, 8, 8, 1)}.mv:hover{fill:#000000}.mw:hover p{color:#000000}.my:hover{color:#000000}.nh:hover svg{color:#000000}.rt:hover{background-color:#F2F2F2}.td:hover{background-color:none}.tl:hover{background:#000000}.tm:hover{border-color:#242424}.up:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.he:focus{transform:scale(1.01)}.md:focus{fill:rgba(8, 8, 8, 1)}.ni:focus svg{color:#000000}.mi:active{border-style:none}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.gz{margin-top:40px}.ib{font-size:42px}.ic{margin-top:1em}.id{line-height:52px}.ie{letter-spacing:-0.011em}.it{font-size:22px}.iu{margin-top:0.92em}.iv{line-height:28px}.ja{align-items:center}.lc{border-top:solid 1px #F2F2F2}.ld{border-bottom:solid 1px #F2F2F2}.le{margin:32px 0 0}.lf{padding:3px 8px}.lo> *{margin-right:24px}.lp> :last-child{margin-right:0}.mp{margin-top:0px}.ne{margin:0}.oo{font-size:20px}.op{margin-top:2.14em}.oq{line-height:32px}.or{letter-spacing:-0.003em}.oy{margin-top:56px}.pq{font-size:24px}.pr{margin-top:1.95em}.ps{line-height:30px}.pt{letter-spacing:-0.016em}.pz{margin-top:0.94em}.qm{margin-top:1.72em}.qn{line-height:24px}.qo{letter-spacing:0}.rd{margin-top:1.14em}.sg{display:inline-block}.sl{margin-bottom:104px}.sp{flex-direction:row}.ss{margin-bottom:0}.st{margin-right:20px}.tr{max-width:500px}.uj{margin-bottom:88px}.um{margin-bottom:72px}.va{width:min-width}.vf{padding-top:72px}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mo{margin-top:0px}.qs{margin-left:auto}.qt{text-align:center}.sf{display:inline-block}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mn{margin-top:0px}.se{display:inline-block}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.ml{margin-top:0px}.mm{margin-right:0px}.sd{display:inline-block}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gv{margin-top:32px}.hl{font-size:32px}.hm{margin-top:1.01em}.hn{line-height:38px}.ho{letter-spacing:-0.014em}.ih{font-size:18px}.ii{margin-top:0.79em}.ij{line-height:24px}.iw{align-items:flex-start}.jz{flex-direction:column}.kc{margin-bottom:2px}.kq{margin:24px -24px 0}.kr{padding:0}.lg> *{margin-right:8px}.lh> :last-child{margin-right:24px}.ly{margin-left:0px}.mj{margin-top:0px}.mk{margin-right:0px}.na{margin:0}.nj{border:1px solid #F2F2F2}.nk{border-radius:99em}.nl{padding:0px 16px 0px 12px}.nm{height:38px}.nn{align-items:center}.np svg{margin-right:8px}.oa{margin-top:1.56em}.ob{line-height:28px}.oc{letter-spacing:-0.003em}.ou{margin-top:40px}.pc{font-size:20px}.pd{margin-top:1.2em}.pe{letter-spacing:0}.pv{margin-top:0.67em}.qc{font-size:16px}.qd{margin-top:1.23em}.qz{margin-top:1.34em}.sc{display:inline-block}.sh{margin-bottom:96px}.ta{margin-bottom:20px}.tb{margin-right:0}.tv{max-width:100%}.ty{font-size:24px}.tz{line-height:30px}.ua{letter-spacing:-0.016em}.uf{margin-bottom:64px}.uw{width:100%}.vb{padding-top:48px}.no:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.gy{margin-top:40px}.hx{font-size:42px}.hy{margin-top:1em}.hz{line-height:52px}.ia{letter-spacing:-0.011em}.iq{font-size:22px}.ir{margin-top:0.92em}.is{line-height:28px}.iz{align-items:center}.ky{border-top:solid 1px #F2F2F2}.kz{border-bottom:solid 1px #F2F2F2}.la{margin:32px 0 0}.lb{padding:3px 8px}.lm> *{margin-right:24px}.ln> :last-child{margin-right:0}.nd{margin:0}.ok{font-size:20px}.ol{margin-top:2.14em}.om{line-height:32px}.on{letter-spacing:-0.003em}.ox{margin-top:56px}.pm{font-size:24px}.pn{margin-top:1.95em}.po{line-height:30px}.pp{letter-spacing:-0.016em}.py{margin-top:0.94em}.qj{margin-top:1.72em}.qk{line-height:24px}.ql{letter-spacing:0}.rc{margin-top:1.14em}.sk{margin-bottom:104px}.sq{flex-direction:row}.su{margin-bottom:0}.sv{margin-right:20px}.ts{max-width:500px}.ui{margin-bottom:88px}.ul{margin-bottom:72px}.uz{width:min-width}.ve{padding-top:72px}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.gx{margin-top:40px}.ht{font-size:42px}.hu{margin-top:1em}.hv{line-height:52px}.hw{letter-spacing:-0.011em}.in{font-size:22px}.io{margin-top:0.92em}.ip{line-height:28px}.iy{align-items:center}.ku{border-top:solid 1px #F2F2F2}.kv{border-bottom:solid 1px #F2F2F2}.kw{margin:32px 0 0}.kx{padding:3px 8px}.lk> *{margin-right:24px}.ll> :last-child{margin-right:0}.nc{margin:0}.og{font-size:20px}.oh{margin-top:2.14em}.oi{line-height:32px}.oj{letter-spacing:-0.003em}.ow{margin-top:56px}.pi{font-size:24px}.pj{margin-top:1.95em}.pk{line-height:30px}.pl{letter-spacing:-0.016em}.px{margin-top:0.94em}.qg{margin-top:1.72em}.qh{line-height:24px}.qi{letter-spacing:0}.rb{margin-top:1.14em}.sj{margin-bottom:104px}.sr{flex-direction:row}.sw{margin-bottom:0}.sx{margin-right:20px}.tt{max-width:500px}.uh{margin-bottom:88px}.uk{margin-bottom:72px}.uy{width:min-width}.vd{padding-top:72px}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.gw{margin-top:32px}.hp{font-size:32px}.hq{margin-top:1.01em}.hr{line-height:38px}.hs{letter-spacing:-0.014em}.ik{font-size:18px}.il{margin-top:0.79em}.im{line-height:24px}.ix{align-items:flex-start}.ka{flex-direction:column}.kd{margin-bottom:2px}.ks{margin:24px 0 0}.kt{padding:0}.li> *{margin-right:8px}.lj> :last-child{margin-right:8px}.lz{margin-left:0px}.nb{margin:0}.nq{border:1px solid #F2F2F2}.nr{border-radius:99em}.ns{padding:0px 16px 0px 12px}.nt{height:38px}.nu{align-items:center}.nw svg{margin-right:8px}.od{margin-top:1.56em}.oe{line-height:28px}.of{letter-spacing:-0.003em}.ov{margin-top:40px}.pf{font-size:20px}.pg{margin-top:1.2em}.ph{letter-spacing:0}.pw{margin-top:0.67em}.qe{font-size:16px}.qf{margin-top:1.23em}.ra{margin-top:1.34em}.si{margin-bottom:96px}.sy{margin-bottom:20px}.sz{margin-right:0}.tu{max-width:100%}.ub{font-size:24px}.uc{line-height:30px}.ud{letter-spacing:-0.016em}.ug{margin-bottom:64px}.ux{width:100%}.vc{padding-top:48px}.nv:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="print">.sa{display:none}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hb{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style><style type="text/css" data-fela-rehydration="582" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kn{max-height:none}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fe77ec1f32ee5&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" href="https://medium.com/?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" href="https://medium.com/search?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><figure class="gv gw gx gy gz ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt gu"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Jb5JszpcYpCmuwO3Z9Z2kg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hf hg c" width="700" height="383" loading="eager" role="presentation"/></picture></div></div></figure><div><h1 id="a210" class="pw-post-title hh hi hj bf hk hl hm hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if bk" data-testid="storyTitle">Designing the perfect button</h1></div><div><h2 id="de6d" class="pw-subtitle-paragraph ig hi hj bf b ih ii ij ik il im in io ip iq ir is it iu iv cq du">Everything you need to know about what makes a button great.</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="iw ix iy iz ja ab"><div><div class="ab jb"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/@domasmark?source=post_page---byline--e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="l jc jd by je jf"><div class="l fj"><img alt="Domas Markevičius" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*rDKrSKDRhrZeKR8f0_G7KQ.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="jg by l dd de fs n jh ft"></div></div></div></a></div></div><div class="ji ab fj"><div><div class="bm" aria-hidden="false"><a href="https://wix-ux.com/?source=post_page---byline--e77ec1f32ee5--------------------------------" rel="noopener ugc nofollow"><div class="l jj jk by je jl"><div class="l fj"><img alt="Wix UX" class="l fd by br jm cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*u86cGgAv5zBUqy65gVtpuQ.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="jg by l br jm fs n jh ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="jn ab q"><div class="ab q jo"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b jp jq bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" data-testid="authorName" href="https://medium.com/@domasmark?source=post_page---byline--e77ec1f32ee5--------------------------------" rel="noopener follow">Domas Markevičius</a></p></div></div></div><span class="js jt" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b jp jq du"><span><a class="ju jv ah ai aj ak al am an ao ap aq ar ex jw jx" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F646be93b568e&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=post_page-646be93b568e--byline--e77ec1f32ee5---------------------post_header-----------" rel="noopener follow">Follow</a></span></p></div></div></span></div></div><div class="l jy"><span class="bf b bg z du"><div class="ab cn jz ka kb"><div class="kc kd ab"><div class="bf b bg z du ab ke"><span class="kf l jy">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jr ab q" data-testid="publicationName" href="https://wix-ux.com/?source=post_page---byline--e77ec1f32ee5--------------------------------" rel="noopener ugc nofollow"><p class="bf b bg z kg kh ki kj kk kl km kn bk">Wix UX</p></a></div></div></div><div class="h k"><span class="js jt" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">7 min read</span><div class="ko kp l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Jun 13, 2022</span></div></span></div></span></div></div></div><div class="ab cp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf"><div class="h k w fg fh q"><div class="lv l"><div class="ab q lw lx"><div class="pw-multi-vote-icon fj kf ly lz ma"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fe77ec1f32ee5&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=---header_actions--e77ec1f32ee5---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="mb ao mc md me mf am mg mh mi ma"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mj mk ml mm mn mo mp"><p class="bf b dv z du"><span class="mq">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao mb mt mu ab q fk mv mw" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="ms"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count mr ms">14</span></p></button></div></div></div><div class="ab q lg lh li lj lk ll lm ln lo lp lq lr ls lt lu"><div class="mx k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fe77ec1f32ee5&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=---header_actions--e77ec1f32ee5---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du my" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mz cn"><div class="l ae"><div class="ab cb"><div class="na nb nc nd ne hf ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al nf an ao ap ex ng nh mw ni nj nk nl nm s nn no np nq nr ns nt u nu nv nw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al nf an ao ap ex ng nh mw ni nj nk nl nm s nn no np nq nr ns nt u nu nv nw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="94ed" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it’s crucial to communicate to the user how a button works and where it’ll lead them. Over the years, our design system has fine-tuned the craft of our buttons.</p><p id="f649" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Buttons allow users to control the product and achieve their goals. It can help them navigate the interface, modify content or both.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*MWtkZG9WuenCZ3vHypbooA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*MWtkZG9WuenCZ3vHypbooA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*MWtkZG9WuenCZ3vHypbooA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*MWtkZG9WuenCZ3vHypbooA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*MWtkZG9WuenCZ3vHypbooA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*MWtkZG9WuenCZ3vHypbooA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*MWtkZG9WuenCZ3vHypbooA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*MWtkZG9WuenCZ3vHypbooA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Three examples. First example shows “home” button which navigates to home page. Second example shows “duplicate button which makes a copy. Third example shows “add new product” button which redirects to a new page and make new product at once." class="bh hf hg c" width="700" height="313" loading="lazy"/></picture></div></div></figure><h1 id="ada9" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Principles</h1><p id="696a" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">As <a class="af qa" href="https://material.io/components/buttons#usage" rel="noopener ugc nofollow" target="_blank">Google explains</a>, a good button design follows 3 principles. It must be Identifiable, Findable and Clear. We keep close to these principles at Wix.</p><h2 id="1fad" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Making a button clear</h2><p id="863e" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">A button must clearly communicate what it does, with zero space for interpretation. Text is the primary element that explains intention.</p><p id="810d" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Of course, you can include an icon which helps to identify and understand the context. But without any text, it’ll lack full meaning. The text is a promise of what exactly will happen when that button is clicked.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*yLzTY-aq7Yao6alAZKQoWw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*yLzTY-aq7Yao6alAZKQoWw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*yLzTY-aq7Yao6alAZKQoWw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*yLzTY-aq7Yao6alAZKQoWw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*yLzTY-aq7Yao6alAZKQoWw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*yLzTY-aq7Yao6alAZKQoWw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*yLzTY-aq7Yao6alAZKQoWw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*yLzTY-aq7Yao6alAZKQoWw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hf hg c" width="700" height="221" loading="lazy" role="presentation"/></picture></div></div></figure><p id="c765" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Sometimes buttons need to include multiple messages, where the text and icon can even have different meanings.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Smt7W_nMAEkYJOtdprp5CQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Smt7W_nMAEkYJOtdprp5CQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Smt7W_nMAEkYJOtdprp5CQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Smt7W_nMAEkYJOtdprp5CQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Smt7W_nMAEkYJOtdprp5CQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Smt7W_nMAEkYJOtdprp5CQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Smt7W_nMAEkYJOtdprp5CQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Smt7W_nMAEkYJOtdprp5CQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A button with icon and label." class="bh hf hg c" width="700" height="98" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">In this example “<em class="qu">More Actions ▾</em>”, the text indicates that here you’ll find more actions, while the icon indicates that the menu of more actions will display in a dropdown once you click the arrow.</figcaption></figure><h2 id="713f" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk"><strong class="al">Case study</strong></h2><p id="4774" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">In 2019 the OS Team at Wix decided to change the button hierarchy. When we first launched, our design system had buttons with text only in our primary CTAs. Any secondary CTAs we had on the page were indicated with just a button — no text. After our update, we turned all our icon-only buttons into text or text + icon buttons. This small change led to a huge increase in click rate for <em class="qv">“Create New Folder”</em>. The top bar actions next to the primary CTA got more exposure too.</p><p id="d580" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">This visual comparison shows how the upper layout won the test against the bottom layout:</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*fEyRRYw9rqVxLMpreo6Wkw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fEyRRYw9rqVxLMpreo6Wkw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fEyRRYw9rqVxLMpreo6Wkw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fEyRRYw9rqVxLMpreo6Wkw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fEyRRYw9rqVxLMpreo6Wkw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fEyRRYw9rqVxLMpreo6Wkw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fEyRRYw9rqVxLMpreo6Wkw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*fEyRRYw9rqVxLMpreo6Wkw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two textual buttons." class="bh hf hg c" width="700" height="191" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">“Create New Folder” click rate significantly increased without harming the main goals.</figcaption></figure><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*epB_6g5j5KcueHYosNf9Jg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*epB_6g5j5KcueHYosNf9Jg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*epB_6g5j5KcueHYosNf9Jg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*epB_6g5j5KcueHYosNf9Jg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*epB_6g5j5KcueHYosNf9Jg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*epB_6g5j5KcueHYosNf9Jg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*epB_6g5j5KcueHYosNf9Jg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*epB_6g5j5KcueHYosNf9Jg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two buttons. One uses only an icon, second one appears with a text." class="bh hf hg c" width="700" height="191" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">Before the change, when “Create New Folder” button displayed only the icon, few people managed their sites into folders.</figcaption></figure><h2 id="141b" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Making a button findable</h2><p id="65d1" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Actions must be located where users expect to find them. The main action must always be visible and positioned in the top area. Navigation actions can look neutral but also must be visible. Only the least important actions that don’t affect the main path (e.g. <em class="qv">“delete”</em>) can be hidden under popovers.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*arCAf-RYGxcC6gZhaZtHFA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*arCAf-RYGxcC6gZhaZtHFA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*arCAf-RYGxcC6gZhaZtHFA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*arCAf-RYGxcC6gZhaZtHFA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*arCAf-RYGxcC6gZhaZtHFA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*arCAf-RYGxcC6gZhaZtHFA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*arCAf-RYGxcC6gZhaZtHFA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*arCAf-RYGxcC6gZhaZtHFA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two examples of buttons that open a contextual menu. The first example uses a label making it obvious what the button will do. The second example uses only an icon making it little know what the button will do." class="bh hf hg c" width="700" height="343" loading="lazy"/></picture></div></div></figure><p id="05ac" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Avoid placing tool actions with navigate buttons in the same list. Users might not expect to find buttons that are out of context.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*ACMN5UcjOzsLdOPwwMdKIA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*ACMN5UcjOzsLdOPwwMdKIA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*ACMN5UcjOzsLdOPwwMdKIA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*ACMN5UcjOzsLdOPwwMdKIA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*ACMN5UcjOzsLdOPwwMdKIA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*ACMN5UcjOzsLdOPwwMdKIA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*ACMN5UcjOzsLdOPwwMdKIA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*ACMN5UcjOzsLdOPwwMdKIA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A contextual menu with tool actions and navigation action" class="bh hf hg c" width="700" height="286" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">In this example, the “Category Manager” button is out of context. “More Actions” communicates that the menu will provide actions but doesn’t tell the user that there will be navigation buttons.</figcaption></figure><h2 id="03b5" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Making a button identifiable</h2><p id="a3b3" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Users must easily understand which interface parts are static and which are clickable. Wix uses blue color for all major actions. Lighter blues can be used only as the button’s background color.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Lstfy3hnA8oUq0BqoRNJNQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Lstfy3hnA8oUq0BqoRNJNQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Lstfy3hnA8oUq0BqoRNJNQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Lstfy3hnA8oUq0BqoRNJNQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Lstfy3hnA8oUq0BqoRNJNQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Lstfy3hnA8oUq0BqoRNJNQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Lstfy3hnA8oUq0BqoRNJNQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Lstfy3hnA8oUq0BqoRNJNQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two examples of button placement and coloring. The first example has a distinct button because of its placement and color, the the second example shows the opposite making a button hard to see." class="bh hf hg c" width="700" height="538" loading="lazy"/></picture></div></div></figure><p id="b6a9" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">In some cases, like on colored backgrounds, the blue color can’t be used due to the contrast. Then, text, contrast and shape plays the major role in making the button look recognizable and distinct from the rest of the environment. Following <a class="af qa" href="https://webaim.org/articles/contrast/#ratio" rel="noopener ugc nofollow" target="_blank">Web Content Accessibility Guidelines</a> helps to provide a good text contrast, so the majority of users will be able to read it.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*7rHRvnz6WIaZ2VPBGc4wog.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*7rHRvnz6WIaZ2VPBGc4wog.png 640w, https://miro.medium.com/v2/resize:fit:720/1*7rHRvnz6WIaZ2VPBGc4wog.png 720w, https://miro.medium.com/v2/resize:fit:750/1*7rHRvnz6WIaZ2VPBGc4wog.png 750w, https://miro.medium.com/v2/resize:fit:786/1*7rHRvnz6WIaZ2VPBGc4wog.png 786w, https://miro.medium.com/v2/resize:fit:828/1*7rHRvnz6WIaZ2VPBGc4wog.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*7rHRvnz6WIaZ2VPBGc4wog.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*7rHRvnz6WIaZ2VPBGc4wog.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A notification message with a textual button" class="bh hf hg c" width="700" height="170" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">Black action works well on colorful backgrounds. Underlined text makes it clear that it’s actionable.</figcaption></figure><h1 id="5a9c" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Text</h1><p id="90b4" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Text is the primary element that explains the button’s intention. It should be clear, predictable and simple. Start with a verb to encourage action. Verbs must tell the user what happens once a button is clicked so they can predict the next step. Use simple language that will be recognized by any age group.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*GQzN5qQk2aPiDR4BQgViRA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*GQzN5qQk2aPiDR4BQgViRA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*GQzN5qQk2aPiDR4BQgViRA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*GQzN5qQk2aPiDR4BQgViRA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*GQzN5qQk2aPiDR4BQgViRA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*GQzN5qQk2aPiDR4BQgViRA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*GQzN5qQk2aPiDR4BQgViRA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*GQzN5qQk2aPiDR4BQgViRA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two examples of button’s label writing style. Using verb sentences make the button obvious (e.g. “Upgrade to Premium”), while buttons labeled in nouns don’t encourage users to interact." class="bh hf hg c" width="700" height="349" loading="lazy"/></picture></div></div></figure><h2 id="5a83" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk"><strong class="al">Case Study</strong></h2><p id="79ee" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Wix’s Photo Studio Team performed an A/B test which showed that users engage more when buttons are displayed with text. The application tested three layouts; icon only, text below the icon and text on the side. Versions with text won the experiment.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*BPr0qS4XqY6g4-UGjfddaQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*BPr0qS4XqY6g4-UGjfddaQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*BPr0qS4XqY6g4-UGjfddaQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*BPr0qS4XqY6g4-UGjfddaQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*BPr0qS4XqY6g4-UGjfddaQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*BPr0qS4XqY6g4-UGjfddaQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*BPr0qS4XqY6g4-UGjfddaQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*BPr0qS4XqY6g4-UGjfddaQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two versions of vertical list of actions. First version uses icons and labels below. Second version uses only the icons." class="bh hf hg c" width="700" height="447" loading="lazy"/></picture></div></div></figure><p id="485f" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">After a failed test, the layout was reverted to the original.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*zvk0oRkGBqZmTs7oZ7XsDA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*zvk0oRkGBqZmTs7oZ7XsDA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*zvk0oRkGBqZmTs7oZ7XsDA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*zvk0oRkGBqZmTs7oZ7XsDA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*zvk0oRkGBqZmTs7oZ7XsDA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*zvk0oRkGBqZmTs7oZ7XsDA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*zvk0oRkGBqZmTs7oZ7XsDA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*zvk0oRkGBqZmTs7oZ7XsDA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A vertical list of actions with icons and labels. Labels are placed on the side of the icons." class="bh hf hg c" width="700" height="249" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">This version shows the final solution used by Photo Studio. It solved the initial problem and led to a slight increase of tabs use.</figcaption></figure><p id="6a12" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">This study showed that text plays a crucial role in making buttons clear and actionable.</p><h1 id="accc" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Text in context</h1><p id="604e" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">A button’s text should reflect the context. Make sure the user is aware what action is available. For example, alert modals appear fast and change the layout. Therefore, the potential actions must be very clear.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*vOrnU4nFOKfyK5i7VIZf6Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*vOrnU4nFOKfyK5i7VIZf6Q.png 640w, https://miro.medium.com/v2/resize:fit:720/1*vOrnU4nFOKfyK5i7VIZf6Q.png 720w, https://miro.medium.com/v2/resize:fit:750/1*vOrnU4nFOKfyK5i7VIZf6Q.png 750w, https://miro.medium.com/v2/resize:fit:786/1*vOrnU4nFOKfyK5i7VIZf6Q.png 786w, https://miro.medium.com/v2/resize:fit:828/1*vOrnU4nFOKfyK5i7VIZf6Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*vOrnU4nFOKfyK5i7VIZf6Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*vOrnU4nFOKfyK5i7VIZf6Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A modal, where main call to actions are labeled as “Move to Trash” and “Cancel”" class="bh hf hg c" width="700" height="280" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">The good example showing how both buttons are clear what they will do. The main button reflects the content’s title — it makes an accurate alert message.</figcaption></figure><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*TaZXkocNDaOF9v0cDgDqLw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*TaZXkocNDaOF9v0cDgDqLw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*TaZXkocNDaOF9v0cDgDqLw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*TaZXkocNDaOF9v0cDgDqLw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*TaZXkocNDaOF9v0cDgDqLw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*TaZXkocNDaOF9v0cDgDqLw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*TaZXkocNDaOF9v0cDgDqLw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*TaZXkocNDaOF9v0cDgDqLw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A modal, where main call to actions are labeled as “Yes” and “No”" class="bh hf hg c" width="700" height="280" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">The bad example showing how buttons don’t explain what would happen if they’re clicked. A user must remember their previous actions to understand the context.</figcaption></figure><p id="7894" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">In modals that just state the facts, like <em class="qv">“Success”</em> or <em class="qv">“Two users can’t edit at once”</em> it’s ok to use less descriptive buttons such as, <em class="qv">“Got it, Thanks”</em>.</p><h1 id="45bc" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Icons</h1><p id="f859" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Icons help users understand the context. However, icons can often be misinterpreted. Icons don’t encourages users to take action in the same way text does. For this reason, you should use single icon buttons with caution.</p><p id="9658" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Icon buttons work great for professional tools where a user will regularly click buttons and memorize them. Placing icons next to a button with text will increase the chance of being noticed by users.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*4p4RILy7i8DeEUQy1SQOzA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*4p4RILy7i8DeEUQy1SQOzA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*4p4RILy7i8DeEUQy1SQOzA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*4p4RILy7i8DeEUQy1SQOzA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*4p4RILy7i8DeEUQy1SQOzA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*4p4RILy7i8DeEUQy1SQOzA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*4p4RILy7i8DeEUQy1SQOzA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*4p4RILy7i8DeEUQy1SQOzA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Four buttons. One of the buttons appears with a text." class="bh hf hg c" width="700" height="146" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">“Edit” button attracts the user’s attention to this button group. Mouse hovered icon buttons reveal their labels in a tooltip making it obvious what the icon button will do.</figcaption></figure><h2 id="4bdd" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Case Study</h2><p id="21a9" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Side navigation testing showed that Wix users engage more with drill-in buttons that have arrow icons.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*leCJ5mGQQ0XJRy1gEnf7ww.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*leCJ5mGQQ0XJRy1gEnf7ww.png 640w, https://miro.medium.com/v2/resize:fit:720/1*leCJ5mGQQ0XJRy1gEnf7ww.png 720w, https://miro.medium.com/v2/resize:fit:750/1*leCJ5mGQQ0XJRy1gEnf7ww.png 750w, https://miro.medium.com/v2/resize:fit:786/1*leCJ5mGQQ0XJRy1gEnf7ww.png 786w, https://miro.medium.com/v2/resize:fit:828/1*leCJ5mGQQ0XJRy1gEnf7ww.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*leCJ5mGQQ0XJRy1gEnf7ww.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*leCJ5mGQQ0XJRy1gEnf7ww.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Two side navigation versions. Initial version used to reveal icons on mouse hover. New version showed icons next to buttons always. It significantly increased user engagement." class="bh hf hg c" width="700" height="443" loading="lazy"/></picture></div></div></figure><p id="0c0c" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">This study shows how text and icons can give additional context when used together. This helps users understand what buttons leave the page and what buttons display more options.</p><h1 id="ae99" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Hierarchy</h1><p id="1e42" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Applications tend to have multiple actions. Some actions are always used, others just occasionally. Not every button needs full attention but all buttons must be discoverable. A good hierarchy means every action will be discovered easily when needed. There are multiple techniques on how to create a good hierarchy.</p><h2 id="7294" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Placement</h2><p id="65ba" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">The most important actions must be put in the most visible area; at Wix it’s the top of the page in the right hand corner. The lower the button, the less discoverable it’ll be.</p><p id="60ac" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">In languages written left to right, users start to read from left, that’s why it’s good to display the main call to action last on the right side. Users can take an action once all options are already presented. According to psychologist Herman Ebbinghaus the first and last elements in a sequence are the easiest to memorize. This tendency is called the serial<a class="af qa" href="https://lawsofux.com/serial-position-effect" rel="noopener ugc nofollow" target="_blank"> position effect</a> and it’s used in UX design.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*MamUkMbr-O7lDD15QTLSHw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*MamUkMbr-O7lDD15QTLSHw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*MamUkMbr-O7lDD15QTLSHw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*MamUkMbr-O7lDD15QTLSHw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*MamUkMbr-O7lDD15QTLSHw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*MamUkMbr-O7lDD15QTLSHw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*MamUkMbr-O7lDD15QTLSHw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*MamUkMbr-O7lDD15QTLSHw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A standard Wix Business Manager page" class="bh hf hg c" width="700" height="324" loading="lazy"/></picture></div></div><figcaption class="qq ff qr gs gt qs qt bf b bg z du">Most important actions “Save” and “Cancel” are positioned in the top right corner so they’re always visible.</figcaption></figure><h1 id="1b7b" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Emphasis</h1><p id="300c" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">All buttons must be recognizable actions. Use emphasis to achieve that. Note that not every button must be emphasized at the same level. A single page should have only one main action. Other actions should be secondary or tertiary.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*DeM1NLEHgO2g177GtNb8Ow.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*DeM1NLEHgO2g177GtNb8Ow.png 640w, https://miro.medium.com/v2/resize:fit:720/1*DeM1NLEHgO2g177GtNb8Ow.png 720w, https://miro.medium.com/v2/resize:fit:750/1*DeM1NLEHgO2g177GtNb8Ow.png 750w, https://miro.medium.com/v2/resize:fit:786/1*DeM1NLEHgO2g177GtNb8Ow.png 786w, https://miro.medium.com/v2/resize:fit:828/1*DeM1NLEHgO2g177GtNb8Ow.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*DeM1NLEHgO2g177GtNb8Ow.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*DeM1NLEHgO2g177GtNb8Ow.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Multiple buttons sorted by their importance" class="bh hf hg c" width="700" height="237" loading="lazy"/></picture></div></div></figure><h2 id="9c8c" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Style</h2><p id="6131" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Each button can have a style based on its own intention. A set of styles creates a design language which customers use when working with an application. There can be a different style for general, navigation, social share or upload buttons. Each brand product can have its own set of button styles.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Q5GJvA1RXmChEhq0iE-AUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Q5GJvA1RXmChEhq0iE-AUA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Q5GJvA1RXmChEhq0iE-AUA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Q5GJvA1RXmChEhq0iE-AUA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Q5GJvA1RXmChEhq0iE-AUA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Q5GJvA1RXmChEhq0iE-AUA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Q5GJvA1RXmChEhq0iE-AUA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Q5GJvA1RXmChEhq0iE-AUA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Multiple buttons in different shape and color" class="bh hf hg c" width="700" height="140" loading="lazy"/></picture></div></div></figure><h2 id="51f6" class="qb pa hj bf pb qc qd dy pe qe qf ea ph og qg qh qi ok qj qk ql oo qm qn qo qp bk">Size</h2><p id="8e49" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">Buttons can appear in multiple sizes. Large buttons should appear in large and spacious layouts, tiny buttons should be used in small and crowded spaces.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*0C_RXbbtzGz3UW5viXoajQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*0C_RXbbtzGz3UW5viXoajQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*0C_RXbbtzGz3UW5viXoajQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*0C_RXbbtzGz3UW5viXoajQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*0C_RXbbtzGz3UW5viXoajQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*0C_RXbbtzGz3UW5viXoajQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*0C_RXbbtzGz3UW5viXoajQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*0C_RXbbtzGz3UW5viXoajQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="Four different size buttons" class="bh hf hg c" width="700" height="104" loading="lazy"/></picture></div></div></figure><h1 id="57f3" class="oz pa hj bf pb pc pd ij pe pf pg im ph pi pj pk pl pm pn po pp pq pr ps pt pu bk">Summary</h1><p id="00ef" class="pw-post-body-paragraph nx ny hj nz b ih pv ob oc ik pw oe of og px oi oj ok py om on oo pz oq or os gn bk">A well organized hierarchy between the actions creates harmony on the page so it’s easy for the user to read and understand. For example, <a class="af qa" href="https://community.wix.com/partners/forum/partner-announcements/exclusive-feature-access-sell-tickets-with-assigned-seats-in-wix-events" rel="noopener ugc nofollow" target="_blank">Wix Seatings Map Builder</a> shows how button’s different properties make a clear hierarchy between actions — primary, secondary and least important.</p><ul class=""><li id="c051" class="nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os qw qx qy bk"><strong class="nz hk">Primary: </strong>Highest contrast, crucial for the main goal.</li><li id="9d9f" class="nx ny hj nz b ih qz ob oc ik ra oe of og rb oi oj ok rc om on oo rd oq or os qw qx qy bk"><strong class="nz hk">Secondary: </strong>Recognizable on the screen without any clicks, assisting the main goal.</li><li id="c1ac" class="nx ny hj nz b ih qz ob oc ik ra oe of og rb oi oj ok rc om on oo rd oq or os qw qx qy bk"><strong class="nz hk">Least Important: </strong>Hidden under the Icon Button and are not really connected to the main goal, e.g.: <em class="qv">“Edit Ticket”</em>.</li></ul><p id="dc96" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">Each action has a clear text label that helps users to understand the button from first glimpse. Icons in the buttons are plain and recognizable by <a class="af qa" href="https://www.nngroup.com/articles/icon-usability/" rel="noopener ugc nofollow" target="_blank">industry standards</a>.</p><figure class="ou ov ow ox oy ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt ot"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*fiDOFk-3NpgTPHeVt1S8Fw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fiDOFk-3NpgTPHeVt1S8Fw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fiDOFk-3NpgTPHeVt1S8Fw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fiDOFk-3NpgTPHeVt1S8Fw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fiDOFk-3NpgTPHeVt1S8Fw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fiDOFk-3NpgTPHeVt1S8Fw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fiDOFk-3NpgTPHeVt1S8Fw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*fiDOFk-3NpgTPHeVt1S8Fw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="A screenshot of Wix Seatings Map Builder application" class="bh hf hg c" width="700" height="409" loading="lazy"/></picture></div></div></figure></div></div></div><div class="ab cb re rf rg rh" role="separator"><span class="ri by bm rj rk rl"></span><span class="ri by bm rj rk rl"></span><span class="ri by bm rj rk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="0f00" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk">This article is a collection of experiences from multiple designers from many teams. A big thanks to everyone who shared their case studies, insights and feedback or simply designed great products that inspired this article.</p><p id="7298" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk"><em class="qv">Article was written by Domas Markevičius, edited by Wailana Kalama.</em></p></div></div></div><div class="ab cb re rf rg rh" role="separator"><span class="ri by bm rj rk rl"></span><span class="ri by bm rj rk rl"></span><span class="ri by bm rj rk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="bff6" class="pw-post-body-paragraph nx ny hj nz b ih oa ob oc ik od oe of og oh oi oj ok ol om on oo op oq or os gn bk"><strong class="nz hk">Is there a topic you want to see covered by the Wix UX team? Let us know by filling out this </strong><a class="af qa" href="https://forms.wix.com/c1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b" rel="noopener ugc nofollow" target="_blank"><strong class="nz hk">form</strong></a><strong class="nz hk">.</strong></p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rm rn ab kb"><div class="ro ab"><a class="rp ay am ao" href="https://medium.com/tag/ux-design?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="rq fj cx rr ge rs rt bf b bg z bk ru">UX Design</div></a></div><div class="ro ab"><a class="rp ay am ao" href="https://medium.com/tag/ux-writing?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="rq fj cx rr ge rs rt bf b bg z bk ru">Ux Writing</div></a></div><div class="ro ab"><a class="rp ay am ao" href="https://medium.com/tag/ui-design?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="rq fj cx rr ge rs rt bf b bg z bk ru">UI Design</div></a></div><div class="ro ab"><a class="rp ay am ao" href="https://medium.com/tag/design-systems?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="rq fj cx rr ge rs rt bf b bg z bk ru">Design Systems</div></a></div><div class="ro ab"><a class="rp ay am ao" href="https://medium.com/tag/case-study?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="rq fj cx rr ge rs rt bf b bg z bk ru">Case Study</div></a></div></div></div></div><div class="l"></div><footer class="rv rf rw rx ry ab q rz jl c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp sa"><div class="ab q lw"><div class="sb l"><span class="l sc sd se e d"><div class="ab q lw lx"><div class="pw-multi-vote-icon fj kf ly lz ma"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fe77ec1f32ee5&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=---footer_actions--e77ec1f32ee5---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="mb ao mc md me mf am mg mh mi ma"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mj mk ml mm mn mo mp"><p class="bf b dv z du"><span class="mq">--</span></p></div></div></span><span class="l h g f sf sg"><div class="ab q lw lx"><div class="pw-multi-vote-icon fj kf ly lz ma"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fwix-ux%2Fe77ec1f32ee5&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=---footer_actions--e77ec1f32ee5---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="mb ao mc md me mf am mg mh mi ma"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mj mk ml mm mn mo mp"><p class="bf b dv z du"><span class="mq">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao mb mt mu ab q fk mv mw" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="ms"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count mr ms">14</span></p></button></div></div></div></div><div class="ab q"><div class="rl l jy"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fe77ec1f32ee5&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&source=---footer_actions--e77ec1f32ee5---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du my" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="rl l jy"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al nf an ao ap ex ng nh mw ni"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="sh si sj sk sl l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sm bh r sn"></div><div class="so l"><div class="ab sp sq sr ka jz"><div class="ss st su sv sw sx sy sz ta tb ab cp"><div class="h k"><a href="https://wix-ux.com/?source=post_page---post_publication_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Wix UX" class="tc jc jd cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*u86cGgAv5zBUqy65gVtpuQ.png" width="48" height="48" loading="lazy"/><div class="tc l jd jc fs n fr td"></div></div></a></div><div class="j i d"><a href="https://wix-ux.com/?source=post_page---post_publication_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Wix UX" class="tc tf te cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*u86cGgAv5zBUqy65gVtpuQ.png" width="64" height="64" loading="lazy"/><div class="tc l te tf fs n fr td"></div></div></a></div><div class="j i d tg jy"><div class="ab"><span><a class="bf b bg z th rq ti tj tk tl tm ev ew tn to tp fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fwix-ux&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&collection=Wix+UX&collectionId=5c12f12b4121&source=post_page---post_publication_info--e77ec1f32ee5---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co tq"><div class="tr ts tt tu tv l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://wix-ux.com/?source=post_page---post_publication_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf tx ty tz ua ub uc ud og qh qi ok qk ql oo qn qo bk"><span class="gn tw">Published in <!-- -->Wix UX</span></h2></a><div class="ro ab jb"><div class="l jy"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" rel="noopener follow" href="/followers?source=post_page---post_publication_info--e77ec1f32ee5--------------------------------">762 Followers</a></span></div><div class="bf b bg z du ab ke"><span class="js l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jr" rel="noopener follow" href="/master-your-career-journey-the-power-of-intentional-growth-43348d056fc1?source=post_page---post_publication_info--e77ec1f32ee5--------------------------------">Last published <!-- -->2 days ago</a></div></div><div class="ue l"><p class="bf b bg z bk"><span class="gn">The Wix way of doing UX</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z th rq ti tj tk tl tm ev ew tn to tp fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fwix-ux&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&collection=Wix+UX&collectionId=5c12f12b4121&source=post_page---post_publication_info--e77ec1f32ee5---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div><div class="ab sp sq sr ka jz"><div class="ss st su sv sw sx sy sz ta tb ab cp"><div class="h k"><a tabindex="0" href="https://medium.com/@domasmark?source=post_page---post_author_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Domas Markevičius" class="l fd by jd jc cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*rDKrSKDRhrZeKR8f0_G7KQ.png" width="48" height="48" loading="lazy"/><div class="fr by l jd jc fs n ay td"></div></div></a></div><div class="j i d"><a tabindex="0" href="https://medium.com/@domasmark?source=post_page---post_author_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Domas Markevičius" class="l fd by te tf cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*rDKrSKDRhrZeKR8f0_G7KQ.png" width="64" height="64" loading="lazy"/><div class="fr by l te tf fs n ay td"></div></div></a></div><div class="j i d tg jy"><div class="ab"><span><a class="bf b bg z th rq ti tj tk tl tm ev ew tn to tp fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F646be93b568e&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=post_page-646be93b568e--post_author_info--e77ec1f32ee5---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co tq"><div class="tr ts tt tu tv l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/@domasmark?source=post_page---post_author_info--e77ec1f32ee5--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf tx ty tz ua ub uc ud og qh qi ok qk ql oo qn qo bk"><span class="gn tw">Written by <!-- -->Domas Markevičius</span></h2></a><div class="ro ab jb"><div class="l jy"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jr" href="https://medium.com/@domasmark/followers?source=post_page---post_author_info--e77ec1f32ee5--------------------------------" rel="noopener follow">416 Followers</a></span></div><div class="bf b bg z du ab ke"><span class="js l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jr" href="https://medium.com/@domasmark/following?source=post_page---post_author_info--e77ec1f32ee5--------------------------------" rel="noopener follow">14 Following</a></div></div><div class="ue l"><p class="bf b bg z bk">Currently, I'm reimagining the MDX documentation editing experience at <a class="af ag ah ai aj ak al am an ao ap aq ar qa go" href="http://Dhub.dev" rel="noopener ugc nofollow">Dhub.dev</a>. Previously, I led design at ZealiD and led a design system team at <a class="af ag ah ai aj ak al am an ao ap aq ar qa go" href="http://Wix.com" rel="noopener ugc nofollow">Wix.com</a>.</p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z th rq ti tj tk tl tm ev ew tn to tp fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F646be93b568e&operation=register&redirect=https%3A%2F%2Fwix-ux.com%2Fdesigning-the-perfect-button-e77ec1f32ee5&user=Domas+Markevi%C4%8Dius&userId=646be93b568e&source=post_page-646be93b568e--post_author_info--e77ec1f32ee5---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div></div></div><div class="uf ug uh ui uj l"><div class="sm bh r uf ug uk ul um"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf tx pc ij pe pf im ph pi pk pl pm po pp pq ps pt bk">Responses (<!-- -->14<!-- -->)</h2><div class="ab un"><div><div class="bm" aria-hidden="false"><a class="uo up" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--e77ec1f32ee5--------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="re l"><button class="bf b bg z bk rq uq ur us my mv tm ev ew ex ut uu uv fa uw ux uy uz va fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="vb vc vd ve vf l bx"><div class="h k j"><div class="sm bh vg vh"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="vi ab lw kb"><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/about?autoplay=1&source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">About</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Careers</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="vj vk l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="vj l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/business?source=post_page-----e77ec1f32ee5--------------------------------" rel="noopener follow"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241126-181518-0cb59a020f"</script><script>window.__GRAPHQL_URI__ = "https://wix-ux.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"This request is not using the cache middleware worker","group":"disabled","tags":["group-edgeCachePosts","post-e77ec1f32ee5","user-646be93b568e","collection-5c12f12b4121"],"serverVariantState":"","middlewareEnabled":false,"cacheStatus":"DYNAMIC","shouldUseCache":false,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"COLLECTION","id":"5c12f12b4121","explicit":true},"viewerIsBot":false},"debug":{"requestId":"84116e53-cb65-495c-9802-a7b36ad172f6","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-6290495243523a72be44b01c36c4c833-3cf2bb1a5d060bfe-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fwix-ux.com\u002Fdesigning-the-perfect-button-e77ec1f32ee5","host":"wix-ux.com","hostname":"wix-ux.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null}},"config":{"nodeEnv":"production","version":"main-20241126-181518-0cb59a020f","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241126-181518-0cb59a020f","commit":"0cb59a020f4453d0900f671f1a6576feecc55e74"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"variantFlags":[{"__typename":"VariantFlag","name":"enable_deprecate_legacy_providers_v3","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_group_gifting","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_post_referrers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signin_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"enable_ios_easy_resubscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_manage_membership_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier_badge","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_new_push_notification_endpoint","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_aspirational_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_nia_v01","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_members_only_audio","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_newsletter_lo_flow_custom_domains","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_lock_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lo_homepage","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_new_stripe_customers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recaptcha_enterprise","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_country_expansion","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_plan","valueType":{"__typename":"VariantFlagString","value":"2c754bcc2995"}},{"__typename":"VariantFlag","name":"allow_test_auth","valueType":{"__typename":"VariantFlagString","value":"disallow"}},{"__typename":"VariantFlag","name":"enable_rex_reading_history","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_auto_follow_on_subscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_sign_in","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_maim_the_meter","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recirc_model","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tribute_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_aggregator_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_branch_io","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_avatar_upload","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_seamless_social_sharing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pill_based_home_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards_byline","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_response_markup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"rex_generator_max_candidates","valueType":{"__typename":"VariantFlagNumber","value":1000}},{"__typename":"VariantFlag","name":"enable_footer_app_buttons","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_configure_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tick_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_lists_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cache_less_following_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_iceland_nux","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_remove_twitter_onboarding_step","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_social_share_sheet","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_verifications_service","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_plan","valueType":{"__typename":"VariantFlagString","value":"60e220181034"}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"disable_partner_program_enrollment","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_programming_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_aspiriational","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pre_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_yearly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_automod","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_intrinsic_automatic_actions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_continue_this_thread","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_two_hour_refresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_publication_hierarchy_web","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_updated_pub_recs_ui","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_signup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_legacy_feed_in_iceland","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_starspace","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reader_fair_distribution_non_qp","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"skip_fs_cache_user_vals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_eventstats_event_processing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_explicit_signals_updated_post_previews","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_one_tap","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_image_sharer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"mobile_custom_app_icon","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_widget","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_google_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_programming","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bg_post_post","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_import","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_cart_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_ranker_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"redefined_top_posts","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reengagement_notification_duration","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"enable_aurora_pub_follower_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"coronavirus_topic_recirc","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_integration","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_model_v2","valueType":{"__typename":"VariantFlagString","value":"group_2"}},{"__typename":"VariantFlag","name":"ios_in_app_free_trial","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_premium_plan","valueType":{"__typename":"VariantFlagString","value":"12a660186432"}},{"__typename":"VariantFlag","name":"ios_display_paywall_after_onboarding","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_iceland_forced_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_simplified_digest_v2_b","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_verified_book_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_access","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_app_flirty_thirty","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_server_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_receive_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_miro_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_premium_plan","valueType":{"__typename":"VariantFlagString","value":"4a442ace1476"}},{"__typename":"VariantFlag","name":"onboarding_tags_from_top_views","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_syntax_highlight","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_creator_welcome_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_switch_plan_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bayesian_average_pub_search","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tag_recs","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_explicit_signals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members_username_selection","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sprig","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_verified_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_create_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_billing_frequency_on_step2","valueType":{"__typename":"VariantFlagString","value":"group_1"}},{"__typename":"VariantFlag","name":"enable_sharer_validate_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_c","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ranker_v10","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_see_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_home_post_menu","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_editor_new_publishing_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_archive_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_client","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_homepage","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium2_kbfd","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_explore_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"goliath_externalsearch_enable_comment_deindexation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_all_recs_surfaces","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recommended_publishers_query","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_diversification_rex","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_entities_to_follow_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_autorefresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signup_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"textshots_userid","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_braintree_paypal","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_trial_membership","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rito_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_monthly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"num_post_bottom_responses_to_show","valueType":{"__typename":"VariantFlagString","value":"1"}},{"__typename":"VariantFlag","name":"can_send_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ml_rank_rex_anno","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_first_story","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_topic_portals_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"glyph_font_set","valueType":{"__typename":"VariantFlagString","value":"m2-unbound-source-serif-pro"}},{"__typename":"VariantFlag","name":"android_rating_prompt_stories_read_threshold","valueType":{"__typename":"VariantFlagNumber","value":2}},{"__typename":"VariantFlag","name":"enable_marketing_emails","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"browsable_stream_config_bucket","valueType":{"__typename":"VariantFlagString","value":"curated-topics"}},{"__typename":"VariantFlag","name":"enable_braintree_apple_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_input","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_user_follows","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_topic_portals","valueType":{"__typename":"VariantFlagBoolean","value":true}}],"collectionByDomainOrSlug({\"domainOrSlug\":\"wix-ux.com\"})":{"__ref":"Collection:5c12f12b4121"},"postResult({\"id\":\"e77ec1f32ee5\"})":{"__ref":"Post:e77ec1f32ee5"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":"","originalWidth":0,"originalHeight":0},"Collection:5c12f12b4121":{"__typename":"Collection","id":"5c12f12b4121","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFFFFF","point":0},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.1},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.2},{"__typename":"ColorPoint","color":"#FFD1E7D1","point":0.6},{"__typename":"ColorPoint","color":"#FFA3D0A2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF1A8917","point":0},{"__typename":"ColorPoint","color":"#FF11800E","point":0.1},{"__typename":"ColorPoint","color":"#FF0F730C","point":0.2},{"__typename":"ColorPoint","color":"#FF095407","point":1}]},"tintBackgroundSpectrum":null},"domain":"wix-ux.com","slug":"wix-ux","googleAnalyticsId":null,"editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:d67224f4d961"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:f76a7cb168a3"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:c9dc4c8ff1cd"}}],"name":"Wix UX","avatar":{"__ref":"ImageMetadata:1*u86cGgAv5zBUqy65gVtpuQ.png"},"description":"The Wix way of doing UX","subscriberCount":762,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:43348d056fc1"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:5c12f12b4121-viewerId:lo_22b2e2c8a712"},"twitterUsername":null,"facebookPageId":null,"logo":{"__ref":"ImageMetadata:"}},"User:d67224f4d961":{"__typename":"User","id":"d67224f4d961"},"User:f76a7cb168a3":{"__typename":"User","id":"f76a7cb168a3"},"User:c9dc4c8ff1cd":{"__typename":"User","id":"c9dc4c8ff1cd"},"ImageMetadata:1*u86cGgAv5zBUqy65gVtpuQ.png":{"__typename":"ImageMetadata","id":"1*u86cGgAv5zBUqy65gVtpuQ.png"},"User:9948a2915b05":{"__typename":"User","id":"9948a2915b05","customDomainState":null,"hasSubdomain":false,"username":"efratr"},"Post:43348d056fc1":{"__typename":"Post","id":"43348d056fc1","firstPublishedAt":1732534825339,"creator":{"__ref":"User:9948a2915b05"},"collection":{"__ref":"Collection:5c12f12b4121"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fwix-ux.com\u002Fmaster-your-career-journey-the-power-of-intentional-growth-43348d056fc1","sequence":null,"uniqueSlug":"master-your-career-journey-the-power-of-intentional-growth-43348d056fc1"},"LinkedAccounts:646be93b568e":{"__typename":"LinkedAccounts","mastodon":null,"id":"646be93b568e"},"UserViewerEdge:userId:646be93b568e-viewerId:lo_22b2e2c8a712":{"__typename":"UserViewerEdge","id":"userId:646be93b568e-viewerId:lo_22b2e2c8a712","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:e737c28421b4":{"__typename":"NewsletterV3","id":"e737c28421b4","type":"NEWSLETTER_TYPE_AUTHOR","slug":"646be93b568e","name":"646be93b568e","collection":null,"user":{"__ref":"User:646be93b568e"}},"User:646be93b568e":{"__typename":"User","id":"646be93b568e","name":"Domas Markevičius","username":"domasmark","newsletterV3":{"__ref":"NewsletterV3:e737c28421b4"},"linkedAccounts":{"__ref":"LinkedAccounts:646be93b568e"},"isSuspended":false,"imageId":"1*rDKrSKDRhrZeKR8f0_G7KQ.png","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":416,"followingCount":8,"collectionFollowingCount":6},"customDomainState":null,"hasSubdomain":false,"bio":"Currently, I'm reimagining the MDX documentation editing experience at Dhub.dev. Previously, I led design at ZealiD and led a design system team at Wix.com.","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:646be93b568e-viewerId:lo_22b2e2c8a712"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":"domasmark"},"Topic:22d054b693da":{"__typename":"Topic","slug":"visual-design","id":"22d054b693da","name":"Visual Design"},"ImageMetadata:1*Jb5JszpcYpCmuwO3Z9Z2kg.png":{"__typename":"ImageMetadata","id":"1*Jb5JszpcYpCmuwO3Z9Z2kg.png","originalHeight":444,"originalWidth":813,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7a99d8a0c0b9_0":{"__typename":"Paragraph","id":"7a99d8a0c0b9_0","name":"97e5","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Jb5JszpcYpCmuwO3Z9Z2kg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_1":{"__typename":"Paragraph","id":"7a99d8a0c0b9_1","name":"a210","type":"H3","href":null,"layout":null,"metadata":null,"text":"Designing the perfect button","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_2":{"__typename":"Paragraph","id":"7a99d8a0c0b9_2","name":"de6d","type":"H4","href":null,"layout":null,"metadata":null,"text":"Everything you need to know about what makes a button great.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_3":{"__typename":"Paragraph","id":"7a99d8a0c0b9_3","name":"94ed","type":"P","href":null,"layout":null,"metadata":null,"text":"Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it’s crucial to communicate to the user how a button works and where it’ll lead them. Over the years, our design system has fine-tuned the craft of our buttons.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_4":{"__typename":"Paragraph","id":"7a99d8a0c0b9_4","name":"f649","type":"P","href":null,"layout":null,"metadata":null,"text":"Buttons allow users to control the product and achieve their goals. It can help them navigate the interface, modify content or both.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*MWtkZG9WuenCZ3vHypbooA.png":{"__typename":"ImageMetadata","id":"1*MWtkZG9WuenCZ3vHypbooA.png","originalHeight":618,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Three examples. First example shows “home” button which navigates to home page. Second example shows “duplicate button which makes a copy. Third example shows “add new product” button which redirects to a new page and make new product at once."},"Paragraph:7a99d8a0c0b9_5":{"__typename":"Paragraph","id":"7a99d8a0c0b9_5","name":"004f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*MWtkZG9WuenCZ3vHypbooA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_6":{"__typename":"Paragraph","id":"7a99d8a0c0b9_6","name":"ada9","type":"H3","href":null,"layout":null,"metadata":null,"text":"Principles","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_7":{"__typename":"Paragraph","id":"7a99d8a0c0b9_7","name":"696a","type":"P","href":null,"layout":null,"metadata":null,"text":"As Google explains, a good button design follows 3 principles. It must be Identifiable, Findable and Clear. We keep close to these principles at Wix.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":3,"end":18,"href":"https:\u002F\u002Fmaterial.io\u002Fcomponents\u002Fbuttons#usage","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_8":{"__typename":"Paragraph","id":"7a99d8a0c0b9_8","name":"1fad","type":"H4","href":null,"layout":null,"metadata":null,"text":"Making a button clear","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_9":{"__typename":"Paragraph","id":"7a99d8a0c0b9_9","name":"863e","type":"P","href":null,"layout":null,"metadata":null,"text":"A button must clearly communicate what it does, with zero space for interpretation. Text is the primary element that explains intention.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_10":{"__typename":"Paragraph","id":"7a99d8a0c0b9_10","name":"810d","type":"P","href":null,"layout":null,"metadata":null,"text":"Of course, you can include an icon which helps to identify and understand the context. But without any text, it’ll lack full meaning. The text is a promise of what exactly will happen when that button is clicked.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*yLzTY-aq7Yao6alAZKQoWw.png":{"__typename":"ImageMetadata","id":"1*yLzTY-aq7Yao6alAZKQoWw.png","originalHeight":436,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7a99d8a0c0b9_11":{"__typename":"Paragraph","id":"7a99d8a0c0b9_11","name":"f284","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*yLzTY-aq7Yao6alAZKQoWw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_12":{"__typename":"Paragraph","id":"7a99d8a0c0b9_12","name":"c765","type":"P","href":null,"layout":null,"metadata":null,"text":"Sometimes buttons need to include multiple messages, where the text and icon can even have different meanings.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Smt7W_nMAEkYJOtdprp5CQ.png":{"__typename":"ImageMetadata","id":"1*Smt7W_nMAEkYJOtdprp5CQ.png","originalHeight":192,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A button with icon and label."},"Paragraph:7a99d8a0c0b9_13":{"__typename":"Paragraph","id":"7a99d8a0c0b9_13","name":"c65d","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Smt7W_nMAEkYJOtdprp5CQ.png"},"text":"In this example “More Actions ▾”, the text indicates that here you’ll find more actions, while the icon indicates that the menu of more actions will display in a dropdown once you click the arrow.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":17,"end":31,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_14":{"__typename":"Paragraph","id":"7a99d8a0c0b9_14","name":"713f","type":"H4","href":null,"layout":null,"metadata":null,"text":"Case study","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":10,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_15":{"__typename":"Paragraph","id":"7a99d8a0c0b9_15","name":"4774","type":"P","href":null,"layout":null,"metadata":null,"text":"In 2019 the OS Team at Wix decided to change the button hierarchy. When we first launched, our design system had buttons with text only in our primary CTAs. Any secondary CTAs we had on the page were indicated with just a button — no text. After our update, we turned all our icon-only buttons into text or text + icon buttons. This small change led to a huge increase in click rate for “Create New Folder”. The top bar actions next to the primary CTA got more exposure too.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":387,"end":406,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_16":{"__typename":"Paragraph","id":"7a99d8a0c0b9_16","name":"d580","type":"P","href":null,"layout":null,"metadata":null,"text":"This visual comparison shows how the upper layout won the test against the bottom layout:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*fEyRRYw9rqVxLMpreo6Wkw.png":{"__typename":"ImageMetadata","id":"1*fEyRRYw9rqVxLMpreo6Wkw.png","originalHeight":376,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two textual buttons."},"Paragraph:7a99d8a0c0b9_17":{"__typename":"Paragraph","id":"7a99d8a0c0b9_17","name":"b6cc","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fEyRRYw9rqVxLMpreo6Wkw.png"},"text":"“Create New Folder” click rate significantly increased without harming the main goals.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*epB_6g5j5KcueHYosNf9Jg.png":{"__typename":"ImageMetadata","id":"1*epB_6g5j5KcueHYosNf9Jg.png","originalHeight":376,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two buttons. One uses only an icon, second one appears with a text."},"Paragraph:7a99d8a0c0b9_18":{"__typename":"Paragraph","id":"7a99d8a0c0b9_18","name":"6a9e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*epB_6g5j5KcueHYosNf9Jg.png"},"text":"Before the change, when “Create New Folder” button displayed only the icon, few people managed their sites into folders.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_19":{"__typename":"Paragraph","id":"7a99d8a0c0b9_19","name":"141b","type":"H4","href":null,"layout":null,"metadata":null,"text":"Making a button findable","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_20":{"__typename":"Paragraph","id":"7a99d8a0c0b9_20","name":"65d1","type":"P","href":null,"layout":null,"metadata":null,"text":"Actions must be located where users expect to find them. The main action must always be visible and positioned in the top area. Navigation actions can look neutral but also must be visible. Only the least important actions that don’t affect the main path (e.g. “delete”) can be hidden under popovers.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":261,"end":269,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*arCAf-RYGxcC6gZhaZtHFA.png":{"__typename":"ImageMetadata","id":"1*arCAf-RYGxcC6gZhaZtHFA.png","originalHeight":678,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two examples of buttons that open a contextual menu. The first example uses a label making it obvious what the button will do. The second example uses only an icon making it little know what the button will do."},"Paragraph:7a99d8a0c0b9_21":{"__typename":"Paragraph","id":"7a99d8a0c0b9_21","name":"766e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*arCAf-RYGxcC6gZhaZtHFA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_22":{"__typename":"Paragraph","id":"7a99d8a0c0b9_22","name":"05ac","type":"P","href":null,"layout":null,"metadata":null,"text":"Avoid placing tool actions with navigate buttons in the same list. Users might not expect to find buttons that are out of context.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*ACMN5UcjOzsLdOPwwMdKIA.png":{"__typename":"ImageMetadata","id":"1*ACMN5UcjOzsLdOPwwMdKIA.png","originalHeight":564,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A contextual menu with tool actions and navigation action"},"Paragraph:7a99d8a0c0b9_23":{"__typename":"Paragraph","id":"7a99d8a0c0b9_23","name":"0458","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*ACMN5UcjOzsLdOPwwMdKIA.png"},"text":"In this example, the “Category Manager” button is out of context. “More Actions” communicates that the menu will provide actions but doesn’t tell the user that there will be navigation buttons.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_24":{"__typename":"Paragraph","id":"7a99d8a0c0b9_24","name":"03b5","type":"H4","href":null,"layout":null,"metadata":null,"text":"Making a button identifiable","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_25":{"__typename":"Paragraph","id":"7a99d8a0c0b9_25","name":"a3b3","type":"P","href":null,"layout":null,"metadata":null,"text":"Users must easily understand which interface parts are static and which are clickable. Wix uses blue color for all major actions. Lighter blues can be used only as the button’s background color.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Lstfy3hnA8oUq0BqoRNJNQ.png":{"__typename":"ImageMetadata","id":"1*Lstfy3hnA8oUq0BqoRNJNQ.png","originalHeight":1062,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two examples of button placement and coloring. The first example has a distinct button because of its placement and color, the the second example shows the opposite making a button hard to see."},"Paragraph:7a99d8a0c0b9_26":{"__typename":"Paragraph","id":"7a99d8a0c0b9_26","name":"bfd1","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Lstfy3hnA8oUq0BqoRNJNQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_27":{"__typename":"Paragraph","id":"7a99d8a0c0b9_27","name":"b6a9","type":"P","href":null,"layout":null,"metadata":null,"text":"In some cases, like on colored backgrounds, the blue color can’t be used due to the contrast. Then, text, contrast and shape plays the major role in making the button look recognizable and distinct from the rest of the environment. Following Web Content Accessibility Guidelines helps to provide a good text contrast, so the majority of users will be able to read it.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":242,"end":278,"href":"https:\u002F\u002Fwebaim.org\u002Farticles\u002Fcontrast\u002F#ratio","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*7rHRvnz6WIaZ2VPBGc4wog.png":{"__typename":"ImageMetadata","id":"1*7rHRvnz6WIaZ2VPBGc4wog.png","originalHeight":336,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A notification message with a textual button"},"Paragraph:7a99d8a0c0b9_28":{"__typename":"Paragraph","id":"7a99d8a0c0b9_28","name":"f18a","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*7rHRvnz6WIaZ2VPBGc4wog.png"},"text":"Black action works well on colorful backgrounds. Underlined text makes it clear that it’s actionable.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_29":{"__typename":"Paragraph","id":"7a99d8a0c0b9_29","name":"5a9c","type":"H3","href":null,"layout":null,"metadata":null,"text":"Text","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_30":{"__typename":"Paragraph","id":"7a99d8a0c0b9_30","name":"90b4","type":"P","href":null,"layout":null,"metadata":null,"text":"Text is the primary element that explains the button’s intention. It should be clear, predictable and simple. Start with a verb to encourage action. Verbs must tell the user what happens once a button is clicked so they can predict the next step. Use simple language that will be recognized by any age group.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*GQzN5qQk2aPiDR4BQgViRA.png":{"__typename":"ImageMetadata","id":"1*GQzN5qQk2aPiDR4BQgViRA.png","originalHeight":690,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two examples of button’s label writing style. Using verb sentences make the button obvious (e.g. “Upgrade to Premium”), while buttons labeled in nouns don’t encourage users to interact."},"Paragraph:7a99d8a0c0b9_31":{"__typename":"Paragraph","id":"7a99d8a0c0b9_31","name":"eeab","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*GQzN5qQk2aPiDR4BQgViRA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_32":{"__typename":"Paragraph","id":"7a99d8a0c0b9_32","name":"5a83","type":"H4","href":null,"layout":null,"metadata":null,"text":"Case Study","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":10,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_33":{"__typename":"Paragraph","id":"7a99d8a0c0b9_33","name":"79ee","type":"P","href":null,"layout":null,"metadata":null,"text":"Wix’s Photo Studio Team performed an A\u002FB test which showed that users engage more when buttons are displayed with text. The application tested three layouts; icon only, text below the icon and text on the side. Versions with text won the experiment.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*BPr0qS4XqY6g4-UGjfddaQ.png":{"__typename":"ImageMetadata","id":"1*BPr0qS4XqY6g4-UGjfddaQ.png","originalHeight":882,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two versions of vertical list of actions. First version uses icons and labels below. Second version uses only the icons."},"Paragraph:7a99d8a0c0b9_34":{"__typename":"Paragraph","id":"7a99d8a0c0b9_34","name":"cd1b","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*BPr0qS4XqY6g4-UGjfddaQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_35":{"__typename":"Paragraph","id":"7a99d8a0c0b9_35","name":"485f","type":"P","href":null,"layout":null,"metadata":null,"text":"After a failed test, the layout was reverted to the original.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*zvk0oRkGBqZmTs7oZ7XsDA.png":{"__typename":"ImageMetadata","id":"1*zvk0oRkGBqZmTs7oZ7XsDA.png","originalHeight":492,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A vertical list of actions with icons and labels. Labels are placed on the side of the icons."},"Paragraph:7a99d8a0c0b9_36":{"__typename":"Paragraph","id":"7a99d8a0c0b9_36","name":"2f09","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*zvk0oRkGBqZmTs7oZ7XsDA.png"},"text":"This version shows the final solution used by Photo Studio. It solved the initial problem and led to a slight increase of tabs use.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_37":{"__typename":"Paragraph","id":"7a99d8a0c0b9_37","name":"6a12","type":"P","href":null,"layout":null,"metadata":null,"text":"This study showed that text plays a crucial role in making buttons clear and actionable.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_38":{"__typename":"Paragraph","id":"7a99d8a0c0b9_38","name":"accc","type":"H3","href":null,"layout":null,"metadata":null,"text":"Text in context","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_39":{"__typename":"Paragraph","id":"7a99d8a0c0b9_39","name":"604e","type":"P","href":null,"layout":null,"metadata":null,"text":"A button’s text should reflect the context. Make sure the user is aware what action is available. For example, alert modals appear fast and change the layout. Therefore, the potential actions must be very clear.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*vOrnU4nFOKfyK5i7VIZf6Q.png":{"__typename":"ImageMetadata","id":"1*vOrnU4nFOKfyK5i7VIZf6Q.png","originalHeight":552,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A modal, where main call to actions are labeled as “Move to Trash” and “Cancel”"},"Paragraph:7a99d8a0c0b9_40":{"__typename":"Paragraph","id":"7a99d8a0c0b9_40","name":"338f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*vOrnU4nFOKfyK5i7VIZf6Q.png"},"text":"The good example showing how both buttons are clear what they will do. The main button reflects the content’s title — it makes an accurate alert message.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*TaZXkocNDaOF9v0cDgDqLw.png":{"__typename":"ImageMetadata","id":"1*TaZXkocNDaOF9v0cDgDqLw.png","originalHeight":552,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A modal, where main call to actions are labeled as “Yes” and “No”"},"Paragraph:7a99d8a0c0b9_41":{"__typename":"Paragraph","id":"7a99d8a0c0b9_41","name":"0dc4","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*TaZXkocNDaOF9v0cDgDqLw.png"},"text":"The bad example showing how buttons don’t explain what would happen if they’re clicked. A user must remember their previous actions to understand the context.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_42":{"__typename":"Paragraph","id":"7a99d8a0c0b9_42","name":"7894","type":"P","href":null,"layout":null,"metadata":null,"text":"In modals that just state the facts, like “Success” or “Two users can’t edit at once” it’s ok to use less descriptive buttons such as, “Got it, Thanks”.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":42,"end":51,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":55,"end":85,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":135,"end":151,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_43":{"__typename":"Paragraph","id":"7a99d8a0c0b9_43","name":"45bc","type":"H3","href":null,"layout":null,"metadata":null,"text":"Icons","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_44":{"__typename":"Paragraph","id":"7a99d8a0c0b9_44","name":"f859","type":"P","href":null,"layout":null,"metadata":null,"text":"Icons help users understand the context. However, icons can often be misinterpreted. Icons don’t encourages users to take action in the same way text does. For this reason, you should use single icon buttons with caution.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_45":{"__typename":"Paragraph","id":"7a99d8a0c0b9_45","name":"9658","type":"P","href":null,"layout":null,"metadata":null,"text":"Icon buttons work great for professional tools where a user will regularly click buttons and memorize them. Placing icons next to a button with text will increase the chance of being noticed by users.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*4p4RILy7i8DeEUQy1SQOzA.png":{"__typename":"ImageMetadata","id":"1*4p4RILy7i8DeEUQy1SQOzA.png","originalHeight":288,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Four buttons. One of the buttons appears with a text."},"Paragraph:7a99d8a0c0b9_46":{"__typename":"Paragraph","id":"7a99d8a0c0b9_46","name":"6b7e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*4p4RILy7i8DeEUQy1SQOzA.png"},"text":"“Edit” button attracts the user’s attention to this button group. Mouse hovered icon buttons reveal their labels in a tooltip making it obvious what the icon button will do.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_47":{"__typename":"Paragraph","id":"7a99d8a0c0b9_47","name":"4bdd","type":"H4","href":null,"layout":null,"metadata":null,"text":"Case Study","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_48":{"__typename":"Paragraph","id":"7a99d8a0c0b9_48","name":"21a9","type":"P","href":null,"layout":null,"metadata":null,"text":"Side navigation testing showed that Wix users engage more with drill-in buttons that have arrow icons.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*leCJ5mGQQ0XJRy1gEnf7ww.png":{"__typename":"ImageMetadata","id":"1*leCJ5mGQQ0XJRy1gEnf7ww.png","originalHeight":874,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Two side navigation versions. Initial version used to reveal icons on mouse hover. New version showed icons next to buttons always. It significantly increased user engagement."},"Paragraph:7a99d8a0c0b9_49":{"__typename":"Paragraph","id":"7a99d8a0c0b9_49","name":"6501","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*leCJ5mGQQ0XJRy1gEnf7ww.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_50":{"__typename":"Paragraph","id":"7a99d8a0c0b9_50","name":"0c0c","type":"P","href":null,"layout":null,"metadata":null,"text":"This study shows how text and icons can give additional context when used together. This helps users understand what buttons leave the page and what buttons display more options.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_51":{"__typename":"Paragraph","id":"7a99d8a0c0b9_51","name":"ae99","type":"H3","href":null,"layout":null,"metadata":null,"text":"Hierarchy","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_52":{"__typename":"Paragraph","id":"7a99d8a0c0b9_52","name":"1e42","type":"P","href":null,"layout":null,"metadata":null,"text":"Applications tend to have multiple actions. Some actions are always used, others just occasionally. Not every button needs full attention but all buttons must be discoverable. A good hierarchy means every action will be discovered easily when needed. There are multiple techniques on how to create a good hierarchy.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_53":{"__typename":"Paragraph","id":"7a99d8a0c0b9_53","name":"7294","type":"H4","href":null,"layout":null,"metadata":null,"text":"Placement","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_54":{"__typename":"Paragraph","id":"7a99d8a0c0b9_54","name":"65ba","type":"P","href":null,"layout":null,"metadata":null,"text":"The most important actions must be put in the most visible area; at Wix it’s the top of the page in the right hand corner. The lower the button, the less discoverable it’ll be.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_55":{"__typename":"Paragraph","id":"7a99d8a0c0b9_55","name":"60ac","type":"P","href":null,"layout":null,"metadata":null,"text":"In languages written left to right, users start to read from left, that’s why it’s good to display the main call to action last on the right side. Users can take an action once all options are already presented. According to psychologist Herman Ebbinghaus the first and last elements in a sequence are the easiest to memorize. This tendency is called the serial position effect and it’s used in UX design.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":361,"end":377,"href":"https:\u002F\u002Flawsofux.com\u002Fserial-position-effect","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*MamUkMbr-O7lDD15QTLSHw.png":{"__typename":"ImageMetadata","id":"1*MamUkMbr-O7lDD15QTLSHw.png","originalHeight":640,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A standard Wix Business Manager page"},"Paragraph:7a99d8a0c0b9_56":{"__typename":"Paragraph","id":"7a99d8a0c0b9_56","name":"afef","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*MamUkMbr-O7lDD15QTLSHw.png"},"text":"Most important actions “Save” and “Cancel” are positioned in the top right corner so they’re always visible.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_57":{"__typename":"Paragraph","id":"7a99d8a0c0b9_57","name":"1b7b","type":"H3","href":null,"layout":null,"metadata":null,"text":"Emphasis","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_58":{"__typename":"Paragraph","id":"7a99d8a0c0b9_58","name":"300c","type":"P","href":null,"layout":null,"metadata":null,"text":"All buttons must be recognizable actions. Use emphasis to achieve that. Note that not every button must be emphasized at the same level. A single page should have only one main action. Other actions should be secondary or tertiary.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*DeM1NLEHgO2g177GtNb8Ow.png":{"__typename":"ImageMetadata","id":"1*DeM1NLEHgO2g177GtNb8Ow.png","originalHeight":468,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Multiple buttons sorted by their importance"},"Paragraph:7a99d8a0c0b9_59":{"__typename":"Paragraph","id":"7a99d8a0c0b9_59","name":"130e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*DeM1NLEHgO2g177GtNb8Ow.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_60":{"__typename":"Paragraph","id":"7a99d8a0c0b9_60","name":"9c8c","type":"H4","href":null,"layout":null,"metadata":null,"text":"Style","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_61":{"__typename":"Paragraph","id":"7a99d8a0c0b9_61","name":"6131","type":"P","href":null,"layout":null,"metadata":null,"text":"Each button can have a style based on its own intention. A set of styles creates a design language which customers use when working with an application. There can be a different style for general, navigation, social share or upload buttons. Each brand product can have its own set of button styles.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Q5GJvA1RXmChEhq0iE-AUA.png":{"__typename":"ImageMetadata","id":"1*Q5GJvA1RXmChEhq0iE-AUA.png","originalHeight":276,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Multiple buttons in different shape and color"},"Paragraph:7a99d8a0c0b9_62":{"__typename":"Paragraph","id":"7a99d8a0c0b9_62","name":"58a3","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Q5GJvA1RXmChEhq0iE-AUA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_63":{"__typename":"Paragraph","id":"7a99d8a0c0b9_63","name":"51f6","type":"H4","href":null,"layout":null,"metadata":null,"text":"Size","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_64":{"__typename":"Paragraph","id":"7a99d8a0c0b9_64","name":"8e49","type":"P","href":null,"layout":null,"metadata":null,"text":"Buttons can appear in multiple sizes. Large buttons should appear in large and spacious layouts, tiny buttons should be used in small and crowded spaces.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*0C_RXbbtzGz3UW5viXoajQ.png":{"__typename":"ImageMetadata","id":"1*0C_RXbbtzGz3UW5viXoajQ.png","originalHeight":204,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"Four different size buttons"},"Paragraph:7a99d8a0c0b9_65":{"__typename":"Paragraph","id":"7a99d8a0c0b9_65","name":"2e6b","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*0C_RXbbtzGz3UW5viXoajQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_66":{"__typename":"Paragraph","id":"7a99d8a0c0b9_66","name":"57f3","type":"H3","href":null,"layout":null,"metadata":null,"text":"Summary","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_67":{"__typename":"Paragraph","id":"7a99d8a0c0b9_67","name":"00ef","type":"P","href":null,"layout":null,"metadata":null,"text":"A well organized hierarchy between the actions creates harmony on the page so it’s easy for the user to read and understand. For example, Wix Seatings Map Builder shows how button’s different properties make a clear hierarchy between actions — primary, secondary and least important.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":138,"end":162,"href":"https:\u002F\u002Fcommunity.wix.com\u002Fpartners\u002Fforum\u002Fpartner-announcements\u002Fexclusive-feature-access-sell-tickets-with-assigned-seats-in-wix-events","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_68":{"__typename":"Paragraph","id":"7a99d8a0c0b9_68","name":"c051","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Primary: Highest contrast, crucial for the main goal.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":9,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_69":{"__typename":"Paragraph","id":"7a99d8a0c0b9_69","name":"9d9f","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Secondary: Recognizable on the screen without any clicks, assisting the main goal.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":11,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_70":{"__typename":"Paragraph","id":"7a99d8a0c0b9_70","name":"c1ac","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Least Important: Hidden under the Icon Button and are not really connected to the main goal, e.g.: “Edit Ticket”.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":17,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":99,"end":112,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_71":{"__typename":"Paragraph","id":"7a99d8a0c0b9_71","name":"dc96","type":"P","href":null,"layout":null,"metadata":null,"text":"Each action has a clear text label that helps users to understand the button from first glimpse. Icons in the buttons are plain and recognizable by industry standards.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":148,"end":166,"href":"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Ficon-usability\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*fiDOFk-3NpgTPHeVt1S8Fw.png":{"__typename":"ImageMetadata","id":"1*fiDOFk-3NpgTPHeVt1S8Fw.png","originalHeight":808,"originalWidth":1384,"focusPercentX":null,"focusPercentY":null,"alt":"A screenshot of Wix Seatings Map Builder application"},"Paragraph:7a99d8a0c0b9_72":{"__typename":"Paragraph","id":"7a99d8a0c0b9_72","name":"a71b","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fiDOFk-3NpgTPHeVt1S8Fw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_73":{"__typename":"Paragraph","id":"7a99d8a0c0b9_73","name":"0f00","type":"P","href":null,"layout":null,"metadata":null,"text":"This article is a collection of experiences from multiple designers from many teams. A big thanks to everyone who shared their case studies, insights and feedback or simply designed great products that inspired this article.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_74":{"__typename":"Paragraph","id":"7a99d8a0c0b9_74","name":"7298","type":"P","href":null,"layout":null,"metadata":null,"text":"Article was written by Domas Markevičius, edited by Wailana Kalama.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":67,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7a99d8a0c0b9_75":{"__typename":"Paragraph","id":"7a99d8a0c0b9_75","name":"bff6","type":"P","href":null,"layout":null,"metadata":null,"text":"Is there a topic you want to see covered by the Wix UX team? Let us know by filling out this form.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":93,"end":97,"href":"https:\u002F\u002Fforms.wix.com\u002Fc1e93049-0183-4e88-8674-6dabe68007a7:cf301ef2-2cea-4604-8b26-2a274556757b","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":98,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:5c12f12b4121-viewerId:lo_22b2e2c8a712":{"__typename":"CollectionViewerEdge","id":"collectionId:5c12f12b4121-viewerId:lo_22b2e2c8a712","isEditor":false,"isMuting":false},"PostViewerEdge:postId:e77ec1f32ee5-viewerId:lo_22b2e2c8a712":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:e77ec1f32ee5-viewerId:lo_22b2e2c8a712"},"Tag:ux-design":{"__typename":"Tag","id":"ux-design","displayTitle":"UX Design","normalizedTagSlug":"ux-design"},"Tag:ux-writing":{"__typename":"Tag","id":"ux-writing","displayTitle":"Ux Writing","normalizedTagSlug":"ux-writing"},"Tag:ui-design":{"__typename":"Tag","id":"ui-design","displayTitle":"UI Design","normalizedTagSlug":"ui-design"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:case-study":{"__typename":"Tag","id":"case-study","displayTitle":"Case Study","normalizedTagSlug":"case-study"},"Post:e77ec1f32ee5":{"__typename":"Post","id":"e77ec1f32ee5","collection":{"__ref":"Collection:5c12f12b4121"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"99aa","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"fedc","startIndex":73,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"0752","startIndex":75,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:7a99d8a0c0b9_0"},{"__ref":"Paragraph:7a99d8a0c0b9_1"},{"__ref":"Paragraph:7a99d8a0c0b9_2"},{"__ref":"Paragraph:7a99d8a0c0b9_3"},{"__ref":"Paragraph:7a99d8a0c0b9_4"},{"__ref":"Paragraph:7a99d8a0c0b9_5"},{"__ref":"Paragraph:7a99d8a0c0b9_6"},{"__ref":"Paragraph:7a99d8a0c0b9_7"},{"__ref":"Paragraph:7a99d8a0c0b9_8"},{"__ref":"Paragraph:7a99d8a0c0b9_9"},{"__ref":"Paragraph:7a99d8a0c0b9_10"},{"__ref":"Paragraph:7a99d8a0c0b9_11"},{"__ref":"Paragraph:7a99d8a0c0b9_12"},{"__ref":"Paragraph:7a99d8a0c0b9_13"},{"__ref":"Paragraph:7a99d8a0c0b9_14"},{"__ref":"Paragraph:7a99d8a0c0b9_15"},{"__ref":"Paragraph:7a99d8a0c0b9_16"},{"__ref":"Paragraph:7a99d8a0c0b9_17"},{"__ref":"Paragraph:7a99d8a0c0b9_18"},{"__ref":"Paragraph:7a99d8a0c0b9_19"},{"__ref":"Paragraph:7a99d8a0c0b9_20"},{"__ref":"Paragraph:7a99d8a0c0b9_21"},{"__ref":"Paragraph:7a99d8a0c0b9_22"},{"__ref":"Paragraph:7a99d8a0c0b9_23"},{"__ref":"Paragraph:7a99d8a0c0b9_24"},{"__ref":"Paragraph:7a99d8a0c0b9_25"},{"__ref":"Paragraph:7a99d8a0c0b9_26"},{"__ref":"Paragraph:7a99d8a0c0b9_27"},{"__ref":"Paragraph:7a99d8a0c0b9_28"},{"__ref":"Paragraph:7a99d8a0c0b9_29"},{"__ref":"Paragraph:7a99d8a0c0b9_30"},{"__ref":"Paragraph:7a99d8a0c0b9_31"},{"__ref":"Paragraph:7a99d8a0c0b9_32"},{"__ref":"Paragraph:7a99d8a0c0b9_33"},{"__ref":"Paragraph:7a99d8a0c0b9_34"},{"__ref":"Paragraph:7a99d8a0c0b9_35"},{"__ref":"Paragraph:7a99d8a0c0b9_36"},{"__ref":"Paragraph:7a99d8a0c0b9_37"},{"__ref":"Paragraph:7a99d8a0c0b9_38"},{"__ref":"Paragraph:7a99d8a0c0b9_39"},{"__ref":"Paragraph:7a99d8a0c0b9_40"},{"__ref":"Paragraph:7a99d8a0c0b9_41"},{"__ref":"Paragraph:7a99d8a0c0b9_42"},{"__ref":"Paragraph:7a99d8a0c0b9_43"},{"__ref":"Paragraph:7a99d8a0c0b9_44"},{"__ref":"Paragraph:7a99d8a0c0b9_45"},{"__ref":"Paragraph:7a99d8a0c0b9_46"},{"__ref":"Paragraph:7a99d8a0c0b9_47"},{"__ref":"Paragraph:7a99d8a0c0b9_48"},{"__ref":"Paragraph:7a99d8a0c0b9_49"},{"__ref":"Paragraph:7a99d8a0c0b9_50"},{"__ref":"Paragraph:7a99d8a0c0b9_51"},{"__ref":"Paragraph:7a99d8a0c0b9_52"},{"__ref":"Paragraph:7a99d8a0c0b9_53"},{"__ref":"Paragraph:7a99d8a0c0b9_54"},{"__ref":"Paragraph:7a99d8a0c0b9_55"},{"__ref":"Paragraph:7a99d8a0c0b9_56"},{"__ref":"Paragraph:7a99d8a0c0b9_57"},{"__ref":"Paragraph:7a99d8a0c0b9_58"},{"__ref":"Paragraph:7a99d8a0c0b9_59"},{"__ref":"Paragraph:7a99d8a0c0b9_60"},{"__ref":"Paragraph:7a99d8a0c0b9_61"},{"__ref":"Paragraph:7a99d8a0c0b9_62"},{"__ref":"Paragraph:7a99d8a0c0b9_63"},{"__ref":"Paragraph:7a99d8a0c0b9_64"},{"__ref":"Paragraph:7a99d8a0c0b9_65"},{"__ref":"Paragraph:7a99d8a0c0b9_66"},{"__ref":"Paragraph:7a99d8a0c0b9_67"},{"__ref":"Paragraph:7a99d8a0c0b9_68"},{"__ref":"Paragraph:7a99d8a0c0b9_69"},{"__ref":"Paragraph:7a99d8a0c0b9_70"},{"__ref":"Paragraph:7a99d8a0c0b9_71"},{"__ref":"Paragraph:7a99d8a0c0b9_72"},{"__ref":"Paragraph:7a99d8a0c0b9_73"},{"__ref":"Paragraph:7a99d8a0c0b9_74"},{"__ref":"Paragraph:7a99d8a0c0b9_75"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:646be93b568e"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fwix-ux.com\u002Fdesigning-the-perfect-button-e77ec1f32ee5","primaryTopic":{"__ref":"Topic:22d054b693da"},"topics":[{"__typename":"Topic","slug":"visual-design"},{"__typename":"Topic","slug":"design"},{"__typename":"Topic","slug":"ux"}],"isPublished":true,"latestPublishedVersion":"7a99d8a0c0b9","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":14},"clapCount":2163,"allowResponses":true,"isLimitedState":false,"title":"Designing the perfect button","isSeries":false,"sequence":null,"uniqueSlug":"designing-the-perfect-button-e77ec1f32ee5","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1663912712585,"readingTime":6.5971698113207555,"previewContent":{"__typename":"PreviewContent","subtitle":"Everything you need to know about what makes a button great."},"previewImage":{"__ref":"ImageMetadata:1*Jb5JszpcYpCmuwO3Z9Z2kg.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1655126818512,"updatedAt":1663912721579,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:e77ec1f32ee5-viewerId:lo_22b2e2c8a712"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:ux-design"},{"__ref":"Tag:ux-writing"},{"__ref":"Tag:ui-design"},{"__ref":"Tag:design-systems"},{"__ref":"Tag:case-study"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1258,"layerCake":3,"responsesLocked":false}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.aa9242f7.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.e556b4ac.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3104.c3413b66.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.8ad8a900.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.21ff89d3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.094844de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.1387c5dc.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e9897f21cfaa8cd',t:'MTczMjc3ODQwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>