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. Peki hayalet buton nedir ve doğru ve etkileyici arayüz tasarımında nasıl kullanılır sorularının cevaplandığı bir yazıyla karşınızdayız.
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.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
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.
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.
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.
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.
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.
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.
Güzel bir yaklaşım ve etkileyici…
Five Minutes
Kesinlikle, bu interaktif video’ya sahip oyunu barındıran web sitesini deneyimlemelisiniz.
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.”
