2010-06-16 6 views
10

मैं एक आंतरिक उपकरण वेबपैप लिख रहा हूं;आदेशों की सूची बढ़ने के साथ ही मैं अपने टूलबार इंटरफ़ेस को सरल कैसे बना सकता हूं?

toolbar http://img709.imageshack.us/img709/1928/commands.png

आदर्श रूप में, बटन के सभी होगा: इस उपकरण में केंद्रीय पृष्ठों में से एक संबंधित आदेशों उपयोगकर्ता पृष्ठ पर कई बटन पर क्लिक करके निष्पादित कर सकते हैं, इस तरह की एक पूरी गुच्छा है एक लाइन पर फिट आम तौर पर मैं प्रत्येक विजेट को एक बटन से (कभी-कभी लंबा) टेक्स्ट लेबल को एक साधारण, कॉम्पैक्ट आइकन पर बदलकर ऐसा करूँगा - उदा।

button labelled "Save" http://img337.imageshack.us/img337/773/saver.png

एक परिचित डिस्क आइकन द्वारा प्रतिस्थापित किया जा सकता है:

disk icon http://p.yusukekamiyamane.com/icons/search/fugue/icons-24/disk-black.png

दुर्भाग्य से, मुझे नहीं लगता कि मैं इस विशेष पृष्ठ पर हर बटन के लिए ऐसा कर सकते हैं। कमांड बटन में से कुछ में अच्छे दृश्य एनालॉग नहीं हैं - "वीडीएस सूची"। या, अगर मुझे किसी अन्य प्रकार की सूची के लिए भविष्य में एक और बटन जोड़ने की ज़रूरत है, तो मुझे दो आइकनों की आवश्यकता होगी जो दोनों "सूची-नेस" और संवाद करते हैं जो सूची। तो, मैं अभी भी इस विकल्प पर विचार कर रहा हूं, लेकिन मुझे यह पसंद नहीं है।

तो मेरे लिए इस अनुभाग में अभी तक एक और बटन जोड़ने का समय आ गया है (क्या आप आंतरिक उपकरण पसंद नहीं करते हैं?)। नए बटन को फिट करने के लिए उस सिंगल लाइन पर पर्याप्त जगह नहीं है। आइकन समाधान के अलावा मैंने पहले ही उल्लेख किया है, इस यूआई को सरल/अस्वीकार/कम करने या अन्यथा सुधारने के लिए एक अच्छा * तरीका क्या होगा?


* प्रति जेकब नीलसन के लेख के रूप में, मुझे लगता है कि a dropdown menu is not the solution लगता करना चाहते हैं।


संपादित करें: मैं आइकन विचार के बारे में इनपुट के लिए नहीं देख रहा हूँ। मैं अन्य समाधान ढूंढ रहा हूं। क्षमा करें मेरा उदाहरण डिस्क आइकन एक छोटा था; यह सिर्फ एक उदाहरण था। मैं आशा करता हूं कि अब और अधिक स्पष्ट होने के लिए अब एक बड़ा दिखा रहा हूं।

+1

यह http://doctype.com/ के लिए एक बेहतर सवाल हो सकता है क्योंकि यह वास्तव में एक शैली मुद्दा है। –

+3

को एक परिचित डिस्क आइकन द्वारा प्रतिस्थापित किया जा सकता है: फ्लॉपी डिस्क का प्रतिनिधित्व करने के लिए यह क्या परिचित है! फ्लॉपी डिस्क के साथ इसका मतलब कुछ भी हो सकता है! भार, सुधार, निकालें, सहेजें, नाम बदलें, आप इसे नाम दें, यह भी उपयोगी होने के लिए बहुत छोटा तरीका है। एक पूरी पीढ़ी है जो यह भी नहीं जानता कि फ्लॉपी डिस्क क्या है! –

+2

@ फ़ज़ी: कुछ मामलों में यह बदतर हो जाता है ... ओपन ऑफिस (कम से कम उबंटू पर) "सहेजें" का प्रतिनिधित्व करने के लिए हार्ड ड्राइव आइकन का उपयोग करता है - कितने (गैर-तकनीकी या गीक) लोग जानते हैं कि हार्ड ड्राइव कैसा दिखता है और तार्किक कनेक्शन कर सकते हैं? और हाँ, मेरे छोटे भाई बहनों ने पहले ही पूछा है कि डिस्क आइकन क्या दर्शाता है। रूपक अक्सर टूट जाते हैं :-) – Joey

