तीन बटन के लिए रंग संयोजन


13

इन तीन बटन के लिए कौन सा रंग संयोजन सबसे अच्छा काम करेगा:

यहाँ छवि विवरण दर्ज करें

क्या उन सभी को एक ही रंग रहना चाहिए?

ये मेरे विकल्प हैं:

यहाँ छवि विवरण दर्ज करें

पूरे पृष्ठ की छवि

यहाँ छवि विवरण दर्ज करें


प्राथमिक बनाम डिफ़ॉल्ट और डिफ़ॉल्ट बनाम सफलता विचलित करने वाली लगती है।
डैनी वारोड

बड़े पृष्ठ को देखते हुए, मैं पूछता हूँ कि 'स्पष्ट' बटन क्या करना है। क्या यह वास्तव में एक आवश्यक विकल्प है?
DA01

जवाबों:


52

जाओ बटन होना चाहिए बड़ा और सभी के उच्चतम विपरीत है , क्योंकि यह प्राथमिक से एक है।

साफ है क्योंकि यह एक है बटन ठीक है माध्यमिक कार्रवाई और इसे तटस्थ होना चाहिए

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

यहां दो समान समाधान हैं जो मेरे लिए बहुत साफ हैं और इस विशिष्ट उद्देश्य के लिए बेहतर प्रयोज्यता प्रदान करते हैं (मैं व्यक्तिगत रूप से पहला चुनूंगा ):

यहाँ छवि विवरण दर्ज करें

बस FYI करें: मैंने Font-Awesom ई आइकन का उपयोग किया है , पहली छवि में एक (आपके संस्करण के आधार पर) आइकन-एक्सचेंज / फ़ेस-एक्सचेंज है और जो तीर हैं वे आइकन- एरो-लेफ्ट / राइट और फ़्लो-एरो-लेफ्ट / हैं सही

EDIT - अव्यवस्था को दूर करना ( DA01 की टिप्पणी के आधार पर ):

यदि क्लियर बटन केवल उन दो फ़ील्ड्स (से / से) को साफ़ कर देगा, तो यह आवश्यक प्रतीत नहीं होता है क्योंकि वैसे भी उपयोगकर्ताओं को प्रत्येक ड्रॉपडाउन पर क्लिक करना होगा और चयन करना होगा और यदि आप क्लियर बटन जोड़ते हैं तो यह परिवर्तित नहीं होता है
यदि यह मामला है तो मैं इसे हटाने की सिफारिश करूंगा, इसलिए आप एक क्लीनर इंटरफ़ेस प्राप्त करें और उपयोगकर्ताओं को एक ऐसी कार्रवाई करने से रोकें जो उनके लिए कोई मूल्य नहीं जोड़ता है (और इसके अलावा अनजाने में जो उन्होंने चुना है उसे हटा दें)।

यहाँ छवि विवरण दर्ज करें


The तीर मेरा पहला विचार भी थे। देखें कि Translate.google.com यह कैसे करता है: टूलटिप के साथ .com बटन।
२००/२०२५

अगर स्पष्ट रूप से माध्यमिक है, तो मैं सहमत हूं। यदि, दूसरी ओर, यह विनाशकारी है (काम को हटा दिया गया है) तो मैं तर्क दूंगा कि इसे वास्तव में अलग तरीके से संभाला जाना चाहिए।
DA01

@ DA01 क्या आप अपनी पिछली टिप्पणी को और अधिक समझा सकते हैं? क्या विकल्प बेहतर होगा यदि यह विनाशकारी है और क्यों? मुझे वास्तव में आपकी पीओवी में दिलचस्पी है।
अलेजांद्रो वेल्ट्री

