2022-06-16 分類: 用戶體驗(yàn)
依據(jù)移動(dòng)設(shè)備的ux規(guī)劃有許多難點(diǎn)。其中大的規(guī)劃應(yīng)戰(zhàn)之一是在有限的屏幕空間上處理點(diǎn)擊輸入的疑問(wèn)。關(guān)于ux規(guī)劃師、開發(fā)人員和商品司理來(lái)說(shuō),讓這個(gè)進(jìn)程變得易于用戶運(yùn)用就顯得至關(guān)主要。
創(chuàng)新互聯(lián)論述了進(jìn)步數(shù)據(jù)輸入體會(huì)中的三個(gè)關(guān)鍵因素--速度(進(jìn)步輸入速度)、引導(dǎo)(為用戶輸入供給引導(dǎo)協(xié)助),反應(yīng)(直接有效地指出用戶輸入進(jìn)程中的疑問(wèn))。
依據(jù)不一樣的輸入信息匹配適宜的鍵盤
用戶都偏愛那些依據(jù)輸入內(nèi)容供給了適宜鍵盤的運(yùn)用。咱們能夠依據(jù)輸入框的類型優(yōu)化虛擬鍵盤,這是實(shí)體鍵盤不能做到的。常見輸入內(nèi)容的類型包含:
? 數(shù)字:電話號(hào)碼、信用卡號(hào)碼,PIN碼
? 文字:準(zhǔn)確的姓名、用戶名
? 混合輸入:電子郵件地址、大街地址、查找關(guān)鍵詞
請(qǐng)保證這種匹配鍵盤的規(guī)劃在全部運(yùn)用中是一致的,而不是只是用在了某些當(dāng)?shù)亍?/p>
圖1左:用戶需求點(diǎn)擊123鍵來(lái)切換鍵盤類型以便運(yùn)用數(shù)字鍵盤
圖1右:咱們應(yīng)當(dāng)為需求輸入數(shù)字的文本區(qū)域主動(dòng)匹配適宜的數(shù)字鍵盤
合理運(yùn)用主動(dòng)大寫功用
合理運(yùn)用主動(dòng)大寫關(guān)于進(jìn)步移動(dòng)端表單的可用性來(lái)說(shuō)至關(guān)主要。每個(gè)文本輸入框的首字母和及每句話的首字母應(yīng)當(dāng)主動(dòng)大寫。這格外適用于以下兩類輸入?yún)^(qū)域:
? 給某信息命名,比方用戶的姓和名。
? 包含語(yǔ)句式的信息,比方短信息文本。
不過(guò),當(dāng)咱們輸入電子郵件地址時(shí),應(yīng)當(dāng)禁用主動(dòng)大寫功用,當(dāng)用戶發(fā)現(xiàn)郵箱首字母大寫時(shí),常常會(huì)退回去將大寫字母刪掉,由于他們憂慮這么會(huì)讓郵件發(fā)送發(fā)生疑問(wèn)。
圖2
當(dāng)詞典欠好用時(shí)封閉主動(dòng)糾錯(cuò)功用
主動(dòng)批改這個(gè)功用通常使大多數(shù)用戶絕望,乃至當(dāng)用戶沒(méi)有留意到的時(shí)分,它會(huì)顯著損傷用戶。主動(dòng)糾錯(cuò)功用關(guān)于以下這幾種信息更是收效甚微:例如縮寫、大街稱號(hào)、電子郵件、人名、以及詞典里沒(méi)有呈現(xiàn)過(guò)的詞匯。
舊版本的亞馬遜手機(jī)app在文本輸入框中運(yùn)用了主動(dòng)修正形式,本來(lái)準(zhǔn)確的輸入反而被主動(dòng)糾錯(cuò)的內(nèi)容替代了。
圖3
這種狀況常常會(huì)發(fā)作,由于用戶通常更重視他們正在輸入的內(nèi)容而不是已經(jīng)輸入的內(nèi)容。假如輸入的內(nèi)容是地址類的信息,主動(dòng)修正功用會(huì)悄然篡改本來(lái)準(zhǔn)確的輸入內(nèi)容,用戶很難留意這點(diǎn)。
固定的輸入形式
不要運(yùn)用固定的輸入形式。運(yùn)用固定款式的最常見的理由是腳本校驗(yàn)約束。(后端也許不能判別用戶輸入的格局)??墒谴蠖鄶?shù)狀況下,這是開發(fā)者的疑問(wèn),不應(yīng)當(dāng)讓用戶買單。你應(yīng)當(dāng)想方法將用戶的輸入轉(zhuǎn)化成能夠存儲(chǔ)或顯現(xiàn)的格局,而不是強(qiáng)迫用戶輸入固定的格局。
圖4左:數(shù)據(jù)輸入框的款式符合常規(guī)(把電話號(hào)碼分割成三個(gè)輸入框),其他表單被鍵盤遮擋
圖4右:輸入框支持輸入靈敏的內(nèi)容,而且輸入完結(jié)后主動(dòng)進(jìn)步以便不會(huì)被鍵盤遮擋
規(guī)劃師們通常期望依據(jù)用戶的歷史記錄為他們供給預(yù)設(shè)的默認(rèn)值和提示語(yǔ),然后運(yùn)用戶更快捷地輸入信息。比方,能夠依據(jù)用戶所處的地理位置信息預(yù)設(shè)國(guó)家地區(qū)。
這種規(guī)劃方法假如與主動(dòng)完結(jié)功用合作運(yùn)用,能夠明顯進(jìn)步用戶輸入的效率。得益于主動(dòng)填充供給了實(shí)時(shí)性的輸入主張或是能夠挑選一項(xiàng)內(nèi)容來(lái)完結(jié)輸入的下拉菜單,用戶能夠更精確高效地輸入信息。關(guān)于那些讀寫能力欠安、拼寫艱難、格外時(shí)運(yùn)用非本國(guó)語(yǔ)言的用戶來(lái)說(shuō),這具有很高的價(jià)值。
圖5:供給了查找主張的文本域
當(dāng)用戶在輸入框輸入信息時(shí),他們想知道所輸入信息的類型,供給明晰的標(biāo)簽文本是一個(gè)使UI更具有可用性的好方法。標(biāo)簽奉告用戶文本框的意圖,當(dāng)輸入框取得焦點(diǎn)時(shí)發(fā)揮作用運(yùn)用戶即便輸入完信息后,依然保證對(duì)輸入框的重視度。
你也能夠依據(jù)輸入框的上下文供給有用的信息。相關(guān)的上下文信息能協(xié)助用戶更簡(jiǎn)便地完結(jié)任務(wù)。
標(biāo)簽并不是協(xié)助信息。咱們?cè)谝?guī)劃中應(yīng)當(dāng)運(yùn)用簡(jiǎn)潔的、短的具有描述性的標(biāo)簽(1-2個(gè)),好讓用戶能夠迅速閱讀一切的輸入框的需求。
圖6:輸入框的標(biāo)簽是 ‘電話’、’入住’、‘退房’
假如你需求更多關(guān)于輸入框的信息,提示文本能夠協(xié)助用戶免除迷惑、并防止犯錯(cuò)。
圖7:‘PHONE’文本框下方的信息是協(xié)助文本
規(guī)劃用戶易于了解的語(yǔ)言。表意不明的術(shù)語(yǔ)和語(yǔ)句會(huì)給用戶添加認(rèn)知擔(dān)負(fù), 明晰的交流和功用應(yīng)當(dāng)一直優(yōu)先于專業(yè)的術(shù)語(yǔ)。
圖8左:冷僻的案牘會(huì)迷惑用戶
圖8右:明晰易懂的術(shù)語(yǔ)易于用戶了解
頁(yè)內(nèi)標(biāo)簽(也叫占位符文本)適用于簡(jiǎn)略的輸入框,比方用戶名和暗碼。
圖9
當(dāng)屏幕中存在多于兩個(gè)輸入框時(shí),關(guān)于那些分離隔的文本標(biāo)簽,行內(nèi)標(biāo)簽就不適用了。盡管他們看起來(lái)整齊有序,但存在兩個(gè)嚴(yán)峻的疑問(wèn):
? 當(dāng)用戶點(diǎn)擊了輸入框,行內(nèi)標(biāo)簽就會(huì)不見,所以他們不能再查看所輸入的內(nèi)容是不是準(zhǔn)確
? 當(dāng)用戶在輸入框中看到提示文本,他們有也許認(rèn)為這個(gè)文本框已被預(yù)填成功然后疏忽它。
一個(gè)處理占位符文本的好方法是--起浮標(biāo)簽。 當(dāng)用戶填寫當(dāng)時(shí)某文本框時(shí),行內(nèi)標(biāo)簽即起浮到文本框頂部。
圖10
留意:不要過(guò)于依靠占位文本和標(biāo)簽。由于一旦在輸入框里輸入內(nèi)容,占位文本就無(wú)法被看到了。能夠運(yùn)用起浮標(biāo)簽,這么能夠運(yùn)用戶隨時(shí)承認(rèn)他們填寫的內(nèi)容是不是準(zhǔn)確。
標(biāo)簽的色彩應(yīng)當(dāng)與全部運(yùn)用的色彩匹配,并堅(jiān)持適宜的對(duì)比度(不應(yīng)當(dāng)太亮或太暗)。
圖11
輸入框校驗(yàn)意味著給用戶反應(yīng)并引導(dǎo)他們改正過(guò)錯(cuò),消除用戶的疑惑。這個(gè)校驗(yàn)的成果應(yīng)當(dāng)是人性化的而非像機(jī)器般冷冰。數(shù)據(jù)處理進(jìn)程中最主要也是最簡(jiǎn)略讓人累覺不愛的當(dāng)?shù)厥沁^(guò)錯(cuò)處理。犯錯(cuò)是人類天分,咱們?cè)谔顚戄斎肟驎r(shí)也不可防止。假如規(guī)劃妥當(dāng),校驗(yàn)?zāi)軌蚴贡緛?lái)表意不清的交互做法變得明晰易懂。
當(dāng)用戶在輸入數(shù)據(jù)的進(jìn)程中,他們不喜歡在最終提交時(shí)才發(fā)現(xiàn)自個(gè)犯了過(guò)錯(cuò)。準(zhǔn)確的做法是,咱們應(yīng)當(dāng)在用戶剛剛剛填寫完某條信息后就馬上奉告他是不是準(zhǔn)確。
實(shí)時(shí)的頁(yè)內(nèi)校驗(yàn)?zāi)軌蝰R上奉告用戶他們輸入的信息是不是準(zhǔn)確。用戶能夠更快地修正過(guò)錯(cuò),而不必等到按下提交按鈕后才知道哪里錯(cuò)了。規(guī)劃師能夠給過(guò)錯(cuò)案牘界說(shuō)鮮明的色彩,比方赤色或許橙色這種暖色調(diào)。
圖12左:表單輸入內(nèi)容直到點(diǎn)擊提交后才報(bào)錯(cuò),而且過(guò)錯(cuò)信息在輸入框以外
圖12右:輸入框下方實(shí)時(shí)顯現(xiàn)了過(guò)錯(cuò)信息
校驗(yàn)不只應(yīng)當(dāng)奉告用戶過(guò)錯(cuò),還應(yīng)通知他們?cè)趺醋霾攀菧?zhǔn)確的,用戶才會(huì)更有決心完結(jié)輸入進(jìn)程。
圖13
用戶時(shí)常有這么的迷惑“剛才發(fā)作了啥?為啥會(huì)這么?”。此刻應(yīng)當(dāng)供給一個(gè)直接了當(dāng)?shù)拇鸢?。因而校?yàn)信息應(yīng)當(dāng)明晰地闡明:
? 過(guò)錯(cuò)是啥以及也許發(fā)生過(guò)錯(cuò)的因素
? 用戶下一步應(yīng)當(dāng)做啥來(lái)改正過(guò)錯(cuò)
再次重申,防止運(yùn)用機(jī)械性的術(shù)語(yǔ)。這條規(guī)矩看起來(lái)很簡(jiǎn)略,可是有時(shí)卻很簡(jiǎn)略被疏忽。
當(dāng)規(guī)劃校驗(yàn)信息時(shí),色彩是一個(gè)可利用的好工具。依據(jù)常規(guī),赤色表明過(guò)錯(cuò)信息,黃色表明正告信息,綠色表明成功,這些方法很見效。下圖是一個(gè)校驗(yàn)暗碼輸入框的好事例:
圖14
另一個(gè)運(yùn)用色彩的優(yōu)異事例是對(duì)文本輸入框做出字?jǐn)?shù)約束。赤色的字符計(jì)數(shù)器及赤色下劃線闡明該輸入框字?jǐn)?shù)已超限。
圖15
界面中色彩的運(yùn)用應(yīng)當(dāng)符合用戶認(rèn)知,這是衡量?jī)?yōu)異視覺規(guī)劃的主要規(guī)范之一。
咱們的規(guī)劃設(shè)計(jì)應(yīng)當(dāng)盡也許讓用戶更快地完結(jié)信息錄入。即便像是首字母主動(dòng)大寫或給每個(gè)輸入框供給合理的指示這種簡(jiǎn)略的方法都會(huì)大大進(jìn)步輸入框的可用性。規(guī)劃師應(yīng)當(dāng)多思考用戶輸入時(shí)的實(shí)在運(yùn)用做法然后在規(guī)劃時(shí)保證沒(méi)有忽略某些主要的信息。
標(biāo)題名稱:「用戶體驗(yàn)設(shè)計(jì)」如何設(shè)計(jì)移動(dòng)端的文本輸入框
網(wǎng)頁(yè)地址:http://redsoil1982.com.cn/news/167960.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有用戶體驗(yàn)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容