2022-06-09 分類: 用戶體驗
2012年6月,我在CNN.com工作時,接到了為“選舉之夜”進行用戶體驗設計的任務。接下來的5個月我為那1個晚上貢獻了全部精力——但我的成功對選舉的勝利方?jīng)]啥影響。我所關注的是頁面的可讀性,數(shù)據(jù)的可視化,可變形的畫布,以及在iPhone上怎么實現(xiàn)該死的鼠標懸停彈窗效果。在當時,CNN.com首次上線了響應式體驗站點,同時,我也第一次面臨響應式體驗設計。
這是一場豪賭。選舉之夜對于CNN.com來說就像周日超級碗那樣重要。如果完成的出色,這將是我4年來收入高的一個晚上。此外的壓力就是苛刻的完成時間,截止日期毫無商量余地,要么11月6日上線,要么就玩完。
接下來我了解到第一個開發(fā)沖刺任務將在4天后拉開序幕。4天?!我的項目經(jīng)理冷靜地告訴我:“別擔心,開發(fā)人員僅需要一個第一版的原型,在他們做第一版原型時,你可以接著做下一版?!?/p>
啥?我怎么可能在還沒對機器進行粗略設計的前提下就開始設計機器的齒輪?
當我們在固定屏幕大小的情況下進行頁面設計時可以考慮不周全;最終可以通過把獨立設計的頁面縫合在一起來達到目標。我對于響應式設計毫無頭緒,但我知道我們需要清晰且簡單的體系,而不是把頁面(簡單地)串在一起。正如所有的工程師和設計師所知,在一個系統(tǒng)中,可移動的元素越多,就越可能造成災難。
所以,在最初的4天設計中,我并沒有繪制互不關聯(lián)的線框圖,相對的,我畫了一份具有可重用、可互相替換組件的完整體系圖。如下圖所示:
我在會議室里向那些本希望看到單一“已完成”原型的相關人員展示這張圖。我表示,相比我們的2008個設計方案,我已減少了組件和原型模板的數(shù)量,并且新的體系圖非常簡單,僅需一張8.5 × 11的紙就可以展示了!值得慶幸的是,一名核心人員在房間中看到了我所展示的草圖的價值:用更少的素材來構(gòu)建產(chǎn)品。
我在2012年制作的草圖遠達不到好,更多時候都是在嘗試多做快做。我倉促地開工,禁止彈窗和條形圖,始終考慮桌面優(yōu)先,擔心位置偏移而不是優(yōu)先級夠不夠。我采用設計封面頁的經(jīng)驗(這經(jīng)驗應該用在設計的最后階段),包裝出了一款不成熟的主頁。我花了過多精力在固定頂層導航上,而不是首先關注內(nèi)容模塊。
盡管不好,這張草圖的設計理念,以及背后的思路方法,與我產(chǎn)生了共鳴。它不是站點地圖,因為它沒有層級;它也不是故事版,因為它沒有任務流。相對的,這張圖展示了一種系統(tǒng)級思維,它改變了我做用戶體驗設計的思路。
如果我掌握了現(xiàn)在的知識,這就是我將會創(chuàng)造出的,剝離開交互、持久導航、網(wǎng)頁和布局的草圖,它展示了3個對象的體系:州、競選,以及州-競選結(jié)果。
這種方法可行:我們的響應式“選舉之夜”被認為是周日超級碗的CNN高管的希望。但我們真的是九死一生,為了確保設計效果在無數(shù)設備上都展示得當,我們沒日沒夜地工作。我不確定我們是否能采用更復雜的設計來完成這一任務。
今天,我已把這一艱難的考驗轉(zhuǎn)化成一種可被證明的、結(jié)構(gòu)化的、基于對象的流程。在這篇文章中,我將介紹面向?qū)ο蟮挠脩趔w驗設計,分享我進行對象關系映射的過程,并幫助你開始自己動手實現(xiàn)它。
我花了約一年時間重新訓練自己真正以“移動優(yōu)先”的角度思考問題,但現(xiàn)如今,我就算在設計桌面軟件時也會這么思考。對我來說,“移動優(yōu)先”單純意味著“強制優(yōu)先級”,也就是說先開始進行單一的列設計(也就是我們所說的列表),并強迫自己對內(nèi)容和功能進行優(yōu)先級順序排名,最后再考慮布局。
這種做法和”內(nèi)容優(yōu)先”的理念不謀而合?!盀閮?nèi)容”而設計,而不是“為畫布”而設計。在開始排列優(yōu)先級時,你必須知道你要講什么(內(nèi)容)。
有時這意味著你要先有一份完整真實的拷貝——尤其是當你要為長滿藤蔓的網(wǎng)站進行設計,或者擁有教學拷貝,讓我們在設計工作開始前能重組、排序、分析并進行更新。
但如果你要設計的網(wǎng)站99%都是實例化的對象(新聞標題、產(chǎn)品、活動、捐款),沒辦法構(gòu)建一個完整的拷貝。由于無法對真實拷貝進行排列優(yōu)先級,我必須用面向?qū)ο蟮乃悸匪伎紗栴}。
那就是面向?qū)ο蟮捏w驗設計:在程序化行為設計前進行對象化設計,并通過用戶心智模型中真實世界對象(產(chǎn)品、教程、位置)的視角來考慮一個系統(tǒng),而不是考慮數(shù)字世界的行為(搜索、過濾、比較、登出)。我們在開始定義對象后才確定行為,而沒有采用傳統(tǒng)的“行為優(yōu)先”流程,“行為優(yōu)先”流程則直接開始進行業(yè)務流、交互和功能的設計。
快訊!這就是你的后臺工程師正在做的事。在80年代,軟件工程界開始從面向過程的語言向面向?qū)ο蟮恼Z言轉(zhuǎn)變,因為面向?qū)ο蟮恼Z言擁有像重用、數(shù)據(jù)封裝和易于維護的優(yōu)點。許多開發(fā)者是采用像Java、Ruby、Python、C++或C#這種面向?qū)ο蟮恼Z言來實現(xiàn)你的設計的。
開發(fā)者通過映射對象開始他們的工作,并以此決定要處理的問題域,這些問題就是用戶體驗設計師在第一天(的設計后)產(chǎn)生的。當他們看你的線框圖或原型時,首先會對其進行逆向工程,并解析成一個個對象。他們在思考的是:“對象X和對象Y如何通信?對象A是否會由多個對象B構(gòu)成?每個對象都有哪些屬性?這些對象是否繼承自那些對象?”
在網(wǎng)頁端,我們以面向?qū)ο蟮姆椒ㄩ_發(fā),但仍舊以過程化方法設計,關注在下拉菜單層級或者線性任務流。然而我們還有另一種選擇。在設計師和工程師Dave Collins 1995年出版的圖書《設計面向?qū)ο蟮挠脩艚缑妗分校岬皆谇昂蠖司捎妹嫦驅(qū)ο蟮脑O計理念能夠“和軟件開發(fā)過程保持一致。面向?qū)ο螅ǖ姆椒ǎ┙沂玖嗽诜治?、設計和實現(xiàn)之間深層次的結(jié)構(gòu)關系?!?/p>
模仿用戶的心智模型來定義對象能夠提供給你一種可共享的語言,從而為團隊溝通提供支撐。在團隊凝聚力上,面向?qū)ο筮M行設計能幫助你:
接下來,我要說下我最喜歡面向?qū)ο笤O計的理由:它能幫你比以往任何時候都更關注于上下文導航。換句話說,它能引導用戶通過內(nèi)容獲得內(nèi)容。
當用戶瀏覽小屏幕時,需要隱藏持久導航,將其淡出視野。但就算在17寸屏幕上,最漂亮的首欄固定導航仍舊會被忽略。當用戶首次訪問網(wǎng)站時,他們通常會被閃光的大區(qū)域所吸引,而使用導航或搜索框僅是個備選方案。就像Val Jencks總結(jié)的那樣:“我們?yōu)g覽網(wǎng)頁時首先關注的是內(nèi)容,頂部導航則是消防逃生口?!?/p>
假設用戶正在閱讀一份食譜,他接下來想干什么呢?我們應該預測到基于正在看的這份食譜,他想如何進行探索,而不是給他們拿出一份層級菜單或者提供搜索詞。此外,我們也不應該給他們一些“相關菜譜”然后就認為任務完成了。他們可能想要看到這個廚師發(fā)布的所有菜譜,或者他們想看到更多圍繞成分——如使用瑞士甜菜的菜譜。如果我們用面向?qū)ο蟮姆椒ㄋ伎迹覀冃枰獜牧硗獾慕嵌?,嘗試把每個對象關聯(lián)到其他對象上。是不是廚師有他喜歡的食材?在下面面向?qū)ο蟮脑O計中,用戶可以不斷發(fā)現(xiàn)這三個對象的實例(菜譜、廚師、食材)而并不會進入死胡同。內(nèi)容就是導航,而這一切都存在于上下文中。
如果你對這樣的概念感到熟悉,你可能讀過,或參與過內(nèi)容建模。在過去的5年里,很多信息架構(gòu)和內(nèi)容策略都開始關注可重用內(nèi)容類型的系統(tǒng),并將其融入到CMS(內(nèi)容管理系統(tǒng))——內(nèi)容的創(chuàng)造者的設計中,而不僅僅將終端用戶作為主要用戶群。
Sara Wachter-Boettcher在她的書Content Everywhere中,鼓勵我們在設計線框圖和交互稿前,先進行內(nèi)容建模:
內(nèi)容建模給你系統(tǒng)化思維,它能讓你看到你擁有什么類型的內(nèi)容,它們包括哪些元素,以及它們?nèi)绾我砸环N標準化的方式進行運作的。
不幸的是,內(nèi)容建模的藝術仍舊對很多用戶體驗設計師是陌生的,這些設計師一聽到“內(nèi)容”就認為與自己無關。尤其是對那些將軟件設計為服務或產(chǎn)品的設計師而言,融入內(nèi)容的策略有時他們是充耳不聞的。
分享文章:面向?qū)ο蟮挠脩趔w驗設計
文章轉(zhuǎn)載:http://redsoil1982.com.cn/news26/165476.html
網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡營銷seo公司;服務項目有用戶體驗等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容