@ ब्रुब्स मैं आमतौर पर विनाशकारी विकल्प नहीं होने की सलाह देता हूं, हालांकि वे अभी भी बहुत सारे सिस्टम में मौजूद हैं। जैसा कि यह विनाशकारी है, यह एक बटन, IMHO की तरह नहीं दिखना चाहिए, क्योंकि बटन आदतन क्लिक हो सकते हैं। लोग अक्सर एक फॉर्म भरते हैं और फिर सबसे ऊपर 'SUBMIT' मानकर सबसे 'स्पष्ट' बटन दबाते हैं। तो, प्रपत्र डिजाइन में कम से कम, मैं आमतौर पर की सिफारिश केवल बटन है कि है सबमिट करें। यदि अन्य कार्य हैं, तो उन्हें प्राथमिक बटन की तुलना में नेत्रहीन अलग और वश में करें।
DA01

1
@ DA01 मुझे आपकी बात मिल गई, स्पष्टीकरण के लिए धन्यवाद। इसके अतिरिक्त, मैंने प्रश्न में आपकी टिप्पणी पढ़ी है, यह पूछते हुए कि क्या स्पष्ट बटन वास्तव में आवश्यक है और मुझे लगता है कि यह नहीं है, क्योंकि वैसे भी उपयोगकर्ता ड्रॉपडाउन से फिर से चयन करके मूल्य को बदल देगा, इसलिए एक स्पष्ट बटन जोड़ना एक अनावश्यक जोड़ देगा कार्रवाई "बीच में"।
अलेजांद्रो वेल्ट्री

12

एक समाधान प्राथमिकता से अपने बटन को नेत्रहीन रूप से अलग करना है।

आपके पास आमतौर पर प्राथमिक बटन (एस), द्वितीयक बटन (एस) और कभी-कभी तृतीयक बटन (एस) और / या गैर-पसंदीदा एक्शन बटन होंगे।

प्राथमिक और माध्यमिक के लिए, मैं आमतौर पर विपरीत के दो स्तरों में आपके पसंदीदा ब्रांडिंग रंग (विशुद्ध रूप से व्यक्तिपरक) का सुझाव देता हूं। प्राथमिक के लिए उच्च विपरीत, माध्यमिक के लिए थोड़ा कम विपरीत।

तृतीयक बटन मैं आमतौर पर बचने की कोशिश करता हूं और इसके बजाय पूरी तरह से अलग दृश्य के साथ जाता हूं, जैसे कि एक लिंक।

इसलिए, आपके उदाहरण को देखते हुए, और संदर्भ को मैं शर्त के रूप में व्याख्या कर सकता हूं, मैं कुछ इस तरह का सुझाव दूंगा:

यहाँ छवि विवरण दर्ज करें

यह वास्तव में एक त्वरित उदाहरण है और आपको इसकी पुष्टि करने की आवश्यकता होगी कि कंट्रास्ट एक्सेसिबिलिटी दिशानिर्देशों को पूरा करता है और अक्षम नहीं दिखता है (जो मेरा थोथा करता है, इसलिए इसे ट्वीक करने की आवश्यकता है), लेकिन उम्मीद है कि यह बिंदु पार हो जाता है।

अद्यतन: मैंने अभी देखा था क्योंकि मैं यह पोस्ट कर रहा था कि यह एक नई पोस्ट बनाते समय StackExchange पैटर्न का उपयोग करता है। SAVE बटन प्राथमिक है, CANCEL तृतीयक है और एक बटन के बजाय एक लिंक के रूप में दिखाया गया है।


1

उच्च-विपरीत (जैसे काले-सफेद) रंग हमेशा सबसे अच्छे होते हैं, जो नारंगी विकल्प को समाप्त करते हैं। और फिर, मिश्रण में थोड़ा सा विपणन जोड़कर, बटन, एप्लिकेशन के संदर्भ में आपके शेष पृष्ठ के लिए उपयोग की जाने वाली रंग-योजना क्या है? लेकिन अगर मुझे चुनना था: गो: ग्रीन; स्विच ...: समुद्री नीला; साफ़: काला-सफेद। कलर इन माइंड कलर का संबंध वरीयता से भी है।

