Arayüz tasarımında hayalet butonlar

Arayüz tasarımında hayalet butonlar

Arayüz tasarımında, hayalet butonların birçok avantajı var, ama etkin bir şekilde uygulanması, görsel tasarım öğeleriyle uyumlu olmasını gerektiriyor.

Estetik, minimal veya mükemmel tasarım çizgilerine sahip, hayalet adı verilen, sadece çizgileri olan ve gerçekten kullanımı zor butonlardır. Görsel, solid renge sahip arka plan veya geçişli renklerin üzerinde olan, kullanıcının “Gel bana, dokun!” vurgusuna sahip estetik bir butondan bahsediyorum. İsmi itibariyle komik görünüyor olabilir. Yalnız, açık konuşmak gerekirse hayalet buton, profesyonel tasarımcıların vazgeçilmezidir.

Hayaletlere inanıyor musunuz? Hayalet avcısı oldum! Araştırmalarım arasında hayalet konusu size bir çok deneyim kazandıracak. Hayalet buton kullanımı güzel olan ve tasarım stiline uygun olmayan web site örneklerine şöyle bir göz atalım.

Haruki Murakami

Ünlü yazar Haruki Murakami, yırtıcı bir hayvan gözünün yakın çekim yapılmış görseli, sade renk seçimi ile beyaz metin üzerinde web sitesi ile ilginç bir gizemi açığa çıkarıyor. Navigasyonda kullandığı hayalet buton seçenekleri ile uğursuz bir atmosferi gizlice canlandırıyor.

0001

Yazarın, kitap kapaklarında kullandığı görseller de gerçekten çok etkileyici… Gizemli ve estetik.

Born Group

Born group, Global Dijital Ajansı’nın web sitesinde sizi, sinirli ama bir o kadar da etkileyici vahşi bir goril karşılıyor. Bu görüntünün hemen üzerinde büyük fontlarla yazılmış bir metin ve hemen altında sessizce duran, hayalet buton yer alıyor. Arka plan ne kadar korkutucu görünse de tek bir çizgiyle kullanıcıyı etkileyecek ufacık bir renk atabilirsiniz.

0002

BigDrop

BigDrop, NYC görseli üzerinde kullanıcının, hızlıca portfolyoya ulaşabileceği CTA’na sahip ve buton ile etkileşime geçtiğinde kurumsalı olan sarı rengi kullanıyor. Gayet dikkat çekici ve yönlendirici… Tabii, hayalet çizgileri kullanmaya devam ederek, kullacıyı yönlendiren bir .gif scroll ikon dikkatimizi çekiyor. Görsel üzerindeki pattern, overlay hissiyatı ile üzerindeki metin ve hayalet butonunun daha ön plana çıkmasını sağlıyor.

0003

Bundlin

Bundlin, site genelinde hayalet butonları sessizce her yerde kullanıyor. Twitter tabanlı içerik yönetimi hizmeti veren bu web sitesi, büyük boyutlu içerik kullanımının hemen altında hayalet butonları da kullanmaktan vazgeçmiyor.

0004

Pastel solid renkler, büyük boyutlu genel tipografi ve kullanıcının dikkatini çeken hayalet butonların ikon animasyonları, tasarımın estetik ve eğlenceli bir parçası olarak görünüyor.

Parallax

Parallax, parlak renkli ve ustalıkla hayata geçirilmiş, bir dijital içerik ajansı web istesi. Sitede, hayalet buton kullanımı, tasarım stiline uygun, görsel üzerine nazikçe bırakılmış hissi veren ve zarafet duygusu barındıracak şekilde kurgulanmış.

Görselin üzerindeki yeşil overlay efekti farklı bir hava katıyor, ama sadece intro diyebilirim.

0005

Powerhouse Company

Powerhouse Company, hayalet butonu gerçek anlamıyla uygulamış dersem daha doğru olacak. Yorumlarımı kullanıcı deneyimini güzelleştirmek adına sizlerle paylaşmama izin verin.

Anlatmadan göremeyeceğiniz, kullanıcının bile dikkat edemeyeceği kadar kötü bir interaksyiona sahip, CTA ve tasarım stiline uygun olmayan hayalet buton tasarımı kullanıyor. Web sitesinin hemen altında konumlandırılmış bir hayalet buton göreceksiniz.

0006

Navigasyon olarak kullanılan, “MENU” metnine sahip intro ekranının hemen altında gerçekten görünmeyen bir hayalet buton var.

Görsel kullanımı ve üzerinde kullandığı font Montserrat muhteşem bir seçim olmuş! Logo ile birlikte büyük boyutta kullanılan metin, benim daha çok dikkatimi çekiyor.

“Kullanıcı, hayalet avsıcı olmamalı.”

Integra

Integra, tasarım stilini biraz daha sert ve görsel hafızada kalıcı olacak şekilde uyguluyor. Arkaplandaki kadraj farklılığı, video rengi üzerinde kullanılan fosforlu yeşil ve beyaz renge sahip büyük puntolu metinler… Hayalet buton stilinin yazı tipi kalınlığına uygunluğu… En önemlisi kullanıcıya göstermek istediği ve dikkat çekmek istediği bir çok öğeyi, animasyon ile tek tek sunuyor.

0007

Güzel bir yaklaşım ve etkileyici…

Five Minutes

Kesinlikle, bu interaktif video’ya sahip oyunu barındıran web sitesini deneyimlemelisiniz.

0008

Five Minutes, beş dakika hayatta kalmaya çalıştığınız, yoğun ve sürükleyici bir online zombi oyunudur. Hassasiyet, sürükle ve bırak aksyionlarına sahip, bir kaç saniye, oyun karakterinin nefes kontrolü için yeterli zamanı sunuyor. Tasarımcı, hayalet butonu web sitenin genelinde tasarım stiline uygun bir şekilde kullanıyor. Kullanıcı oyunu oynarken, hayalet butonların büyüklüğü ve aksiyon alabileceği detaylar göz önünde bulunuyor.

“Arka planı, video veya görsellerin üzerinde görünmesini ve kullanıcının aksiyon alabilmesini sağlayan hayalet butonlardır.”

Daha fazla hayalet buton örneği için;

Hayalet buton trendleri

Hayalet butonun yükselişi

100$ indirim fırsatı! Springboard UX Design kurs programı 100$ indirimli! İndirim kodunu almak için giriş yap ya da kayit ol.

Makalenin derlenmesinde uxmag.com’dan yararlanılmıştır.

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

KEŞFETMEYE DEVAM ET
“Benim bugün burada olmamı bir ketçap sağladı.”

“Benim bugün burada olmamı bir ketçap sağladı.”

Gizle
SENİN İÇİN ÖNERİYORUZ
Kullanıcı psikolojisini tasarlamak

Kullanıcı psikolojisini tasarlamak

Gizle