iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
6
自我挑戰組

學什麼就寫什麼,知道什麼就分享什麼系列 第 28

與工程師的協作之路-可被小小提升使用者體驗的原生設定

身為文創學院,主張「原創設計不一定最好」
院長或校長可能會巴我頭/images/emoticon/emoticon16.gif

不過今天冒著生命危險(最好是),還是要來提一下這件事~

在「與工程師的協作之路-Ant Design」中我這樣提過:

適時使用一些元件庫或套件其實能夠加速我們的效率!
雖然會有不少設計師覺得「我就是要獨一無二」、「沒有原創不是設計」!

時間許可的情況下,盡可能發展出自己產品的特色雖然是好事,但 站在巨人的肩膀上確實比從平地開始看得更遠
專業的設計師在發展原創的同時,也必須考慮到這點以取得平衡。

如果有現成可用的套件,其實你 不用逼迫工程師用兩倍三倍以上的時間為了你的理想加班!!

我依然保持著這個論點~
不過,也不一定要元件庫!

使用者的體驗是來自於過去操作累積的經驗加上是否符合內心期待的結果良好的意外驚喜,來決定當下體驗分數
有一些習慣的使用方式,已經因為時間而定調
就像我曾經從家裡帶了饅頭,上班途中又去買了一份火腿蛋土司.........
習慣很可怕的,根本無意識

尤其在現在這個經常出現RWD的時代
設計網站頁面的時候,多多少少也要考慮到手機上的使用
而手機又有許許多多原生組建構成使用者習慣行為

例如IOS使用者與Android使用者又各自遵照了自己的Design guideline
如果你突然來個神奇的不知所云物
或是要求一些...奇怪的事情,除了體驗可能變差(大迷路或看不懂),例如這篇提到的不符直覺的icon
或是要求工程師「改變手機原生元件的顏色或樣式」,或是想把IPhone上的原生元件改成Material UI...
有些事,不是工程師不罩你,是技術上真的是辦不到的

我現在要求你用靜脈從心臟輸出含氧的血液、只用鼻子排汗...你辦得到?
(辦得到的麻煩聯繫我,明年諾貝爾我們一起拿!!)

到底能不能做更動或是是否需要從頭開發,請適當的跟你的工程師們討論!
別堅持己見為了花一堆時間搞出來也很難用的原創設計,跟工程師鬧出裂痕,雙方都沒好處的~

那麼,除了使用別人家的套件 或是任性逼迫工程師花幾個月時間從頭刻
其實在原生的tag中,我們也有一些可以應用的項目,省時間又能提升一點使用者體驗
今天就來大概介紹一下input這個tag(鋪梗鋪超久)

input

這是一個很神奇的tag,是我目前遇過的tag裡面能夠被設定的項目最多又實用的一個
大家可以先看一下這個網頁,他已經把各種設定都列出來給你玩了~
不過,使用網頁看的話,有些效果是出不來的,以下就來跟大家介紹幾個默默提升使用者體驗卻不一定會告訴你的小秘密(其實也不是什麼秘密...)

.type="text"

最常設定的值,可以輸入任何文字。

但建議如果是大量文字,還是用textarea吧!
(或是就可以拋棄原生了~)

.type="number"

如果你對input下了這個值,在手機中點下時就會出現「純數字」鍵盤
對電腦來說,大部分會有數字區可以用(就是右手邊那區),就算沒有那區,上方的1~0也是很好用的
但手機畫面小,要求去戳1~0其實蠻浪費空間的,一方面對小螢幕的使用者來說不太好戳,二方面如果預設語言是中文時,使用者可能要自己去切成英文或是數字介面才有數字可以按,別以為就換一下也還好~對許多長輩來說「怎麼切換」都是一道難題,他有可能 決定直接關掉這個網頁

這個屬性在電腦上會出現「可以加減數字的功能」,不過這部分,我就比較建議可以設計一下,讓「+」和「-」更直覺、更好控制,原生的在這邊比較不好用。
不過要注意如果你的這個欄位是「加入商品數量」,在設計時建議可以保留input輸入功能,不要「只能+-」,萬一使用者想要十幾種商品都各買10個,他應該會點到爆氣/images/emoticon/emoticon03.gif

.type="tel"

這個屬性就是讓你輸入電話,在手機上會出現英文加數字與+、-符號等(和number的鍵盤不太一樣,可以實際點開比較一下!)

對電腦來說,雖然看起來跟number好像沒什麼不同,但你會發現:

  • 加減符號不見了
  • 居然可以輸入中文

