UX ve HTML5: Kullanıcıların Mobil Formunuzu Doldurmasına Yardımcı Olalım (2. Bölüm)

Bu ikinci bölümde, mobil cihazlara özel yeteneklere daha fazla odaklanmak istiyorum. Örneğin HTML5, kullanıcıların mobil formları doldurmalarına ve verilerini biçimlendirmelerine yardımcı olacak birçok harika özellik getirdi. HTML5 özelliklerinin size bu konuda nasıl yardımcı olabileceğini ayrıntılı olarak göreceğiz . Ardından, "klasik" form öğelerinin ötesine geçeceğiz ve web sitelerinde ve yerel uygulamalarda mobil form deneyiminizi gerçekten bir sonraki düzeye taşımak için kamera, konum belirleme ve parmak izi tarayıcıları gibi mobil yetenekleri nasıl kullanabileceğinizi göreceğiz.

Kullanıcının İçeriği HTML5 ile Biçimlendirmesine Yardımcı Olmak

Bu serinin ilk bölümünde, alanların nasıl görüntüleneceği konusunda bazı genel tavsiyeler gördük. Şimdi biraz daha derine inmenin ve iyi hazırlanmış birkaç HTML5 kodu satırının mobil formlarınızı nasıl iyileştirebileceğine bakmanın zamanı geldi.

HTML5 Mobil İçin Optimize Edilmiş İyilik

HTML5, mobil ve dokunmatik cihazlar için formları optimize etmek için tüm olasılıkları açar. Pek çok ilginç yeni giriş türü, kullanıcılara yardımcı olmak için farklı klavyeleri tetikleyebilir. Medyayı doğrudan tarayıcıda yakalayarak bazı ilginç şeyler de yapabiliriz.

Sayısal Veri Girme

input type= number

HTML5 <input type=number> özelliği, bir giriş alanını sayılarla sınırlar. Sayı olmayan her şeyi reddeden yerleşik bir doğrulama sistemine sahiptir.

Bazı masaüstü tarayıcılarda, bu giriş sağda kullanıcının sayıyı artırmak için tıklayabileceği küçük oklarla sunulur. Mobil cihazlarda, yazım hatalarını ve form doğrulama hatalarını azaltan sayılar içeren bir klavye açar . Girişin görünümü ve hissi işletim sistemine bağlıdır.

Giriş, ondalık sayılara ve negatif sayılara izin vermelidir (ancak birkaç klavye buna saygı duyar). W3C'nin spesifikasyonlarında açıklandığı gibi, “tür=sayı kullanılıp kullanılmayacağını belirlemenin basit bir yolu, girdi kontrolünün bir dönüş kutusu arayüzüne sahip olmasının mantıklı olup olmadığını değerlendirmektir (örn. 'yukarı' ve 'aşağı' oklarla)”. Bu, girişin kredi kartları veya alan kodları için kullanılmaması gerektiği anlamına gelir.

pattern ve inputmode Nitelikleri

Sayı girişlerinize bazı kısıtlamalar eklemek için, değerleri kontrol etmek istediğiniz düzenli bir ifade belirtmek için pattern niteliğini kullanabilirsiniz.

Şuna benziyor:

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

Büyük düğmeli sayısal klavyeyi iPhone'da (iPad'de değil) açmak için bu kalıbı kullanabilirsiniz. Bu klavyede eksi işareti veya virgül yoktur, bu nedenle kullanıcılar negatif sayıları ve ondalık sayıları kullanma yeteneğini kaybeder. Ayrıca, burada başka bir klavyeye geri dönemezler, bu yüzden bunu kullanırken dikkatli olun.

Ayrıca, modellerin diğer girdi türlerine de uygulanabileceğini unutmayın.

Yalnızca bu kalıbı kullanmak çoğu Android telefonda çalışmaz. Bunun çalışması için yine de input type=number ve özniteliğin bir kombinasyonuna ihtiyacınız olacak.

inputmode

Yalnızca mobil sayısal klavyeyi tetiklemek istiyorsanız ancak type=number ve pattern karmaşasıyla uğraşmak istemiyorsanız, bir metin girişi kullanabilir ve inputmode=numeric özniteliğini uygulayabilirsiniz. Şuna benzer:

 <input type="text" name="quantity" inputmode="numeric" />

