作者:是如 | 發(fā)布: (網(wǎng)友)是如 | 時(shí)間:2010-03-12 13:42:41文字大小:- +
在smashingmagazine上看到這篇文章,講的是Web應(yīng)用程序設(shè)計(jì)流程和準(zhǔn)則等方面,也許對(duì)大家有所幫助。翻譯比較倉促,錯(cuò)誤地方請多指教,查看原文點(diǎn)這里。 商務(wù)Web應(yīng)用程序的界面設(shè)計(jì) 商務(wù)Web應(yīng)用程序的設(shè)計(jì)常常被人們所忽視。我看到許多程序,它們既不符合商業(yè)目標(biāo),也不滿足用戶需求,它們有很差的用戶體驗(yàn),并造成了商業(yè)利潤的損失。更夸張的是,有些設(shè)計(jì)師根本沒有參與整個(gè)程序的開發(fā)流程,而是把全部職責(zé)都推給了開發(fā)人員。 對(duì)于擅長前端和后臺(tái)技術(shù)的工程師來說,他們?nèi)狈υO(shè)計(jì)能力,很難完成這項(xiàng)艱巨的任務(wù)。不滿意的消費(fèi)者、沮喪的用戶,以及失敗的項(xiàng)目,也就自然而然地出現(xiàn)了。 接下來,我們將介紹“商務(wù)Web應(yīng)用程序”界面設(shè)計(jì)的基礎(chǔ)知識(shí)。一般來說,人們可以提供許多有關(guān)界面設(shè)計(jì)的方法、技巧和準(zhǔn)則,而這里,我們的重點(diǎn)將放在商務(wù)Web應(yīng)用程序上來。 一. 網(wǎng)站與Web應(yīng)用程序 一個(gè)網(wǎng)站更像是一組網(wǎng)頁集合,大部分都是靜態(tài)文本、圖像和視頻等等,只有有限的交互功能(聯(lián)系表單和搜索功能除外)。網(wǎng)站的主要作用是提供信息。雖然一些網(wǎng)站使用“內(nèi)容管理系統(tǒng)”來提供動(dòng)態(tài)文本,但從性質(zhì)上來說依舊是信息。
CampaignMonitor是強(qiáng)大的電子郵件營銷軟件,而Jeff Sarimento 的網(wǎng)站向讀者講述他的工作和生活。 另一方面講,Web應(yīng)用程序是動(dòng)態(tài)交互系統(tǒng),它幫助企業(yè)完成重要商業(yè)事務(wù),評(píng)估并提高企業(yè)自身生產(chǎn)力。因此Web應(yīng)用程序的主要作用是:根據(jù)明確的業(yè)務(wù)規(guī)則,滿足不同用戶的需求。 Web應(yīng)用程序在參與度以及知識(shí)儲(chǔ)備方面,對(duì)用戶有更高的要求。這些用戶不只是偶然地使用了它,并評(píng)價(jià)一番,而是把它當(dāng)作完成日常重要商務(wù)的平臺(tái)??傊?,當(dāng)他們不了解一款程序的運(yùn)行機(jī)制時(shí),是不會(huì)隨便喜新厭舊的。而對(duì)網(wǎng)站來說,這種情況卻常常發(fā)生。 1.1 不同類型的Web應(yīng)用程序 我們可以區(qū)分出開放的和保密的應(yīng)用程序。在開放的程序中,用戶可以很容易接近到其他注冊用戶。他們可以在網(wǎng)上使 用這些程序,選擇注冊免費(fèi)賬號(hào)或是收費(fèi)賬號(hào)。保密的應(yīng)用程序通常不允許在公司以外的地點(diǎn)使用。在外面,它們僅僅是一個(gè)“離線”的程序(雖然很多系統(tǒng)通過一 些服務(wù)或是專用接口,向商業(yè)伙伴展示了一些功能)。這種程序一般只能在公司的內(nèi)部網(wǎng)絡(luò)中運(yùn)行,只有員工才可以使用。 我不知道是誰創(chuàng)造了weblication這個(gè)詞,至少在現(xiàn)階段我很喜歡它,它描述了Web應(yīng)用程序是什么。但這并不意味著一個(gè)Web應(yīng)用程序就是網(wǎng)站和程序的簡單混合,它可比這復(fù)雜得多。 二. 首先要了解你的用戶 在識(shí)別用戶時(shí),切忌,客戶不是用戶,你也不是。雖然客戶的管理層通常會(huì)對(duì)該項(xiàng)目感興趣,并試圖影響你的決策,但你要記住,他們不會(huì)每天使用該程序工作好幾個(gè)小時(shí)(除非該程序是專門為他們設(shè)計(jì)的)。 2.1 如何識(shí)別用戶? 如果你沒有遇到真正的用戶,可能是因?yàn)槟銢]有權(quán)限,或是在設(shè)計(jì)開放的應(yīng)用程序,你可以使用“人物角色”來幫自己識(shí)別用戶。“人物角色”是真實(shí)用戶的 代表,他具有他們的習(xí)慣,目標(biāo)和動(dòng)機(jī)等等。你可以利用在商業(yè)分析報(bào)告中獲得的用戶信息,來創(chuàng)建“人物角色”。 如果你對(duì)這種方法不太熟悉,Brand Colbow的漫畫將對(duì)你有幫助。
“任務(wù)分析”有助于確定用戶在工作中需要完成哪些任務(wù),他們是如何完成的,需要多長時(shí)間,犯了哪些錯(cuò)誤。有時(shí)用戶正在使用你要去更新的舊程序。你正好可以利用這套舊程序,來看看用戶是如何操作的。這樣你會(huì)很容易了解到他們的任務(wù)和遇到的挑戰(zhàn)。 可以肯定的是:無論你的用戶是誰,在通常情況下你都必須同時(shí)考慮新手用戶和專家用戶。使“新手”盡快上手,“專家”高效地完成任務(wù),也許意味著要為他們各自單獨(dú)設(shè)計(jì)界面。但在很多情況下,你要使用各種技巧,來保證不同類型的用戶正常使用同一界面,比如隱藏高級(jí)功能。 這些研究通常由市場分析來完成。但當(dāng)沒人來負(fù)責(zé)這項(xiàng)業(yè)務(wù)時(shí),你應(yīng)該去完成它。一旦得到了必要的信息,就可以動(dòng)手設(shè)計(jì)了。 三. 設(shè)計(jì)流程 那么這種方法是如何執(zhí)行的呢?主要還是通過它的核心法則:迭代。每次迭代都包括你在流程中定義的所有階段。這意味著在第一輪結(jié)束時(shí),你將有一個(gè)可以測試的產(chǎn)品:原型。 3.1 草圖 草圖是否與線框圖一樣呢?似乎差別可以被忽視,但我卻不這樣認(rèn)為。線框圖并不是用于獲得粗略的想法,而是去延伸它們??梢宰x讀IxDA上的精彩討論:線框圖前的草圖。 一旦你畫出了“正確”的草圖,或者至少是你認(rèn)為正確的,你便可以創(chuàng)建更詳細(xì)的線框圖,或者直接去創(chuàng)建交互原型。
有關(guān)草圖和線框圖的趣味閱讀: 3.2 原型 網(wǎng)頁原型是臨時(shí)的,其目的歸根結(jié)底還是去驗(yàn)證想法。由于你不用花時(shí)間寫代碼,也就降低了犯錯(cuò)的成本。反正最后你也會(huì)扔掉它嘛。你還可以用專門的原型制作工具,比如Axure,有些人甚至?xí)?a target="_blank">PowerPoint來制作原型。
有關(guān)原型的其他閱讀資料和工具: 3.3 測試 Steve Krug的新書《將困難工作變得更簡單》(“Rocket Surgery Made Easy”)是有關(guān)“簡易可用性測試”方面最好的素材之一,找一本讀讀吧。
其他閱讀資料: 四. 設(shè)計(jì)準(zhǔn)則 4.1 沒人喜歡被驚嚇 一種保證“一致”的有效方法,就是為每個(gè)或每組項(xiàng)目的用戶界面都制定“用戶界面設(shè)計(jì)準(zhǔn)則”。每個(gè)細(xì)節(jié)的設(shè)計(jì)都應(yīng)該遵行它。設(shè)計(jì)準(zhǔn)則不僅能使界面保持一致,作為說明文檔,它還能幫助團(tuán)隊(duì)成員更好地理解你的決策。
一致的用戶界面容易上手,因?yàn)橛脩艨梢愿鶕?jù)以前版本的使用經(jīng)驗(yàn),識(shí)別程序各部分。“友好”某種意義上容易與“一致”相混淆。“友好”的用戶界面從用戶過去的經(jīng)歷中提取信息,形成合理的隱喻。比如說文件夾,就是一個(gè)有關(guān)文件組熟知的隱喻,它已取代了以前命令行界面中使用的“目錄”。總之,就是使用用戶自己的語言。 很多企業(yè)領(lǐng)導(dǎo)都有一個(gè)共同的認(rèn)識(shí):出色的用戶界面要看起來像微軟Office系列,特別是outlook。我不想說這多么沒意義。這里,我只提出不同于他們的建議:要沿用“以用戶為中心”的方法,并解釋為什么為員工、客戶和合作伙伴(也就是他們的用戶)所設(shè)計(jì)的應(yīng)用程序才是重要的。 盡管如此,由于工作流程不同,大多數(shù)企業(yè)的情況也是各異的。例如來自同一行業(yè)的兩個(gè)企業(yè),很可能就有不同的工作流程。這會(huì)迫使你超越自己,開始創(chuàng)新。這部分的設(shè)計(jì)流程是相當(dāng)吸引人的,當(dāng)然你也要在創(chuàng)新的程度上多加把握。 其他閱讀資料: 4.2 用戶應(yīng)當(dāng)是高效的 用戶完成特定任務(wù)時(shí)應(yīng)該是高效的。正如前文所說,任務(wù)分析可以幫助你確定任務(wù),以及用戶如何完成。如果任務(wù)很花時(shí)間,就需要將其分解成一些較小的任務(wù),這樣用戶就不會(huì)感覺費(fèi)時(shí)了。你還可以通過提供鍵盤輸入和快捷鍵來提高效率。試想一下,當(dāng)用戶必須在鼠標(biāo)和鍵盤之間來回切換是多么耽誤時(shí)間。在某些情況下,你需要為習(xí)慣于命令行界面的用戶設(shè)計(jì),他們強(qiáng)烈希望支持鍵盤輸入。給你一個(gè)建議:定義快捷鍵時(shí),應(yīng)與常用程序的快捷鍵相同。例如,Ctrl + s永遠(yuǎn)應(yīng)該是“保存”等等。
通過個(gè)性化定制可以提高用戶使用效率。用戶自己定制界面時(shí),不但會(huì)更快上手,更重要的是,在使用時(shí)會(huì)更有信心。個(gè)性化可以體現(xiàn)在許多方面:選擇儀表板中的模塊,定義快捷鍵選項(xiàng)和收藏,改變組件順序等等。 注意一下可訪問性。雖然許多人認(rèn)為在Web應(yīng)用程序中“可訪問性”并不重要。但事實(shí)并不這樣。要像對(duì)待公共網(wǎng)站的可訪問性那樣去對(duì)待它。 Web應(yīng)用程序在處理信息時(shí)也必須是高效的。因此,局部呈現(xiàn)和AJAX請求產(chǎn)生的耗資源的交互行為需要慎重使用。 4.3 救命! 我們可以更進(jìn)一步說:用戶界面應(yīng)該防止用戶犯錯(cuò)。這一法則被稱作容錯(cuò),確認(rèn)對(duì)話框、撤消選項(xiàng)、智能輸入(forgiving formats)等就遵循了它。“容錯(cuò)”讓用戶更安全地使用程序,降低了學(xué)習(xí)成本,并提高了整體滿意度。 由于Web應(yīng)用程序很復(fù)雜,你還需要提供一個(gè)綜合幫助系統(tǒng)。這項(xiàng)工作可以由內(nèi)部幫助、支持的數(shù)據(jù)庫、知識(shí)庫或是向?qū)Вò曨l,圖像和文字)來完成。 其他閱讀資料: 4.4 讓用戶滿意 簡潔是界面設(shè)計(jì)的一條基本準(zhǔn)則。越是簡潔的用戶界面,就越容易操作。但對(duì)商務(wù)應(yīng)用程序來說,讓用戶界面簡潔卻是一個(gè)挑戰(zhàn),因?yàn)檫@些程序往往有許多功能。問題的關(guān)鍵就是要平衡功能和簡潔。最有效的解決方法就是“約束”。換句話說,就是找到最簡單的解決方案。
美觀,雖然是有些主觀甚至隨意的評(píng)價(jià),但也是影響滿意度的重要因素。用戶喜愛漂亮的用戶界面,甚至可以為此犧牲功能。但你也要注意自己并不是在創(chuàng)造藝術(shù)品。有關(guān)美觀的最好的文章之一是美麗無罪(In Defense of Eye Candy)。 由于用戶會(huì)使用一個(gè)商務(wù)應(yīng)用程序很久,無論一款程序多么好用,多么具有一致性和容錯(cuò)性,評(píng)價(jià)它成功與否的決定因素還是:用戶滿意度。 其他閱讀資料: 五. Web應(yīng)用程序的重要元素 5.1 Web表單 盡量減少用戶填寫表單時(shí)的挫折感。提供內(nèi)部驗(yàn)證與良好的反饋系統(tǒng),并盡可能使用默認(rèn)值。不要忘記新手用戶,通過向?qū)Щ螂[藏高級(jí)(或不常用的)功能,來幫助他們更快地完成任務(wù)。 5.2 主從窗格(Master-Detail Views) 5.3 儀表板(Dashboards)
5.4 大量使用表格 表格是可以人為調(diào)整的,這就是說你可以為它們添加更多信息,甚至去修改它們的數(shù)據(jù)項(xiàng)。
5.5 報(bào)告
六. 不要忘記用戶界面設(shè)計(jì)版式
其他閱讀資料: 七. 案例教學(xué):網(wǎng)上銀行 與實(shí)際用戶共處了幾個(gè)小時(shí)后,我們便發(fā)現(xiàn)了主要問題。賬戶與信用卡信息被深埋在了次級(jí)導(dǎo)航中。用戶很難看到消費(fèi)信息,以及賬戶和信用卡狀態(tài)。顯然,該應(yīng)用程序已經(jīng)變成為銀行員工設(shè)計(jì)的了,只有他們才熟悉專業(yè)術(shù)語,很好地解讀程序中的數(shù)字。 在緊迫的時(shí)間內(nèi),我們遵循了文中所描述的設(shè)計(jì)流程,并取得了一定成功。由于問題明顯,在時(shí)間很短的情況下,我們依舊清楚地了解自己的主要任務(wù)和行動(dòng) 方式。我們創(chuàng)建了一個(gè)“儀表板”,提供了所有帳戶及信用卡狀態(tài)的明確信息。新的導(dǎo)航讓用戶更方便地查詢信息。同時(shí)報(bào)告也方便用戶理解了,還加入了一些新的 功能。 我們只進(jìn)行了部分調(diào)整,但由于改善了用戶完成關(guān)鍵任務(wù)的流程,也就極大地提高了整體的用戶體驗(yàn)。 八. 最后的思考 |
聯(lián)系客服
微信登錄中...
請勿關(guān)閉此頁面