加減符號不見很正常的,畢竟沒有人電話會用++++++++這樣去新增吧...(是要按多久)
至於可輸入中文的部分,我想這樣設計可能是因為有些電話後面會帶有中文
例如:02-2345-6789 分機 1234
(當然也有人會習慣把分機用個「#」代替)

.type="email"

這個屬性在手機上會出現帶有@.com的英文數字鍵盤!
經過測試他可以輸入中文,雖然目前我與身邊朋友們大多還是用英文E-mail
不過聽說是有中文可以用...(額)
也許是因為這樣所以不擋吧~

目前來說開發階段基本上還是用英文比較好
例如說雖然class name你真的要寫中文,瀏覽器也很聰明看得懂
但是哪天編碼不對,就很容易整個掛掉了
保險起見建議還是用英文吧~

.type="url"

這個屬性在手機上會出現帶有/www.的英文數字鍵盤
也可以輸入中文~
不過還是...請盡量用英文吧!比較不容易出現錯誤~

.type="search"

這個屬性在手機上會出現帶有「放大鏡」圖示的鍵盤。

所以大家注意到了嗎?對使用者來說,如果你只是單純的放大鏡圖示,沒有帶有+號或-號,通常並不是「放大」的意思,而是「搜尋」的意思~

這點實在很有趣啊~既然使用者都已經習慣了,在做設計的時候就請盡量遵照這樣的習慣,這會使你的網站更好用一點(比起你花三天設計出一個美麗的新icon但沒人看得懂還要好得多)

.type="password"

這個屬性會幫你隱藏掉你所打的字元
不過大家一定見過旁邊有個眼睛可以開關的
那是工程師另外做的喔~不在原生範圍內!
如果想要那樣的功能,需要溝通一下!(時程、icon代表意義...等,光是意義就可以討論很久,各家眾說紛紜~)

.各種與時間有關的type值

依照上面提供的網頁,有各種與時間相關的值可以玩
手機點下去的話也會出現原生介面,以使用者最常使用的樣貌去設定

不過要特別注意的是type="datetime"這個值,請盡量不要使用!
因為這個值已經被列為隨時可能移除的屬性,部分瀏覽器已經不支援,點下去會發現沒有任何效果,跟設定type="text"沒什麼差異~

.更多功能

除了以上這些呼叫出不同鍵盤的設定
其實還可以選顏色、選範圍、設定限制值...等
大家可以玩一下~


更重要的事

以上介紹這麼多種值給大家供應用~是希望讓設計師與企劃們知道關於使用者平時習慣,其實有一些原生資源可以應用

但必須提醒的是,如果你的input有任何限制條件
請你設定顯示Error時顯示給使用者的訊息欄位
It is of great importance!!!!!!!!!

不要在設定完上述條件,好不容易增加了一點分數後,就功虧一簣
我曾遇過的是只告訴使用者「欄位錯誤」
拜託一下~ 使用者不會知道他錯在哪裡
這樣形同讓使用者去猜你到底要什麼.../images/emoticon/emoticon38.gif
說真話,使用者不是只有你家產品或網站可以用 你不是公家單位,沒資格這樣任性

遇過有PM這樣說:如果我每種情境都要列出來的話,工程師不是要開發很久嗎?我要省下去開發這些時間。

我得說:你省下這些必要的開發時間,市場就會省掉你產品的壽命。

使用者不是非你不用。
況且這些錯誤,本來就是工程師都必須檢查的!不然資料最後為什麼能夠判斷可以或不可以送出?

除非,你根本就沒有把這些錯誤規則明列出來給工程師!那你當然不知道所有錯誤情境到底有多少,因為你根本沒有想過!!而是工程師自己通靈把他能想到的幫你做完了!

那麼,最後如果網站因為未檢查這些資訊導致資料不對,嚴重時導致正確資訊不足而無法繼續進行任務,難道要算工程師的?因為沒有深入的觀落陰?

如果企劃書上什麼都沒寫,有沒擋到的,就不該算在工程師頭上。

當一座房子倒塌,很可能是建材、很可能是結構、很可能是年久失修等各種原因...
但這些大原因,絕對不是全部怪在建築師傅身上,他們只是最後執行者,最多就是品質瑕疵。誰應該當責,應該很清楚?


(都已經倒數第三天了到底在嚴肅什麼啦~ 是在大聲什麼啦 )/images/emoticon/emoticon27.gif
總是很為默默扛下這一切的工程師們抱不平嘛...
鐵人賽即將邁入最後兩天,往後不一定有機會出來發聲挺工程師了呀...(怎麼有種畢業的傷感)/images/emoticon/emoticon16.gif

總之,今天就先到這邊囉!:)
/images/emoticon/emoticon29.gif


上一篇
與工程師的協作之路-工具篇(Sourcetree)
下一篇
與工程師的協作之路-驀然回首,章目就在燈火闌珊處
系列文
學什麼就寫什麼,知道什麼就分享什麼31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言