Ne yazık ki (yazma sırasında), yalnızca Chrome 67 mobile bunu destekliyor, ancak Chrome masaüstü 66'ya bayraksız olarak ulaşıyor olmalıdır.

Bir forma sayıların nasıl girileceği hakkında daha fazla bilgi edinmek için “Sayı Yazmak İstiyorum” bölümünü okuyun.

input type=tel

Kullanıcıların bir telefon numarası girmesini istiyorsanız, type=tel girişini kullanabilirsiniz. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, iOS klavyesinde yukarıda açıklanan model özelliği ile aynı rakamları tetikler. Dünya genelindeki telefon numaralarının karmaşıklığı nedeniyle, bu giriş türüyle otomatik doğrulama yoktur.

Tarih Girme

Teknik olarak sayısal veriler olsa da tarihler ayrı bir bölümü hak ediyor. Tarih girmek için birkaç HTML5 giriş türü vardır. En çok kullanılan input type=date . Desteklenen tarayıcılarda bir tarih seçiciyi tetikleyecektir. Tarih seçicinin görünümü tarayıcıya ve işletim sistemine bağlıdır. Tarayıcıların input type="date" öğesini nasıl oluşturduğu hakkında daha fazla bilgi edinmek için " input type=date karmaşık hale getirme" bölümünü okumanızı öneririm.

Ayrıca bir hafta seçmek için type=week week, bir saat girmek için type=time (saat ve dakikaya kadar) ve bir tarih ve saat seçmek için type=datetime-local (kullanıcının yerel saatini kullanarak) vardır. Çok fazla seçenek!

input type=date , örneğin rezervasyon arayüzleri için iyi çalışır. Yine de kendi tarih seçicinizi oluşturmanızı gerektiren bazı ihtiyaçlarınız olabilir (mantıklı varsayılanlar bölümünde zaten gördüğümüz gibi). Ancak, bir tarih seçiciye ihtiyacınız varsa ve iş için web sitesine tüm JavaScript kitaplığını getirmek istemiyorsanız, input type=date her zaman güzel bir seçenektir.

Yine de, bazen tarihler için type=date kullanmamak daha iyidir. Doğum tarihi örneğini ele alalım. 1960'da doğmuş olsaydım (değilim - bu sadece bir örnek), 2018'den başlasaydım doğum tarihimi seçmem için çok tıklamam gerekirdi. Android'de, yakın zamanda, yıla basarsam şunu keşfettim. seçicide, tüm yıllarla birlikte bir tür açılır tekerlek alıyorum. Biraz daha iyi, ancak yine de makul miktarda kaydırma gerektiriyor.

Bir kullanıcı bana Twitter'da şunları söyledi:

"1977'de doğdum ve rahatsızlığı doğrulayabilirim. Kaydırmak ne kadar uzun sürerse, o kadar yaşlanırsınız :-("

Bu nedenle, belki de doğum tarihleri ​​tarih seçiciler için en iyi aday değildir.

URL, E-posta, Tel ve Arama

Cep telefonları, bir formu doldururken kullanıcının deneyimini geliştiren başka klavye ve giriş optimizasyonu özelliklerini gizler. Şeytan ayrıntıda gizlidir derler.

input type=url alanını kullanmak, / (eğik çizgi tuşu) doğrudan erişilebilir olan, mobil cihazlarda optimize edilmiş bir klavye getirecektir. İşletim sistemine bağlı olarak, aşağıdaki ekran görüntüsündeki .fr gibi commons üst düzey etki alanlarına da hızlı erişim sağlayabilirsiniz. Bu düğmeye uzun süre basarsanız, diğer üst düzey alan adlarının kısayolları görünecektir. Bu ayrıca, URL biçiminin geçerli olup olmadığını kontrol eden otomatik tarayıcı doğrulamasıyla birlikte gelir.

input type=emailfield, @ sembolüne hızlı erişim sağlayan e-posta için optimize edilmiş bir klavye getirir. Bu girdinin geçerli olması için alanda @ bulunması gerekir. Yaptığı tek doğrulama bu.

Giriş tipi=arama alanı, arama için optimize edilmiş bir klavye getirir. Kullanıcı, klavyedeki bir düğmeden aramayı doğrudan başlatabilir. Ayrıca alanı temizlemek ve yeni bir sorgu yazmak için küçük bir çarpı işareti var.