उत्तर

8

alt text

मैं गूगल करता है की तरह एक अधिक लिंक जोड़ना होगा। वीबी छवियों के साथ Google का शीर्ष बार मानचित्र देखें और अधिक >>

इस के लिए >> ड्रॉप डाउन आप उपयोगकर्ता द्वारा या उसके द्वारा उपयोग किए जाने वाले बटन को कम बार जोड़ने के लिए तर्क जोड़ सकते हैं।

+0

यह मेरे लिए बहुत व्यवहार्य लगता है। –

+0

एकल शब्दों के लिए अच्छी तरह से काम करता है लेकिन सावधानी बरतें कि आप अलग-अलग लिंक के बीच पर्याप्त जगह रखें (और उन्हें केवल सफेद जगह से अलग न करें, डब्ल्यूसीएजी के अनुसार [स्क्रीन पाठक अन्यथा उनमें से एक गड़बड़ी करते हैं], खासकर यदि मल्टी हैं -वर्ड लिंक – Joey

+0

यदि आप केवल लिंक का उपयोग कर रहे हैं और बटन नहीं जो मैं अधिकतर उपयोग करता हूं मेरे लिंक को अलग करने के लिए सेपरेटर। @ जोहान्स आपके साथ कई शब्द लिंक –

0

एक combobox और एक पुष्टि बटन के बारे में क्या? या एक साधारण ड्रॉपडाउन मेनू?

+1

क्या आपने ड्रॉपडाउन के बारे में मेरा नोट देखा था? –

4

यदि आप आइकन और टेक्स्ट का उपयोग करते हैं तो क्या होगा?

सामान्यतः समझे गए आदेशों के लिए - केवल एक आइकन (जैसे सहेजने) का उपयोग करें असामान्य आदेशों के लिए एक आइकन + टेक्स्ट का उपयोग करें।

यदि आप पूरी तरह से बटन के चारों ओर एक सीमा डालते हैं तो इसे आइकन/टेक्स्ट को अच्छी तरह से जोड़ना चाहिए और यह अभी भी एक बटन दिखाना चाहिए। आप कुछ होवर प्रभाव भी कर सकते हैं।

+2

या बेहतर, आइकन और होवर-ओवर टेक्स्ट। कुछ सामान्य रूप से उपयोग किए जाने वाले आइकन हैं जिनका आप यहां उपयोग कर सकते हैं - डिस्कनेक्ट, रीबूट, फ़ाइल ट्रांसफर, कॉन्फ़िगर, मैसेजिंग। –

+0

मैं निश्चित रूप से आइकन के साथ होवर टेक्स्ट ([टिप्स] [http://onehackoranother.com/projects/jquery/tipsy/) के साथ) का उपयोग करता हूं। –

0

"टूल्स" या "क्रियाएं" मेनू बार जोड़ें, और मेनू में लगभग 4 कमांड (या अधिक) चिपकाएं।

1

चूंकि आप ड्रॉपडाउन मेनू नहीं कर सकते हैं (या माध्यमिक मेनू उत्पन्न करने के लिए बटन पर क्लिक करने जैसी समान तकनीकें)। सबसे अच्छा मैं सोच सकता हूं कि प्रेस्कॉट ने बटनों का एक क्षेत्र क्या किया है या इस तरह से समूहित किया है ताकि उपयोगकर्ता को यह पता चल सके कि उनके बटन में कौन सा अनुभाग होना चाहिए।

0

क्या कार्यान्वित करना संभव होगा बटनों का एक "सबसे अधिक इस्तेमाल किया गया" या "पसंदीदा" सेट (अधिमानतः उपयोगकर्ता के लिए, लेकिन यदि आवश्यक हो तो वैश्विक स्तर पर) और यदि आपको उनमें से किसी एक की आवश्यकता है तो आपको शेष आइटमों पर ले जाने के लिए बटन?

+0

मूल रूप से [सुशील का उत्तर] (http://stackoverflow.com/questions/3056266/how-can-i-simplify-this-user-interface/3056320#3056320) सुझाव दिया गया है। –

0

आप उन्हें एक बटन के पीछे समूह (दो 'vds' बटनों की तरह) समूहित कर सकते हैं, जब क्लिक किए गए व्यक्तिगत आइकन के साथ एक संदर्भ मेनू पॉप करता है।

6

यदि आप जेफ (और एज़ा) रास्किन पढ़ते हैं, तो आप शायद महसूस करेंगे कि आइकन भी एक अच्छा समाधान नहीं हैं - दोनों उनके लिए नापसंद (बहुत कम उल्लेखनीय अपवादों के साथ) में बहुत मुखर थे। शुरुआत के लिए उन्हें छोटे बटनों से भी हिट करना मुश्किल होता है, फिर उनके प्रतीक भ्रमित, संस्कृति-निर्भर और भ्रामक हो सकते हैं। हम टेक्स्ट पढ़ने, पार्सिंग और व्याख्या करने के लिए पहले से ही अच्छे हैं, अक्सर धीमे होते हैं।

किसी भी मामले में, उस बटन बार में ऐसा लगता है कि यह बहुत अधिक किसी और उनके कुत्ते को समायोजित करता है जो उस उत्पाद का उपयोग कर रहे हैं। इसे बनाने के दौरान आपके मन में कुछ विशिष्ट परिदृश्य हो सकते हैं जो करना आसान होना चाहिए और महत्वपूर्ण हैं। संभवतः इस तरह के कार्य को पूरा करने के लिए सभी बटनों की आवश्यकता नहीं होती है।

एक और बात यह है कि शायद सभी बटन एप्लिकेशन के किसी भी राज्य में भी उपयोगी नहीं हैं। क्या आप राज्य के आधार पर बटन के विभिन्न सेटों में शाखा बना सकते हैं। यह केवल तभी संभव है, अगर प्रत्येक राज्य ने स्पष्ट रूप से परिभाषित किया है कि कौन से कदम उठाए जा सकते हैं। यदि राज्य के बावजूद सभी बटन समान रूप से दबाए जा सकते हैं तो यह कुछ भी नहीं करेगा।

संबंधित कार्यक्षमता के अनुसार समूहांकन आदेश भी एक विकल्प हो सकता है। यह मेनू जैसी मुहावरे के साथ नहीं किया जाना चाहिए, आप उन्हें अलग-अलग पृष्ठभूमि रंगों के साथ कंटेनर में भी डाल सकते हैं या बटन को स्वयं भी रंग सकते हैं (हालांकि रंगीन अंधापन को ध्यान में रखें)। उन व्यक्तिगत कार्यों से संबंधित कैसे हैं इस पर निर्भर करता है कि यह बातचीत को तेज करने का एक अच्छा तरीका हो सकता है। उपयोगकर्ताओं को यह जानने के लिए कुछ प्रशिक्षण की आवश्यकता हो सकती है कि रंग क्या संदर्भित करते हैं, लेकिन इन-हाउस टूल के लिए जो केवल आपके द्वारा उपयोग किए जाने वाले लोगों द्वारा उपयोग किया जाता है (इसके बजाय मनमाने ढंग से यादृच्छिक लोगों की वजह से [जो माइक्रोसॉफ्ट काफी समस्या का सामना कर रहा है]) यह नहीं होना चाहिए एक समस्या है।

+0

जैसा मैंने कहा, मुझे आइकन के विचार से प्यार नहीं है। मैं * अन्य * विकल्पों की तलाश में हूं। –

+0

* "संबंधित कार्यक्षमता के अनुसार समूहबद्ध आदेश" के लिए +1 * - एक छोटा संगठन लंबा सफर तय करता है –

+0

एमएस ऑफिस रिबन के समान कुछ? यह वास्तव में वर्तमान विंडोज यूआई रुझानों का पालन करेगा (मुझे लगता है कि मैं मानता हूं कि आपका उपयोगकर्ता आधार विंडोज पर है)। – JohnL

0

आइकन उपयोगकर्ता अनुभव स्टैंड पॉइंट से भयानक हैं। फ्लॉपी डिस्क की एक तस्वीर को स्पष्ट रूप से सहेजने का मतलब नहीं है। इसका मतलब फ्लॉपी डिस्क के साथ कुछ करना है। एक फ्लॉपी वास्तव में, इसकी 2010, वेब ऐप पर सहेजने का मतलब सर्वर पर सहेजना है, फ्लॉपी डिस्क कैसे गणना करता है?

यहां एक application है जो 10 वर्षों के लिए एक ही अत्यंत उपयोग करने योग्य इंटरफेस था! और बटन के लिए शायद ही कोई छवियां, और यह अपनी श्रेणी में सबसे अधिक उत्पादक अनुप्रयोगों में से एक है।

आप जानते हैं कि ICONSमैं ncomprehesible सी ryptic हे bfucsated एन onsense एस ymbol के लिए खड़े हो!

इसके अलावा आप एक आइकन को अंतर्राष्ट्रीय कैसे बनाते हैं?

+1

यह एक आंतरिक उपकरण है; अंतर्राष्ट्रीयकरण अभी चिंता का विषय नहीं है। –

+1

वास्तव में प्रतीक आंशिक रूप से उपयोग में आए क्योंकि वे अंतर्राष्ट्रीयकरण करना आसान थे। सहेजने के लिए एक डिस्क आइकन कई भाषाओं में समान है, जबकि टेक्स्ट को प्रत्येक भाषा के लिए अनुवादित किया जाना था। इन दिनों, संसाधन फ़ाइलों का हर जगह उपयोग करना आम बात है, और इन संसाधन फ़ाइलों में तारों का अनुवाद करने के लिए बेहतर उपकरण मौजूद हैं। – JohnL

+0

किसी भी देश में 2010 में किसी वेब ऐप में फ़्लॉपी डिस्क की तस्वीर के बारे में कुछ भी नहीं बचा है। –

1

मैं कुछ लंबे लेबल बदलकर शुरू करूंगा। कम से कम, "आवेदन लोड हो रहा है" संक्षिप्त किया जा सकता है "App लोड हो रहा है।" "त्वरित फ़ाइल स्थानांतरण" कहने का दूसरा (छोटा) तरीका क्या है?

तुम भी समूह टैब में बटन (यानी यह एक ribbon बनाने) कर सकता है। यह विशेष रूप से अच्छी तरह से काम कर सकता है यदि उपयोगकर्ताओं के विभिन्न वर्ग बटन के अलग-अलग, गैर-ओवरलैपिंग सेट का उपयोग करते हैं।

0

यह वास्तव में लगता है कि तुम क्या विकसित कर रहे हैं एक व्यवस्थापक कंसोल जो नहीं बल्कि कुछ जो मैं वेब एप्लिकेशन के रूप यों अधिक पसंद करेंगे, एक वेब पेज के माध्यम से अपने यूआई पेश करने के लिए होता है की तरह। जैसे, विशेष रूप से अपने बयान है कि यह एक आंतरिक उपयोग के अनुप्रयोग है को देखते हुए, के बारे में Jakob Nielson की सलाह < > टैग गरीब डिजाइन लागू की जरूरत नहीं किया जा रहा है का चयन करें।

मान्यताओं के इस विशेष सेट के लिए, मुझे लगता है कि बेहतर विकल्प एक प्रणाली मेनू कई सीएसएस आधारित menuing में से एक संभव डिजाइन का उपयोग कर सेटअप की नकल करने है।

1

कई विकल्प:

  • समूह और लेबलिंग। जब भी आपके पास आठ से अधिक कमांड हों, तो आपको मेन्यू आइटम को चारों के अर्थात् समूहों में विभाजित करना चाहिए ताकि उपयोगकर्ता अपने इच्छित आदेश के लिए स्कैन कर सकें। समूहों को लेबल करने से स्कैन में भी मदद मिलती है और मेनू को अधिक कॉम्पैक्ट बना सकता है। उदाहरण के लिए, वीडीएस पिंग और वीडीएस सूची के बजाय, "पिंग" और "सूची" मेनू आइटम के साथ "वीडीएस" लेबल वाला समूह है। आपके पास फिट करने के लिए एक कम शब्द है (दो यदि आप क्षैतिज अभिविन्यास का उपयोग करते समय लेबल के संबंधित मेनू आइटम के ऊपर लेबल डालते हैं)।

  • पुल्डडाउन मेनू। आदेश बनाने के लिए ड्रॉपडाउन मेनू के उपयोग से परहेज करने के बारे में नील्सन सही है। हालांकि, वह पुलडाउन मेनू के पक्ष में स्पष्ट रूप से है जो मोटी क्लाइंट ऐप में मेन्यूबार की तरह दिखता है और व्यवहार करता है (नील्सन उन्हें "कमांड" और "नेविगेशन" मेनू कहते हैं)। मुझे लगता है कि आप पाएंगे कि वहां कई जावास्क्रिप्ट पुलडाउन मेनू हैं, 2000 में वापस जब नील्सन ने अपनी पोस्ट लिखी थी। आप मेनूबार में 100 के आदेशों को फिट कर सकते हैं।

  • साइडबार मेनू। खड़ी मेनू आइटम प्रोटीन और आप 20 या उससे अधिक आदेशों फिट करने के लिए सक्षम होना चाहिए और आप उपयोगकर्ता कुछ के लिए किसी भी आदेश के नाम छोटे कर लिए समझ में न आएं नहीं होगा। अगर वह पर्याप्त नहीं है, पर विचार के लिए एक "menu bank" की तुलना में एक अधोगामी मीनू की क्षमता के साथ साइडबार मेनू के लाभों को जोड़ती है।

  • रिबन। अपने आदेश असतत कार्य, जहां उपयोगकर्ता थोड़ी देर के लिए एक कार्य से चिपक जाता है में फिट हैं, तो आप बटन एक टैब नियंत्रण पर, कार्य के प्रति एक पत्रक के साथ व्यवस्था कर सकते हैं।

  • कमांड ओवरलोडिंग। अपनी डेटा ऑब्जेक्ट्स को अपनी विंडो में चुनिंदा इकाइयों के रूप में प्रस्तुत करें और अपने कमांड को अधिक सामान्य संचालन में बदलें, जैसे ड्रिल-डाउन, बनाएं, कॉपी, मूव, डिलीट, और लिंक, जिसे ऑब्जेक्ट्स के विभिन्न विभिन्न वर्गों पर लागू किया जा सकता है, जिससे आपकी कुल कमी कम हो जाती है। आदेशों की संख्या। उपयोगकर्ता एक या अधिक डेटा ऑब्जेक्ट्स का चयन कर सकते हैं, फिर उन पर कार्य करने के लिए वांछित कमांड का चयन करें।

  • कार्य क्षेत्र विशेषताएँ। आपके कुछ आदेश सेटिंग्स या विशेषताओं द्वारा आदेश नहीं हो सकते हैं। उन्हें मेनू से हटाएं और उन्हें रेडियो बटन, ड्रॉपडाउन सूचियों और चेक बॉक्स जैसे नियंत्रणों का उपयोग करके पृष्ठ के कार्य क्षेत्र (या किसी अन्य पृष्ठ, यदि उनका शायद ही कभी उपयोग किया जाता है) में डेटा ऑब्जेक्ट्स के रूप में उनका प्रतिनिधित्व करें। इसमें अतिरिक्त लाभ स्पष्ट रूप से उपयोगकर्ता को वर्तमान सेटिंग के साथ-साथ इसे बदलने के साधन प्रदान करने का स्पष्ट रूप से दिखाता है।

  • प्रकार। एक आंतरिक ऐप के लिए, आपके पास औपचारिक भूमिकाएं और जिम्मेदारियां होती हैं जो कार्य की स्थिति से भिन्न होती हैं। अपने मॉडल में उपयोगकर्ता की स्थिति शामिल करें, और गतिशील रूप से कमांड (और अन्य नियंत्रण और पृष्ठ) को छुपाएं जो उस स्थिति से प्रासंगिक नहीं हैं।