(ऑफ-टॉपिक: आप दो क्षेत्रों के बीच आइकन-लेबल बटन द्वारा स्विच करने के लिए लंबे लेबल को समाप्त कर सकते हैं)


1
UX.stackexchange में आपका स्वागत है। आपके पास क्या सबूत है कि उच्च विपरीत हमेशा सबसे अच्छा होता है?
मेयो

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

1
यहाँ एक लेख है जो रंगों के लिए विभिन्न तर्कों को सूचीबद्ध करता है: usertesting.com/blog/2014/12/02/color-ux-conversion-rates

एक ऐसा बिंदु है जहां कंट्रास्ट पर्याप्त नहीं होता है और सुगमता कम हो जाती है। मुझे लगता है कि मैं पहले वाक्य में काले और सफेद उदाहरण पर अत्यधिक ध्यान केंद्रित कर रहा था। एक बिंदु आता है जहां सुगमता "पहुंच" और फिर "अधिक" उपयोगकर्ता के प्रदर्शन को नहीं बढ़ाती है। फिर। UX में आपका स्वागत है
मेयो

1

मैं कहूंगा कि जोर दिखाने के लिए रंग की एक समान छाया के विपरीत परिवर्तन । क्यों? ( 12 में से 1 पुरुष कलर ब्लाइंड हैं और 200 में से 1 महिला भी कलर ब्लाइंड हैं

आप सिस्टम के माध्यम से उपयोगकर्ताओं को इच्छित पथ की ओर मार्गदर्शन करना चाहते हैं ताकि मैं गो बटन को गहरा बना सकूं। वे सभी बटनों को स्कैन कर सकते हैं और उन्हें संसाधित कर सकते हैं या उनके पास गहरा रंग या बड़े आकार जैसा कुछ हो सकता है जो उन्हें इच्छित या 80% सबसे आम पसंद के लिए आकर्षित करते हैं, जिस तरह से वे पहले वहां देखते हैं और कहते हैं कि यह उन्हें समय बचा रहा है।

यह लेख कहता है कि व्यक्ति को सबसे महत्वपूर्ण बटन जैसा दिखना चाहिए

नीचे उनका उदाहरण देखें

यहाँ छवि विवरण दर्ज करें

नीचे की छवि के रूप में अच्छा नहीं दिखता (मेरी राय में)

यहाँ छवि विवरण दर्ज करें

उस लेख में एक समझदार क्रम में बटन लगाने का भी उल्लेख है । इसलिए मेरी राय में मैं गो बटन को दाईं ओर रखूंगा क्योंकि अंग्रेजी बोलने वाले उपयोगकर्ता दाएं से बाएं हैं (इसलिए वे स्वाभाविक रूप से संकेतों को समाप्त करने के लिए दाईं ओर देखते हैं)। मैं इसे अरबी उपयोगकर्ताओं के लिए बाईं ओर रखूंगा। Thats कैसे मैं इसे एक अंग्रेजी बाजार के लिए व्यवस्था करेंगे।

यहाँ छवि विवरण दर्ज करें

उस लेख का एक अंतिम विषय यह है कि विनाशकारी बटन ढूंढना कठिन है । आपके परिदृश्य में मैं आपके आदेश को इस तरह से बदल दूंगा कि अगर आपका क्लिक पर जाना और आप गलती से बाईं ओर चूक जाएं तो संभवतः आप कार्रवाई को नष्ट करने के बजाय शिपिंग स्थान को बदल देंगे। इसके अलावा, आप विनाशकारी कार्य की पुष्टि कर सकते हैं यदि आपको इसकी आवश्यकता महसूस होती है (यानी आप सुनिश्चित हैं?)।


"क्योंकि अंग्रेजी बोलने वाले उपयोगकर्ता बाएं से दाएं पढ़ते हैं" - हुह? क्या हम उसी अंग्रेजी के बारे में बात कर रहे हैं?
ब्लूराजा - डैनी पफ्लुगुएफ्ट

संपादित ... वूप्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.