🚘 🦔 🙅🏼 क्लिक का हीटमैप - उपयोगकर्ता साइट पर कैसे व्यवहार करते हैं 🆘 🎹 🍇

आज हमारे हाथ में बहुत सारे उपकरण, अध्ययन और लेख हैं जो ux / ui पर हैं और साइट को कैसे पढ़ा और पहचाना जाएगा।

लेकिन मुख्य सवाल खुला रहता है।

लेकिन क्या आपको पता है कि आपके (या आपके द्वारा किए गए) वेबसाइट के उपयोगकर्ता कहां से प्रहार करते हैं?

आज बात करते हैं बटनों की

सभी ने शायद कम से कम एक बार सुना कि बटन का आकार न्यूनतम है, कुछ प्रकार के सुरक्षात्मक क्षेत्र हैं, और बटन को बटन की तरह दिखना चाहिए।
लेकिन क्या वास्तव में ऐसा है?

आइए एक उदाहरण देखें

उसके लिए, मैंने अपनी साइट - 2 बटन और लिंक की एक सूची ली। (~ 600 उपयोगकर्ता, ~ 2,500 क्लिक, समय कवरेज - 1 वर्ष)। और मैंने यैंडेक्स.मेट्रिक्स से हीट मैप का उपयोग करके इसका विश्लेषण किया।

परिणाम

विशेषताएं:
1. हैमबर्गर
2. लिंक की सूची
3. टिप्स
4. बटन जो दिखाई देता है

हैमबर्गर

नेत्रहीन, एक हैमबर्गर का आकार 32x26 पिक्सेल है। सुरक्षात्मक क्षेत्रों के साथ, क्लिक क्षेत्र 40x33 पिक्सेल है। उपयोगकर्ता मूल रूप से 46x42 पिक्सेल के क्षेत्र पर क्लिक करता है।

और इसका मतलब है कि मेरे मामले में परिधि के आसपास लगभग 4px पर्याप्त नहीं है।

गणना

$(46-40) / 2 = 3 (px);$ $(42-33) / 2=4.5 (px);$

और कुल मिलाकर 8px ।

गणना

$(46-32) / 2 = 7 (px);$ $(42-26) / 2 = 8 (px);$

हैम्बर्गर हीट मैप

निष्कर्ष: मुख्य बटन जैसे: "हैमबर्गर", "बैक", "होम" क्लिक क्षेत्र को प्रत्येक तरफ कम से कम 8px तक बढ़ाया जाना चाहिए । और 48x48px के आकार के लिए प्रयास करें।

लिंक की सूची

निम्नलिखित लिंक की एक सूची है। यह पूरी चौड़ाई पर क्लिक करने योग्य है और नेत्रहीन इसे हॉवर पर दिखाया गया है।

क्षैतिज
जैसा कि आप हीटमैप से देख सकते हैं, मुख्य क्लिक घनत्व औसत शब्द लंबाई के बीच में है। ~ 55px (62%) बाएं किनारे से।

गणना

$111.2 = (108 + 186 + 83 + 132 + 170 + 113 +$
$+ 69 + 105 + 62 + 84) / 10$
$108.0 = (108 + 83 + 132 + 170 + 113 + 69 +$
$+ 105 + 84) / 8$
$104.1 = (108 + 83 + 132 + 113 + 105 + 84) / 6$
$108/100 * 57 = $ 61.5$

ईमानदार
यदि आप मानक लाइन ऊंचाई (सामान्य) को ध्यान में रखते हैं, तो "मिस" लगभग 2px से 5px है।

मोबाइल फोन
सूची में एक तीर दिखाई देता है (जैसा कि डेस्कटॉप पर)। और मोबाइल डिवाइस पर उपयोगकर्ता अगली कार्रवाई के साथ उस पर क्लिक करते हैं।

एनीमेशन

अंत
जब हम किसी सूची आइटम का चयन करते हैं तो बंद बटन दिखाई देता है। और उस पर क्लिक की प्रकृति सूची से अलग नहीं है।

निष्कर्ष: टेक्स्ट लिंक सूचियों के लिए, क्लिक क्षेत्र को ऊपर और नीचे से 4px तक बढ़ाया जाना चाहिए ।

युक्तियाँ

युक्तियों वाला एक ब्लॉक ऊपरी दाएं कोने में स्थित है, इसे खराब रूप से ध्यान देने योग्य बनाया गया है, और यह मार्गदर्शन का जवाब नहीं देता है। लेकिन नेत्रहीन एक बटन की तरह।

गतिविधि
इस "छद्म बटन" पर क्लिक करने वालों की संख्या कुल संख्या से काफी कम है।
और जिन लोगों ने क्लिक किया और महसूस किया कि कुछ भी नहीं हो रहा था, बस छोड़ दिया। (यह ध्यान देने योग्य है कि गतिविधि केवल पहले बटन पर समाप्त होती है)

निष्कर्ष: यदि आप चाहते हैं कि बटन दबाया जाए, तो होवर करते समय आपको अपनी स्थिति बदलनी होगी, कर्सर को बदलना होगा, या दबाए जाने पर कार्रवाई करना होगा।

बटन जो दिखता है

बटन का आकार 200 + px x 48px है और जैसा कि आप देख सकते हैं, लगभग 100% क्लिक्स अंदर हैं, जो पैराग्राफ 1 की पुष्टि करता है।

बटन के केंद्र में अधिकांश क्लिक स्क्रीन के केंद्र में थोड़ी सी बदलाव के साथ होती हैं (~ 12px)

निष्कर्ष: स्क्रीन के मध्य भाग के पास पर्याप्त आकार का एक बटन एक लाभ है।

उपसंहार

तो मैं यह सब क्यों कर रहा हूँ? आप ux / ui के बारे में बहुत सारे लेख पढ़ सकते हैं, उपयोगकर्ता सामग्री स्कैनिंग के अध्ययन पैटर्न और YouTube पर वीडियो देख सकते हैं।
लेकिन 1 बार से बेहतर है ~~देखना~~ कहानियों को सुनने की तुलना में मीट्रिक सीखें।

मीट्रिक कनेक्ट करें और अपने परिणाम साझा करें :)

क्लिक का हीटमैप - उपयोगकर्ता साइट पर कैसे व्यवहार करते हैं

आज बात करते हैं बटनों की

हैमबर्गर

लिंक की सूची

युक्तियाँ

बटन जो दिखता है

उपसंहार

More articles: