بلوک کردن ظاهر

ظاهر بلوک ها سرنخ های مهمی در مورد نحوه استفاده از آنها ارائه می دهد. در اینجا مواردی وجود دارد که باید هنگام طراحی بلوک های خود در نظر بگیرید.

از حاشیه های قابل مشاهده استفاده کنید

در دهه 2000، ظاهر «آکوا» شیک بود و هر شیء روی صفحه با برجسته‌سازی و سایه‌ها تزئین می‌شد. در دهه 2010، ظاهر «طراحی مواد» به سبک ظاهر شد و هر شیء روی صفحه به شکلی تمیز، صاف و بدون حاشیه ساده شد. اکثر محیط‌های برنامه‌نویسی بلوک دارای برجسته‌سازی و سایه‌هایی در اطراف هر بلوک هستند، بنابراین وقتی طراحان گرافیک امروزی این را می‌بینند، همیشه این تزئینات قدیمی را از بین می‌برند.

همانطور که در مثال بالا از پنج بلوک (از scriptr.io) مشاهده می شود، این "تزیینات قدیمی" برای تشخیص بلوک های متصل که همرنگ هستند، حیاتی هستند.

توصیه: اگر Blockly را مجدداً تغییر می دهید، اجازه ندهید مدهای امروزی برنامه شما را خراب کنند.

فلش های جهت دار را اضافه کنید

بازخورد کودکان در ایالات متحده (البته جالب است که نه از کشورهای دیگر) سردرگمی گسترده بین چپ و راست را نشان داد. این با اضافه کردن فلش حل شد. اگر جهت نسبی است (مثلاً نسبت به آواتار)، سبک پیکان مهم است. یک فلش → مستقیم یا یک فلش چرخشی ↱ زمانی که آواتار در جهت مخالف باشد گیج کننده است. مفیدترین فلش دایره ای ⟳ است، حتی در مواردی که زاویه چرخش کوچکتر از آن است که فلش نشان می دهد.

توصیه: در صورت امکان متن را با نمادهای یونیکد تکمیل کنید.

از اتصال دهنده های افقی و عمودی مختلف استفاده کنید

Blockly دارای دو نوع اتصال مختلف است: شکل های پازل افقی و بریدگی های انباشته عمودی. یک رابط کاربری خوب باید تلاش کند تا تعداد عناصر طراحی را به حداقل برساند. بر این اساس، بسیاری از طراحان سعی می کنند هر دو نوع اتصال را یکسان جلوه دهند (مانند شکل زیر).

نتیجه باعث ایجاد سردرگمی در بین کاربران جدید می شود زیرا آنها به دنبال راه هایی برای چرخاندن بلوک ها هستند تا بتوانند در اتصالات ناسازگار قرار گیرند. Blockly عناصر برنامه‌نویسی را بصری و ملموس می‌کند، بنابراین باید توجه داشته باشید که تعاملات غیرعمدی کاربر را پیشنهاد می‌کند که پشتیبانی نمی‌شوند.

بر این اساس، Blockly از یک شکل پازل محکم برای اتصالات ارزش، و یک شکاف تراز بصری متمایز برای انباشتن بیانیه استفاده می‌کند.

توصیه: اگر Blockly مجدداً پوسته می شود، اطمینان حاصل کنید که اتصالات افقی و عمودی متفاوت به نظر می رسند.

نشان دهید که عبارات تودرتو را می توان روی هم قرار داد

بلوک‌های C شکل همیشه دارای یک رابط در قسمت داخلی بالایی هستند، اما برخی از محیط‌ها همچنین دارای یک رابط در قسمت پایین داخلی هستند (مثلاً Wonder Workshop) در حالی که سایر محیط‌ها این اتصال را ندارند (مانند Blockly و Scratch). از آنجایی که اکثر بلوک‌های دستورات دارای هر دو رابط بالا و پایین هستند، برخی از کاربران بلافاصله متوجه نمی‌شوند که عبارت‌ها در یک «C» قرار می‌گیرند که رابط پایینی ندارد.

هنگامی که کاربران متوجه شدند که یک بلوک عبارت در داخل یک "C" قرار می گیرد، سپس باید بفهمند که بیش از یک عبارت نیز جا می شود. برخی از محیط‌ها اتصال پایین عبارت اول را در پایین «C» قرار می‌دهند (مثلاً Wonder Workshop و Scratch) در حالی که برخی دیگر یک شکاف کوچک ایجاد می‌کنند (مانند Blockly). تودرتوی راحت هیچ اشاره ای به این ندارد که بلوک های بیشتری می توانند روی هم چیده شوند.

این دو موضوع با یکدیگر تعامل بدی دارند. اگر یک رابط پایین داخلی وجود داشته باشد (Wonder Workshop)، آنگاه ارتباط عبارت اولیه آشکارتر می شود، اما به قیمت توانایی کشف انباشته شدن. اگر هیچ کانکتور داخلی پایینی وجود نداشته باشد (Blockly)، اتصال عبارت اولیه واضح نیست، اما انباشتگی قابل کشف است. نداشتن کانکتور داخلی پایین و تودرتو کردن کانکتور پایینی بیانیه (Scratch) هنگام آزمایش با Blockly بدترین عملکرد را برای قابلیت کشف داشت.

تجربه ما این بود که اتصال بیانیه اولیه چالش کمتری برای کاربران نسبت به کشف انباشته است. و پس از کشف، اولی هرگز فراموش نمی شود، در حالی که دومی نیاز به تلقین دارد. Blockly هر دو روش Wonder Workshop و Scratch را امتحان کرد تا اینکه یک روز یک اشکال رندر رخ داد که شکاف کوچکی را اضافه کرد. با توجه به این باگ، ما شاهد بهبود قابل توجهی در مطالعات کاربران با Blockly بودیم (اکنون یک «ویژگی» که ما به آن افتخار می کنیم).

توصیه: اگر Blockly را مجدداً انجام می دهید، رابط کاربری موجود را ترک کنید.