Aralık ve Renk

İncelediğimiz son iki giriş türü özellikle mobil cihazlar için optimize edilmemiştir, ancak bunları kullanarak, mobil kullanıcılar için iyi bir fikir olan ağır özel JavaScript kitaplıkları yüklemek zorunda kalmayabiliriz.

input type=range bir sayı girmek için görsel bir UI kaydırıcısı sağlar. Bu kontrolün kullanıcı arayüzü tarayıcıya bağlıdır.

input type=color, kullanıcının bir renk değeri girmesi için kolay bir yol sağlar. Birçok tarayıcı uygulamasında bu, bir renk seçiciyle birlikte gelir.

HTML Medya Yakalama: Resim Çekme ve Yükleme ve Ses Kaydetme

Apple'ın güvenlik nedenleriyle bir web sitesinde basit bir input type=file kullanılmasına bile izin vermediği iPhone 3 zamanını hatırlıyorum. O zamanlar çok geride kaldı. HTML medya yakalama API'si ile artık bir cihazın farklı sensörlerine erişmek mümkün. Fotoğraf ve video çekebiliyoruz ve hatta sesi doğrudan tarayıcıya kaydedebiliyoruz.

Kabul etme özelliği, girişte ne tür medyanın kabul edileceğini belirlemenizi sağlar: ses, görüntü, video. Kullanıcı, örneğin tarayıcıya kameralarına doğrudan erişim verebilir.

Kod şöyle görünür:

 <input type="file" accept="image/*">

Yakalama özelliği, tercih edilen yakalama modunu belirlemenizi sağlar. accept özniteliğinin üstüne capture özniteliğini eklerseniz, tarayıcının doğrudan kamerayı veya ses kaydediciyi açmasını sağlayabilirsiniz.

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

Medyanın doğrudan tarayıcıda nasıl kullanılacağı hakkında daha fazla ayrıntı için, mobil tarayıcıların gizli güçleri hakkındaki makalemde "Görüntülere, Videoya ve Sese Doğrudan Tarayıcıdan Erişme ve İşleme" bölümünü okuyun.

HTML5 Autos: Otomatik Düzeltme, Otomatik Tamamlama, Otomatik Doldurma, Otomatik Büyük Harf Yap ve Otomatik Odaklama

HTML5, bir dizi otomatik öznitelikle birlikte gelir. Mobil deneyimi geliştirmek için nelerin otomatikleştirilebileceği ve nelerin yapılamayacağı konusunda akıllı olmak isteyeceksiniz. İşte bazı genel kurallar:

