Дослідження UX-дизайну сайтів-конкурентів та виявлення помилок. Лабораторна робота з Проектування людино комп ютерної взаємодії. Робота № 100694

Перехід до торгівельного партнера Binance

Дослідження UX-дизайну сайтів-конкурентів та виявлення помилок

Інформація про навчальний заклад

ВУЗ:

Українська академія друкарства

Інститут:

Не вказано

Факультет:

ВПІТ

Кафедра:

Кафедра комп ютерних наук та інформаційних технологій

Інформація про роботу

Рік:

2023

Тип роботи:

Лабораторна робота

Предмет:

Проектування людино комп ютерної взаємодії

Група:

КН 32

Завантажити

Частина тексту файла (без зображень, графіків і формул):

Міністерство освіти і науки України Українська академія друкарства ЗВІТ з лабораторної роботи №1 на тему “Дослідження веб-ресурсів тестувально-навчаючих систем з ергономічної точки зору та виявлення типових помилок” Мета: дослідити веб-ресурси тестувально-навчаючих систем та виявити ключові помилки UX-дизайну Сайти які схожі за тематикою: https://prometheus.org.ua/ Prometheus https://moodle.uad.edu.ua/my/ Moodle https://www.coursera.org/ Coursera https://classroom.google.com/u/0/ Google Classroom https://www.codecademy.com/ Codeacademy Основні помилки UX-дизайну Проаналізуємо перший веб-сайт Prometheus./ 1.1 Ігнорування потреб цільової аудиторії Як на мене, це правило тут не порушено. Дизайн підходить як для учнів\студентів, так і для викладачів та людей середньої вікової категорії, тобто якраз для тих, хто має намір активно щось вчити або викладати. Щодо зручності, подобається що верхня стрічка з пошуком та входом у особистий кабінет завжди присутня, тобто про комфорт користувача подбали. Сайт позиціонує себе як “Найкраща освіта для всіх”, тому зроблений доволі просто та зрозуміло, багато інформації на вітальній сторінці про сам сайт, його мету та ціль. Як користувачу, мені б хотілось познайомитись з ним краще, тому вважаю його хорошим прикладом для наслідування. 1.2 . Автовідтворення аудіо/відео Такого на головній сторінці немає. Якщо брати окремі курси, на них завжди вказано чи є там відео\аудіо, і ввімкнути їх потрібно самотужки. 1.3 Надлишковість Насправді на Prometheus все досить продумано. Вся важлива інформація розміщена на головній сторінці сайту, але в порядку важливості. Ця сторінка громіздка, але якщо вам потрібно щось конкретне ви не змушені перечитувати все, щоб знайти це. Стиль мінімалістичний, через це не важко знаходитись на сайті тривалий час, є яскраві акценти через що дивитись приємно. 1.4 Неправильні форми Щодо валідації, є можливість зареєструватись або ввійти за допомогою Google аккаунту, або Facebook аккаунту, що дуже спрощує вхід. Питання прості та логічні. Користувач не потребуватиме більше ніж кілька хвилин на реєстрацію. 1.5 Проблеми авторизації/виходу Авторизація проста, про це був минулий пункт. Щодо виходу з профілю, все теж просто, потрібно обрати кнопку “Вийти”. / 1.6 Мобільні пристрої На мобільному пристрої трішки змінене розміщення елементів та вигляд, але все залишилось доступним та зручним. Має спеціальний мобільний додаток. / 1.7 Правило 3-х кліків Правило виконується, всі курси можна почати виконувати за цим правилом./ 1.8 Відсутність інтуїтивності Щодо попередніх скрінів, можна помітити що інтуїтивність присутня. Здебільшого, коли є якась важлива інформація або функція, кнопки підписані, якщо ж ні, символи дозволяють зрозуміти за що відповідають певні кнопки, як з пошуком у мобільній версії сайту. 1.9 Колірна гама Є правило, що основних кольорів має бути до 3. Тут тенденція виконується, основні кольори - білий, синій та оранжевий. Кольори правильно поєднуються за колірною гамою, тому пункт виконаний. 1.10 Технічна оптимізація Щодо завантаження сайту, то грузиться він швидко. Щоб перейти на інші вкладки достатньо секунди, так само і з завантаженням самого сайту. Проблеми немає. Проаналізуємо веб-сайт Moodle. / 1.1 Ігнорування потреб цільової аудиторії Moodle - це вільна та відкрита платформа для управління навчанням, яка дозволяє інститутам налаштовувати навчальні процеси під свої потреби, що робить її дуже гнучкою для використання з різними аудиторіями. 1.2 . Автовідтворення аудіо/відео Сайт розрахований на поширення інформації тому є можливість завантаженого відео або посилання на це відео, відповідно автоматично воно не вмикається, отже, проблема відсутня. 1.3 Надлишковість Сайт у мінімалістичному стилі, та є часткове враження що дизайн не є закінченим. Щодо надлишковості, з правого боку занадто багато інформації якщо порівняти з іншими ділянками сайту, можливо для такого краще зробити окреме меню. Хоча, конкретна конфігурація може бути налаштована до потреб користувачів, тому тут все індивідуально. 1.4 Неправильні форми / Можливість зареєструвати акаунт є лише у навчального закладу який користується сайтом. Через це вхід для більшості користувачів максимально простий та зручний. 1.5 Проблеми авторизації/виходу Проблеми авторизації можуть бути хіба через технічні неполадки, коли є проблема інтернету або ж сервер не переплачений. Вийти з сайту досить просто. / 1.6 Мобільні пристрої Має спеціальний мобільний додаток. Мобільна версія браузера дуже зручна та виглядає красиво. Враження що сайт розробляли в першу чергу для мобільного користування. / / 1.7 Правило 3-х кліків Можливість швидко знаходити необхідну інформацію та завдання залежить від конкретної конфігурації курсу в Moodle, але загалом платформа надає інструменти для ефективного навчання. 1.8 Відсутність інтуїтивності Особливо добре помітно інтуїтивність в мобільній версії, відвідувач має здебільшого орієнтуватись на символах, але все зрозуміло, принаймні для аудиторії віком до 50 років. 1.9 Колірна гама З колірною гамою проблем також немає, адже головні кольори - оранжевий, білий та сірий. Інколи ще є синій або голубий, всі кольори гарно поєднуються та не ріжуть око, паралельно сайт не виглядає нудним. 1.10 Технічна оптимізація З технічною оптимізацію зазвичай все добре, проте коли період сесії, сайт може лягти від кількості активних осіб. Проаналізуємо веб-сайт Coursera. / / 1.1 Ігнорування потреб цільової аудиторії Сайт мінімалістичний та зручний, немає думки про конкретну аудиторію, дизайн розроблений для всіх. На кнопках зазвичай надписи, що допомагають орієнтуватись у функціях, до цього пункту претензій немає. 1.2 . Автовідтворення аудіо/відео Такого також немає, є в курсах посилання або завантажені відео, але ввімкнути їх доведеться самотужки. Тому проблема відсутня. 1.3 Надлишковість Сайт у мінімалістичному стилі. Багато вільного простору, інформація не губиться, все як слід. 1.4 Неправильні форми Щодо форм, наприклад аутентифікації, все максимально спрощено для користувача. Можна ввійти за аккаунтами з: Google, Apple, Facebook. 1.5 Проблеми авторизації/виходу Їх також немає. Єдиною проблемою може бути відсутність інтернету. / 1.6 Мобільні пристрої Має спеціальний мобільний додаток. Але в браузерній версії також все добре. / 1.7 Правило 3-х кліків Виконується, якщо зайти у профіль, то часто достатньо лише двох кліків. 1.8 Відсутність інтуїтивності Інтуїтивність є через малу кількість кнопок та деталей. 1.9 Колірна гама Переважають білий та синій, для тексту використали чорний та його відтінки. По гамі сайт не перевантажений та вся увага звертається безпосередньо на курси та їх кольорові заставки. 1.10 Технічна оптимізація Сайт швидкий, напевно найшвидший з усіх 3 попередніх. Під час користування жодних проблем з боку технічної оптимізації не помічала. Проаналізуємо веб-сайт Classroom. / 1.1 Ігнорування потреб цільової аудиторії Сайт спеціально розроблений для освітніх потреб і надає вчителям та учням зручну платформу для навчання та взаємодії, враховуючи їх потреби. 1.2 . Автовідтворення аудіо/відео Google Classroom не має автовідтворення аудіо або відео без згоди користувача, що сприяє хорошому досвіду користувача. 1.3 Надлишковість Платформа надає необхідні функції для ведення уроків та завдань, але не перевантажує користувачів надмірними функціями. 1.4 Неправильні форми Форми на Google Classroom чіткі та легкі в користуванні, щоб вчителі могли створювати завдання та учні надсилати відповіді без проблем. 1.5 Проблеми авторизації/виходу Процес авторизації та виходу з Google Classroom є безпечним та зручним. Зайти можна за Google аккаунтом, а вийти дуже просто. / 1.6 Мобільні пристрої Має спеціальний мобільний додаток та адаптивний дизайн веб-версії, що дозволяє користувачам зручно використовувати платформу на мобільних пристроях. 1.7 Правило 3-х кліків Важливу інформацію та інструменти можна знайти на Google Classroom без зайвих кліків, що сприяє зручності використання. 1.8 Відсутність інтуїтивності Google Classroom має досить інтуїтивний і дружелюбний інтерфейс для вчителів та учнів. 1.9 Колірна гама Дизайн Google Classroom приємний для очей та сприяє комфортному використанню. 1.10 Технічна оптимізація Платформа Google Classroom технічно оптимізована та надає стабільний доступ для користувачів. Проаналізуємо веб-сайт Codeacademy. / // 1.1 Ігнорування потреб цільової аудиторії Codecademy зазвичай спрямований на початківців та інтермедійних програмістів, і він надає багато безкоштовного вмісту та інтерактивних завдань, що відповідають цільовій аудиторії. 1.2 . Автовідтворення аудіо/відео За звичайних обставин, Codecademy не використовує автовідтворення аудіо або відео без згоди користувача, що сприяє хорошому досвіду користувача. 1.3 Надлишковість Сайт намагається надати обширний контент для вивчення програмування, але іноді це може здаватися надлишковим для новачків. Проте це залежить від індивідуальних потреб користувачів. 1.4 Неправильні форми Веб-сайт Codecademy має вищу ступінь візуальної чистоти та легкості використання, і неправильні форми малоймовірні. 1.5 Проблеми авторизації/виходу Зазвичай Codecademy має добре функціонуючий процес авторизації та виходу. Проте можливі проблеми можуть залежати від конкретних ситуацій і пристроїв користувачів. 1.6 Мобільні пристрої Має спеціальний мобільний додаток, що дозволяє користувачам зручно вивчати програмування на мобільних пристроях. 1.7 Правило 3-х кліків Codecademy намагається зменшити кількість кліків, необхідних для досягнення основних функцій, але можливо, що на деяких сторінках або в меню є простори для покращення. 1.8 Відсутність інтуїтивності Веб-сайт зазвичай має досить інтуїтивний і дружелюбний інтерфейс для новачків у програмуванні. Проте вдосконалення може бути завжди корисним. 1.9 Колірна гама Codecademy використовує сучасну та привабливу колірну гаму, яка зазвичай сприяє зручності та привабливості сайту. Кольори добре поєднуються, сам сайт викликає асоціацію творчості. 1.10 Технічна оптимізація Технічна оптимізація є сильною стороною Codecademy, оскільки веб-сайт повинен бути стабільним і відповідати потребам користувачів у великому обсязі інтерактивного контенту та вправ. Проте, це може залежати від часу та конкретних технічних проблем, які можуть виникнути. ВИСНОВОК Щодо аналізу 5 Вебсайтів. Усі сайти стараються виконувати вимоги та задачі поставлені перед ними. Проаналізувавши їх можу сказати, що для користування випускають якісний та перевірений продукт, бо помилок по 10 пунктах фактично немає, є лише кілька побажань для вдосконалення, а саме: Я б не використовувала занадто багато кольорів для сайту за звичайних потреб для тестувально-навчальної системи, бо хотіла б, щоб основна увага зверталась саме на курси, або на вкладення які на ньому розміщені (у цьому плані мені найбільше сподобалась Coursera). Щодо вкладок з функціями, потрібно зробити головний сайт максимально простим, тому всі додаткові послуги були б в якомусь додатковому меню, звісно потрібно пам’ятати за правило 3-ох кліків.

Лабораторна робота Проектування людино комп ютерної взаємодії

sofiko

16.10.2023 10:10-

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, або зареєструйтесь.

Ділись своїми роботами та отримуй миттєві бонуси!

Маєш корисні навчальні матеріали, які припадають пилом на твоєму комп'ютері? Розрахункові, лабораторні, практичні чи контрольні роботи — завантажуй їх прямо зараз і одразу отримуй бали на свій рахунок! Заархівуй всі файли в один .zip (до 100 МБ) або завантажуй кожен файл окремо. Внесок у спільноту – це легкий спосіб допомогти іншим та отримати додаткові можливості на сайті. Твої старі роботи можуть приносити тобі нові нагороди!

поділитись