• Sözlüğün zayıf olduğu şeylerde otomatik düzeltmeyi devre dışı bırakın : e-posta adresleri, sayılar, adlar, adresler, şehirler, bölgeler, alan kodları, kredi kartı numaraları.
• E-posta alanları ve uygun olan diğer alanlar (örneğin, web sitesi URL'leri) için otomatik büyük harf kullanımını devre dışı bırakın . iOS ve Android'in son sürümlerinde type type=email email'in işi sizin için yaptığını unutmayın, ancak daha eski sürümler için veya type=email desteklenmiyorsa yine de devre dışı bırakın.
• Kullanıcının yazdığı her kelimenin ilk harfini otomatik olarak büyük harfe dönüştürmek için autocapitalize özniteliğini words ayarlayabilirsiniz. Bu, adlar, yerler ve benzerleri için yararlı olabilir, ancak yine de dikkatli olun ve test edin.

• input type=tel için autocomplete="tel" olarak ayarlayın.
• Kullanıcı sayfayı yüklediğinde odağı bir kontrol öğesine vermek için autofocus kullanabilirsiniz. Ancak kullanıcının “iletişim” sayfasını açması, formunuzun ilk alanına atlamaya hazır oldukları anlamına gelmez. Yani, yine, akıllıca kullanın.

Daha fazla otomatik tamamlama seçeneği istiyorsanız, WhatWG Wiki'de tam bir liste var. Sadece doğru olanları kullandığınızdan emin olun. Uygulayın, test edin ve tekrar test edin.

HTML5 Form Doğrulaması

Burada teknik ayrıntılara girmeyeceğim, ancak HTML5'in birçok alan için yerleşik bir form doğrulama API'sine sahip olduğunu bilmelisiniz. Satır içi doğrulama mesajlarını görüntülemek için bir JavaScript kitaplığı kullanmak istemiyorsanız bu güzel. Bir UX tasarımcısı olarak HTML5 form doğrulama hakkında bilmeniz gereken başlıca şeyler şunlardır:

• Doğrulama mesajı bir tarayıcı kontrolüdür. CSS'de biçimlendiremezsiniz ve her tarayıcı için farklıdır.
• JavaScript'te mesajın metnini setCustomValidity kullanarak değiştirebilirsiniz.
• CSS3, HTML form doğrulaması için :invalid, :valid ve :required ve diğer sözde sınıfları sağlar. Bunlar bulanıklıkta tetiklenir, bu yüzden şimdilik oldukça işe yaramazlar.

Peter-Paul Koch, "Yerel Form Doğrulaması, Bölüm 1"de, HTML ve CSS form doğrulamasının neden şu anda formları gerçekten daha iyi hale getirmediğinin ayrıntılarına giriyor.

Kullanıcı Verilerini Kaydetmek İçin Çevrimdışı Destek

Özellikle mobil cihazlarda birçok şey ters gidebilir. Hatalar olur. Bir kullanıcı, tarayıcıdaki geri düğmesine yanlışlıkla basabilir ve tüm verilerini kaybedebilir.

Kullanıcı sayfaya geri dönerse verilerini tekrar görüntülemesi iyi olur . Aynı şey, tarayıcı çöktüğünde veya kullanıcı sekmeyi kapattığında da geçerlidir. Bir şeyler ters giderse hiçbir şeyin kaybolmamasını sağlamak için kullanıcının verilerini yerel veya oturum deposunda saklayabilirsiniz . Geoffrey Crofte size bu konuda yardımcı olmak için bir JavaScript kitaplığı yazmıştır.

Kullanıcı formu gönderirken bağlantı kesilirse verileri de kaybedebilir. Bunu önlemek için** HTML5 çevrimdışı API** ve Service Workers API'nin bir kombinasyonunu kullanarak şunları yapabilirsiniz:

• verileri önbellekte saklamak,
• bağlantı geri geldiğinde otomatik olarak tekrar göndermeyi deneyin.

Bunun nasıl kodlanacağını öğrenmek için “Çevrimdışı Dostu Formlar” makalesine bakın.

Mobil Cihaz Yetenekleri, Deneyimi Bir Sonraki Seviyeye Taşıyabilir

1. bölümde, mobil formları geliştirmek için temel ortak HTML form öğelerine ve özelliklerine bağlı kaldık. Ancak mobil cihazların yetenekleri artık HTML, CSS ve JavaScript web sayfalarını görüntülemenin çok ötesine geçiyor. Bu küçük cihazlar birçok sensörle donatılmış olarak gelir. Ve kullanıcılarımızın hayatlarını çok daha kolay hale getirmek için bunların birçoğunu yerel uygulamalarda ve web'de kullanabileceğiz.

Kullanıcının Konumunu Tespit Etme

Bir önceki bölümde yerler ve adresler için ön doldurma bilgilerini yazmıştım. Bu iyi bir başlangıç. Bir adım daha ileri gidebiliriz. Kullanıcılardan bir konum yazmalarını istemek yerine onu tespit edebiliriz . Web için coğrafi konum API'si ile tanışın. Ayrıca yerel iOS, Android ve Windows Phone coğrafi konum API'leri de vardır.

Citymapper, kullanıcıların seyahatlerini planlamalarına yardımcı olan bir web sitesi ve uygulamadır. Kullanıcı ilk alana girdiğinde “Geçerli konumu kullan” seçeneğini görür. Seçerlerse, tarayıcının coğrafi konum verilerine erişmesine izin vermeleri istenir. Bu, coğrafi konum API'sidir. Tarayıcı daha sonra bulduğu konumu otomatik olarak tamamlar ve kullanıcı hedef alana ilerleyebilir. Yerel uygulama hemen hemen aynı şekilde çalışır.

Kullanıcıdan İzin İsterken Akıllı Olun

Bir önceki videoda, konumuma Citymapper web sitesine erişim vermeyi kabul etmem gerektiğini fark etmiş olabilirsiniz. Tarayıcıda, kullanıcı izinleri web sitesine göre, API'ye göre API'ye göre işler.

Ayrıca nasıl izin istediğine de dikkat etmelisin . Çok erken sorarsanız, kullanıcı coğrafi konum, bildirim veya diğer API'ye erişimi reddedebilir. Ayrıca neden izne ihtiyacınız olduğunu anlamazlarsa reddedebilirler. Bir şansın var; akıllıca kullanın . Bundan sonra, iyileşmek neredeyse imkansız olacak. Ben bir Android uzmanıyım ve bir web sitesine verdiğim izinleri sıfırlamak istediğimde tarayıcımdaki seçenekleri aramam bile gerekiyor. Kullanıcılarınızın yaşayacağı sorunu hayal edin.

Web'de izin istemekle ilgili bazı genel tavsiyeler şunlardır:

• Ürpertici konum belirleme veya bildirim takipçisi olmayın: Kullanıcı web sitenize gelir gelmez izin istemeyin . Henüz sizi veya hizmetinizi bilmiyor olabilirler.
• Kullanıcının web sitenizi ve hizmetinizi keşfetmesine izin verin. Ardından, bağlamda izin isteyin . Konumlarına erişmek istiyorsanız, onlara yalnızca ihtiyacınız olduğunda sorun (Citymapper buna iyi bir örnektir).
• Neden izne ihtiyacınız olduğunu ve bununla ne yapacağınızı açıklayın.

Daha ileri gitmek istiyorsanız, Luke Wroblewski (evet, yine kendisi) izin isteme sürecinde size yardımcı olmak için güzel bir video hazırladı.

Daha İyi Bir Ödeme Deneyimi

Formlar için büyük bir iyileştirme alanı, tüm ödeme ödeme deneyimidir. Burada yine cihazdaki sensörler bunu neredeyse ağrısız bir deneyim haline getirebilir. Tek acı, kullanıcının harcadığı para miktarı olacaktır.

iOS Kredi Kartı Tarayıcı

Bir önceki bölümde, kullanıcının önceki girişine göre kredi kartlarının otomatik algılanması ve otomatik tamamlama özellikleri hakkında yazmıştım. Bu yine de kullanıcının kredi kartı verilerini en az bir kez girmesi gerektiği anlamına gelir.

Apple, kredi kartı tarayıcısıyla bunu bir üst seviyeye taşıdı. Safari'de iOS 8'den bu yana kullanıcılar, kredi kartı bilgilerini taramak ve otomatik olarak tamamlamak için kameralarını kullanabilir . Bu sihri gerçekleştirmek için, otomatik tamamlama cc-number özelliğini ve bunu kredi kartı alanı olarak tanımlamak için bir ad eklemeniz gerekir. Apple'ın bu konuda fazla resmi bilgisi yok, ancak bazı insanlar bazı testler yaptı ve sonuçları StackOverflow'a koydu.

Safari ayrıca, kullanıcıların kredi kartlarını eklemek için kullanabilecekleri, birden fazla web sitesinde yeniden kullanmalarına olanak tanıyan otomatik doldurma seçeneklerine sahiptir.

Google Pay API ile Checkout'u Bir Adım Daha İleriye Taşıyın

Google benzer bir şey başlattı: Google Pay API. API, bir web sitesinde uygulandığında, ödeme bilgilerini manuel olarak girme ihtiyacını ortadan kaldırır . Bir adım daha ileri gider: Fatura ve sevkiyat adreslerini de saklayabilir.

Kullanıcı, Chrome'da sakladığı çeşitli ödeme bilgilerini görüntüleyen bir iletişim kutusu alır. Hangisini kullanacaklarını seçebilirler ve doğrudan iletişim kutusundan ödeme yapabilirler.

Ödeme İsteği API'sinin standartlaştırılmış bir sürümü şu anda bir W3C aday önerisidir. Bu, tarayıcılarda uygulanırsa, kullanıcıların API'yi talep eden tek bir düğmeyle ödeme yapmasına olanak tanır. Bundan sonraki her adım, yerel tarayıcı iletişim kutuları tarafından işlenecektir.

Kimlik Doğrulamayı Kolaylaştırma

Cep telefonları, çoğu durumda, insanların genellikle başkalarıyla paylaşmadığı kişisel cihazlardır. Bu, kimlik doğrulama için bazı ilginç fırsatlar açar.

Sihirli Bağlantı

Şifre yöneticisi kullanıyorum. Şifrelerimin %99'unu bilmiyorum. Hepsi rastgele oluşturulur. Yeni bir Slack çalışma alanında oturum açmak için şunları yapmalıyım:

1. şifre yöneticimi aç,
2. ana şifremi gir,
3. çalışma alanını arayın,
4. şifreyi kopyalayıp Slack uygulamasına yapıştırın.

Bu sıkıcı bir süreç, ancak Slack daha iyi bir seçenek sunacak kadar akıllıydı.

Birçok kullanıcı, telefonlarında postaları senkronize etti. Slack bunu anlamıştı. Uygulamaya yeni bir Slack çalışma alanı eklediğinizde, şifreyi kullanarak giriş yapabilir veya “sihirli bağlantı” seçeneğini isteyebilirsiniz. İkincisini seçerseniz, Slack posta kutunuza sihirli bir bağlantı gönderir . Postayı açın, büyük yeşil düğmeye tıklayın ve — ta-da! — giriş yaptınız.

Perde arkasında, bu sihirli bağlantı bir kimlik doğrulama belirteci içerir. Slack uygulaması bunu yakalar ve parola gerektirmeden kimliğinizi doğrular.

Akıllı Tanımlama için Parmak İzi

Neredeyse tüm bankacılık işlemlerimi mobil cihazımdan yapıyorum. Banka hesaplarıma giriş yapmaya gelince, Fransız Societe General banka uygulamam ile Alman N26 uygulamam arasında dünyalar kadar fark var.

Societe Generale ile bir oturum açma dizgem ve bir parolam var. Uygulamadan rastgele 10 basamaktan oluşan giriş dizesini hatırlamasını isteyebilirim. Onu hatırlayamıyorum; Bunun için bir şifre yöneticisi kullanıyorum. Altı basamaklı parolayı yine de özel olarak oluşturulmuş bir tuş takımında hatırlamalı ve girmeliyim. Tabii ki, her oturum açtığımda sayıların konumu değişiyor. Güvenlik — evet, biliyorum. Ayrıca, bu parolayı her üç ayda bir değiştirmem gerekiyor. Parolayı en son değiştirmek zorunda kaldığımda, çoğu insanın yaptığı şeyi yaptım: neredeyse aynı parolayı seç, çünkü altı basamaklı bir sayıyı daha hatırlamak zorunda kalmak istemiyorum. Ve elbette, hatırlayacağımdan çok emindim, bu yüzden şifre yöneticime girmedim. Acemi hatası. İki hafta sonra giriş yapmaya çalıştım. Tabii ki unuttum. Üç başarısız girişimde bulundum ve ardından hesabım bloke edildi. Neyse ki bu hesabı sadece tasarruf için kullanıyorum. Uygulamada yeni bir şifre isteyebilirsiniz. Bankanın bana Lüksemburg'daki ev adresime kağıt postayla altı haneli yeni bir parola göndermesi neredeyse bir hafta sürdü. Evet.

N26 ise oturum açma dizesi olarak e-posta adresimi kullanıyor. Bunu bir şifre yöneticisi olmadan hatırlayabiliyorum. Giriş yapmak istediğimde parmağımı Xperia telefonumun başlat düğmesine koyuyorum, o kadar. Arka planda, telefonum parmak izimi tarar ve kimliğimi doğrular. Bu işe yaramazsa, bir şifreye geri dönebilirim.

Aynı cihaz, iki uygulama, tamamen farklı iki deneyim.

Hem Android hem de iOS'ta giderek daha fazla uygulama, artık kullanıcıya parmak izi ile kimlik doğrulama imkanı sunuyor. Artık şifre yok - bu ilginç ve zarif bir çözüm.

Tabii ki, insanlar bu konuda bazı güvenlik endişelerini dile getirdiler. Ulusal Standartlar ve Teknoloji Enstitüsü (NIST) için biyometri yeterince güvenli kabul edilmiyor. Biyometriyi ikinci bir kimlik doğrulama faktörü ile birleştirmeyi önerir.

Parmak izi sensörleri de kandırılabilir - evet, casus filmlerinde olduğu gibi. Bir kadın, kocasının ihanetini o uyurken baş parmağını kullanarak telefonunun kilidini açtıktan sonra öğrendiği için inmek zorunda kalan uçağı duydunuz mu?

Yüz Tanıma ve Yüz Kimliği

2018'de Apple, iPhone X'i yepyeni yüz kimliğiyle piyasaya sürdü. Kullanıcılar yüzlerini kullanarak iPhone X'lerinin kilidini açabilirler . Tabii ki, diğer bazı Android telefonlar ve Windows tabletler ve bilgisayarlar bu özelliği daha önce önermişti. Ancak Apple bir şey piyasaya sürdüğünde, “bir şey” olma eğilimindedir. Şu an için bu teknoloji çoğunlukla telefonların ve bilgisayarın kilidini açmak için kimlik doğrulama olarak kullanılıyor.

Yüz tanıma teknolojisiyle ilgili oldukça büyük zorluklar var. İlk olarak, bazı algoritmalar, kolayca hacklenebilen bir kişinin resmi tarafından kandırılabilir. Diğer bir büyük endişe ise çeşitliliktir. Yüz tanıma algoritmaları, renkli insanları tanımakta zorluk çekme eğilimindedir. Örneğin, siyahi bir araştırmacı kendi projesini test etmek için beyaz bir maske takmak zorunda kaldı. Araştırmacı Joy Buolamwini ve konu hakkında bir TED konuşması yaptı.

Bazı yüz tanıma yazılımları, bazı gümrük servisleri tarafından sınır işlemlerini hızlandırmak için de kullanılır. Yeni Zelanda'da kullanılıyor ve Kanada'da kullanılacak.

Çoğumuz, yüz tanımayı geniş ölçekte kullanan sistemlerin olası sorunlarını ve sonuçlarını görmeye yetecek kadar bilim kurgu gördük. Telefonların kilidini açmak için özel alan dışında kullanılan bu tür bir teknoloji tartışmalı ve korkutucu olabilir.

Google: Tek Dokunuşla Kaydolma

Bir kullanıcının bir Google hesabı varsa, Google'ın tek dokunuşla kaydolmasından yararlanabilir. Bir web sitesini ziyaret ederken ve bir satır içi iletişim kutusunda bir hesap oluşturması istendiğinde, kullanıcının şifre girmesine gerek yoktur. Google, kullanıcının Google hesabına bağlı, güvenli, jeton tabanlı, şifresiz bir hesap sağlar. Kullanıcı döndüğünde otomatik olarak oturum açar. Parolalarını Smart Lock'ta saklarlarsa diğer cihazlarda da otomatik olarak oturum açarlar.

Not : Bu ilginç bir şifresiz çözümdür. Tabii ki, onu kullanarak kullanıcılar, herkesin rahat hissetmeyeceği Google'a bağlanır .

Çözüm

Kullanıcıların formları doldurmalarına yardımcı olmak için mobil özellikleri kullanmaya başladığınızda gerçekten harika şeyler yapabilirsiniz. Formlar oluştururken mobil öncelikli bir zihniyete ihtiyacımız var; aksi takdirde aşina olduğumuz masaüstü yeteneklerine takılıp kalırız.

Yine, cihazın yeteneklerine dikkat edin: Bir sensörün arızalanması veya kullanıcının erişimi reddetmesi durumunda her zaman bir geri dönüş çözümüne sahip olun. Bu işlevleri bu işlevler için tek seçenek haline getirmekten kaçının (coğrafi konuma dayalı bir harita uygulaması oluşturmadığınız sürece).

Bu, size bazı genel UX ve kullanılabilirlik tavsiyeleri ve en iyi uygulamaları verdiğim gerçekten uzun iki makale dizisinin sonu. Sonunda, formunuz ve kullanıcılarınız önemli . Burada açıklanan bazı şeyler özellikle kullanıcılarınız için çalışmayabilir - kim bilir? O yüzden ne yaparsan yap, benim (veya Luke'un) sözüne itibar etme. Gerçek kullanıcılarla gerçek cihazlarda test edin. Onu ölçmek. Ve tekrar test edin. Biraz kullanıcı araştırması ve kullanılabilirlik testi yapın . Kullanıcı deneyimi, yalnızca kopyalayıp yapıştırdığınız en iyi uygulamalar ve sihirli tariflerden ibaret değildir. Tarifi sizin için çalışması için uyarlamanız gerekir.

Yani kısaca: Test edin. Gerçek cihazlarda test edin. Gerçek kullanıcılarla test edin.