Prototyping Interaction

بواسطة: iversity

Overview

Prototyping means making your ideas tangible. With prototypes you can communicate, test and iterate on your design. In this course you’ll learn the different methods of prototyping by sketching, building and testing.

Prototyping is a skill every designer should master, since it's the most effective, fast and often cheapest way to make your ideas tangible and communicate them. In this course you'll learn to think by using your hands to make your design a better experience for your end users by sketching, experimenting, making and testing.

In this six week course, you will be working on a prototype for a concept you’ll develop in the first weeks involving a mobile device. You will be exploring different types of prototyping, from paper prototypes to a digital prototype and eventually even a physical prototype.

In a world where we have to deal with new technologies on a daily basis, the prototyping process will help you understand the user and the way he or she interacts with these new and existing technologies. Understanding and executing this process will make your design stronger and more valuable to the end user.

What will I learn?

By the end of the course you know how to incorporate prototyping interaction in your design process. This will not only make your design process more effective, it will also help you to get new insights about the user and the way he or she interacts with your product or service.

What do I need to know?

Prior knowledge is not required, but some practical experience in UX design, interaction design and design principles is recommended. Be aware of the fact that you can earn two types of certificates. Chapter 1 to 4 will earn you a certificate covering prototyping for user experience for mobile devices. The second version (chapter 1 to 6) includes physical prototyping. For this you need to purchase a physical prototyping tool (e.g. a Makey Makey, an Arduino or a Touchboard) prior to, or at the start of week 4 of the course.

Syllabus

Chapter 1: Mapping the context and communicating your concept with a storyboard.

In the first chapter you'll be thinking of a solution that contains a smartphone or tablet.

Chapter 2: Generating and designing ideas for an interface with a paper prototype.

In chapter 2 you will be iterating on your concept using the feedback from your peers. You'll be sketching a paper prototype to explore what role the mobile device you chose has in the user journey.

Chapter 3: Testing your idea on your user with a paper prototype.

Chapter 3 is all about testing. Using the feedback on your three concepts of last week, you will choose one concept and test it on several end users.

Chapter 4: Validating your design with a digital prototype.

Now that you've been brainstorming, sketching and testing, it's time to make your concept tangible. You will be making a digital prototype using a digital prototyping tool and test it on an end user.

Chapter 5: Remapping the interaction in your design and communicate it using a physical prototype.

Review your design from last week and extend in to the physical world. You’ll be working on a prototype of a smart object (other than a smartphone) and test in on an end user.

Chapter 6: Experimenting with your design and test it using your physical prototype.

In the final chapter, you will use your feedback from you users and peers to iterate on your design using a physical prototyping tool such as an Arduino or Makey Makey.

Taught by

Maaike van Cruchten and Frank Kloos

Prototyping Interaction
الذهاب الي الدورة

Prototyping Interaction

بواسطة: iversity

  • iversity
  • مجانية
  • الإنجليزية
  • متاح شهادة
  • متاح في أي وقت
  • الجميع
  • N/A
8.1.2PHP Version1.05sRequest Duration2MBMemory UsageGET ar/الدورات/{slug}Route
    • Booting (643ms)
    • Application (408ms)
    • 1 x Booting (61.02%)
      642.87ms
      1 x Application (38.75%)
      408.29ms
      14 templates were rendered
      • public.courses.show (resources/views/public/courses/show.blade.php)3bladefile
        Params
        0
        course
        1
        links
        2
        config
      • public.courses.partials.breadcrumbs (resources/views/public/courses/partials/breadcrumbs.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.heading (resources/views/public/courses/partials/heading.blade.php)7bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        classes
      • public.courses.partials.details (resources/views/public/courses/partials/details.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.breadcrumbs (resources/views/public/courses/partials/breadcrumbs.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.courses.partials.heading (resources/views/public/courses/partials/heading.blade.php)7bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        classes
      • public.layouts.main (resources/views/public/layouts/main.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.layouts.partials.meta (resources/views/public/layouts/partials/meta.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.layouts.partials.navbar (resources/views/public/layouts/partials/navbar.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.auth.profile.partials.links (resources/views/public/auth/profile/partials/links.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.auth.profile.partials.link (resources/views/public/auth/profile/partials/link.blade.php)8bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
        6
        route
        7
        title
      • public.layouts.partials.flash-session (resources/views/public/layouts/partials/flash-session.blade.php)6bladefile
        Params
        0
        __env
        1
        app
        2
        errors
        3
        course
        4
        links
        5
        config
      uri
      GET ar/الدورات/{slug}
      middleware
      web, localize:ar
      controller
      App\Http\Controllers\CourseController@show
      as
      ar.courses.show
      namespace
      prefix
      /ar
      where
      file
      app/Http/Controllers/CourseController.php:17-35
      6 statements were executed11.09ms
      • select * from `courses` where `slug_ar` = 'prototyping-interaction' limit 1
        9.5ms/app/Http/Controllers/CourseController.php:20corspedia
        Metadata
        Bindings
        • 0. prototyping-interaction
        Backtrace
        • 17. /app/Http/Controllers/CourseController.php:20
        • 18. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 19. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 20. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • update `courses` set `visitors` = `visitors` + 1, `courses`.`updated_at` = '2025-06-20 16:08:46' where `id` = 741
        620μs/app/Http/Controllers/CourseController.php:21corspedia
        Metadata
        Bindings
        • 0. 2025-06-20 16:08:46
        • 1. 741
        Backtrace
        • 17. /app/Http/Controllers/CourseController.php:21
        • 18. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 19. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 20. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select `id`, `name_en`, `name_ar`, `topic_id`, `slug_en`, `slug_ar` from `subjects` where `subjects`.`id` in (26)
        260μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 20. /app/Http/Controllers/CourseController.php:23
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 22. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 23. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 24. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select `id`, `name_en`, `name_ar`, `slug_en`, `slug_ar` from `topics` where `topics`.`id` in (1)
        200μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 25. /app/Http/Controllers/CourseController.php:23
        • 26. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 27. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 28. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 29. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select * from `providers` where `providers`.`id` in (16) and `providers`.`deleted_at` is null
        250μs/app/Http/Controllers/CourseController.php:23corspedia
        Metadata
        Backtrace
        • 20. /app/Http/Controllers/CourseController.php:23
        • 21. /vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54
        • 22. /vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php:43
        • 23. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:260
        • 24. /vendor/laravel/framework/src/Illuminate/Routing/Route.php:205
      • select * from `html_files` where `html_files`.`id` = 735 limit 1
        260μs/app/Models/Course.php:84corspedia
        Metadata
        Bindings
        • 0. 735
        Backtrace
        • 21. /app/Models/Course.php:84
        • 28. view::public.courses.show:29
        • 30. /vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:125
        • 31. /vendor/laravel/framework/src/Illuminate/View/Engines/PhpEngine.php:58
        • 32. /vendor/laravel/framework/src/Illuminate/View/Engines/CompilerEngine.php:72
      App\Models\HtmlFile
      1
      App\Models\Provider
      1
      App\Models\Topic
      1
      App\Models\Subject
      1
      App\Models\Course
      1
        _token
        5BFk9vholMWaYolKTvMJnZE2BxeeoGctjgzjI6ii
        locale
        ar
        _previous
        array:1 [ "url" => "https://www.corspedia.com/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/protot...
        _flash
        array:2 [ "old" => [] "new" => [] ]
        PHPDEBUGBAR_STACK_DATA
        []
        path_info
        /ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/prototyping-interaction
        status_code
        200
        
        status_text
        OK
        format
        html
        content_type
        text/html; charset=UTF-8
        request_query
        []
        
        request_request
        []
        
        request_headers
        0 of 0
        array:24 [ "cf-ipcountry" => array:1 [ 0 => "US" ] "cf-connecting-ip" => array:1 [ 0 => "216.73.216.253" ] "cdn-loop" => array:1 [ 0 => "cloudflare; loops=1" ] "x-forwarded-proto" => array:1 [ 0 => "https" ] "x-forwarded-for" => array:1 [ 0 => "216.73.216.253" ] "sec-fetch-site" => array:1 [ 0 => "none" ] "accept" => array:1 [ 0 => "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7" ] "user-agent" => array:1 [ 0 => "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)" ] "upgrade-insecure-requests" => array:1 [ 0 => "1" ] "sec-ch-ua-platform" => array:1 [ 0 => ""Windows"" ] "sec-ch-ua-mobile" => array:1 [ 0 => "?0" ] "sec-ch-ua" => array:1 [ 0 => ""Chromium";v="130", "HeadlessChrome";v="130", "Not?A_Brand";v="99"" ] "cache-control" => array:1 [ 0 => "no-cache" ] "pragma" => array:1 [ 0 => "no-cache" ] "sec-fetch-dest" => array:1 [ 0 => "document" ] "cf-ray" => array:1 [ 0 => "952c86d1abcaf14f-ORD" ] "accept-encoding" => array:1 [ 0 => "gzip, br" ] "priority" => array:1 [ 0 => "u=0, i" ] "sec-fetch-user" => array:1 [ 0 => "?1" ] "sec-fetch-mode" => array:1 [ 0 => "navigate" ] "cf-visitor" => array:1 [ 0 => "{"scheme":"https"}" ] "host" => array:1 [ 0 => "www.corspedia.com" ] "content-length" => array:1 [ 0 => "" ] "content-type" => array:1 [ 0 => "" ] ]
        request_server
        0 of 0
        array:50 [ "USER" => "www-data" "HOME" => "/var/www" "HTTP_CF_IPCOUNTRY" => "US" "HTTP_CF_CONNECTING_IP" => "216.73.216.253" "HTTP_CDN_LOOP" => "cloudflare; loops=1" "HTTP_X_FORWARDED_PROTO" => "https" "HTTP_X_FORWARDED_FOR" => "216.73.216.253" "HTTP_SEC_FETCH_SITE" => "none" "HTTP_ACCEPT" => "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7" "HTTP_USER_AGENT" => "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)" "HTTP_UPGRADE_INSECURE_REQUESTS" => "1" "HTTP_SEC_CH_UA_PLATFORM" => ""Windows"" "HTTP_SEC_CH_UA_MOBILE" => "?0" "HTTP_SEC_CH_UA" => ""Chromium";v="130", "HeadlessChrome";v="130", "Not?A_Brand";v="99"" "HTTP_CACHE_CONTROL" => "no-cache" "HTTP_PRAGMA" => "no-cache" "HTTP_SEC_FETCH_DEST" => "document" "HTTP_CF_RAY" => "952c86d1abcaf14f-ORD" "HTTP_ACCEPT_ENCODING" => "gzip, br" "HTTP_PRIORITY" => "u=0, i" "HTTP_SEC_FETCH_USER" => "?1" "HTTP_SEC_FETCH_MODE" => "navigate" "HTTP_CF_VISITOR" => "{"scheme":"https"}" "HTTP_HOST" => "www.corspedia.com" "REDIRECT_STATUS" => "200" "SERVER_NAME" => "corspedia.com" "SERVER_PORT" => "443" "SERVER_ADDR" => "141.95.147.152" "REMOTE_USER" => "" "REMOTE_PORT" => "36444" "REMOTE_ADDR" => "172.70.130.52" "SERVER_SOFTWARE" => "nginx/1.18.0" "GATEWAY_INTERFACE" => "CGI/1.1" "HTTPS" => "on" "REQUEST_SCHEME" => "https" "SERVER_PROTOCOL" => "HTTP/2.0" "DOCUMENT_ROOT" => "/var/www/corspedia/public" "DOCUMENT_URI" => "/index.php" "REQUEST_URI" => "/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/prototyping-interaction" "SCRIPT_NAME" => "/index.php" "CONTENT_LENGTH" => "" "CONTENT_TYPE" => "" "REQUEST_METHOD" => "GET" "QUERY_STRING" => "" "SCRIPT_FILENAME" => "/var/www/corspedia/public/index.php" "PATH_INFO" => "" "FCGI_ROLE" => "RESPONDER" "PHP_SELF" => "/index.php" "REQUEST_TIME_FLOAT" => 1750435725.3385 "REQUEST_TIME" => 1750435725 ]
        request_cookies
        []
        
        response_headers
        0 of 0
        array:5 [ "content-type" => array:1 [ 0 => "text/html; charset=UTF-8" ] "cache-control" => array:1 [ 0 => "no-cache, private" ] "date" => array:1 [ 0 => "Fri, 20 Jun 2025 16:08:46 GMT" ] "set-cookie" => array:2 [ 0 => "XSRF-TOKEN=eyJpdiI6ImllaVhDVnJ6c2lycGNHcnQ5Uy91N3c9PSIsInZhbHVlIjoiZUZDZGNOa1B1WEk5dmNCWHJ6NHRWU1hPbVFBQWdzU2ZEWGlWSmZPeXphb05xWW1hRlhOdmNvd1BpRnlUaHkvNnRTU1k5ejgwcnVhcVM4YXZYTEVhRklNUnNuTU14QnU1eWs0Y3ROaXB6emRIRjFJKzUzeEpPQnFoaE1pQkQvaHQiLCJtYWMiOiJiMzhlOWZiZmEyZjk1NDQxMDA0NDZiNDEzODk0Y2ZmMTIwMzhkMjNjMzJhMGQ5NGZkMzIyOTE3NjM5ZDZlMGQ2IiwidGFnIjoiIn0%3D; expires=Fri, 20 Jun 2025 18:08:46 GMT; Max-Age=7200; path=/; samesite=laxXSRF-TOKEN=eyJpdiI6ImllaVhDVnJ6c2lycGNHcnQ5Uy91N3c9PSIsInZhbHVlIjoiZUZDZGNOa1B1WEk5dmNCWHJ6NHRWU1hPbVFBQWdzU2ZEWGlWSmZPeXphb05xWW1hRlhOdmNvd1BpRnlUaHkvNnRTU1k5e" 1 => "laravel_session=eyJpdiI6ImN4dnlWeXlDSUxhS2lUclVjMmJFRXc9PSIsInZhbHVlIjoieVkvall1ZEk3WUdJVklkWWdtUzN2MDJYeVJEREVGeVhCYVB4M28wMlhyeENyL3VTQWp2cXUvNzVTZ3VxeWlOVGwxU0lyNXEwYVcydzY2MnFXOEhoNzYzWlVyMEF1dXltck05dTVCd0RIQjFHL0R6YzZIUDNNL0dEWUdVUXc1ZVIiLCJtYWMiOiJiNDkxYzY3ZWM4MmQ4NmM3NTA1YTc5MWFjMDA5YmYyOGMxZGQ3NzE3MGZlNGExZDQ3NzM2ZDAwYTYxNzIxMWNiIiwidGFnIjoiIn0%3D; expires=Fri, 20 Jun 2025 18:08:46 GMT; Max-Age=7200; path=/; httponly; samesite=laxlaravel_session=eyJpdiI6ImN4dnlWeXlDSUxhS2lUclVjMmJFRXc9PSIsInZhbHVlIjoieVkvall1ZEk3WUdJVklkWWdtUzN2MDJYeVJEREVGeVhCYVB4M28wMlhyeENyL3VTQWp2cXUvNzVTZ3VxeWlOVGwx" ] "Set-Cookie" => array:2 [ 0 => "XSRF-TOKEN=eyJpdiI6ImllaVhDVnJ6c2lycGNHcnQ5Uy91N3c9PSIsInZhbHVlIjoiZUZDZGNOa1B1WEk5dmNCWHJ6NHRWU1hPbVFBQWdzU2ZEWGlWSmZPeXphb05xWW1hRlhOdmNvd1BpRnlUaHkvNnRTU1k5ejgwcnVhcVM4YXZYTEVhRklNUnNuTU14QnU1eWs0Y3ROaXB6emRIRjFJKzUzeEpPQnFoaE1pQkQvaHQiLCJtYWMiOiJiMzhlOWZiZmEyZjk1NDQxMDA0NDZiNDEzODk0Y2ZmMTIwMzhkMjNjMzJhMGQ5NGZkMzIyOTE3NjM5ZDZlMGQ2IiwidGFnIjoiIn0%3D; expires=Fri, 20-Jun-2025 18:08:46 GMT; path=/XSRF-TOKEN=eyJpdiI6ImllaVhDVnJ6c2lycGNHcnQ5Uy91N3c9PSIsInZhbHVlIjoiZUZDZGNOa1B1WEk5dmNCWHJ6NHRWU1hPbVFBQWdzU2ZEWGlWSmZPeXphb05xWW1hRlhOdmNvd1BpRnlUaHkvNnRTU1k5e" 1 => "laravel_session=eyJpdiI6ImN4dnlWeXlDSUxhS2lUclVjMmJFRXc9PSIsInZhbHVlIjoieVkvall1ZEk3WUdJVklkWWdtUzN2MDJYeVJEREVGeVhCYVB4M28wMlhyeENyL3VTQWp2cXUvNzVTZ3VxeWlOVGwxU0lyNXEwYVcydzY2MnFXOEhoNzYzWlVyMEF1dXltck05dTVCd0RIQjFHL0R6YzZIUDNNL0dEWUdVUXc1ZVIiLCJtYWMiOiJiNDkxYzY3ZWM4MmQ4NmM3NTA1YTc5MWFjMDA5YmYyOGMxZGQ3NzE3MGZlNGExZDQ3NzM2ZDAwYTYxNzIxMWNiIiwidGFnIjoiIn0%3D; expires=Fri, 20-Jun-2025 18:08:46 GMT; path=/; httponlylaravel_session=eyJpdiI6ImN4dnlWeXlDSUxhS2lUclVjMmJFRXc9PSIsInZhbHVlIjoieVkvall1ZEk3WUdJVklkWWdtUzN2MDJYeVJEREVGeVhCYVB4M28wMlhyeENyL3VTQWp2cXUvNzVTZ3VxeWlOVGwx" ] ]
        session_attributes
        0 of 0
        array:5 [ "_token" => "5BFk9vholMWaYolKTvMJnZE2BxeeoGctjgzjI6ii" "locale" => "ar" "_previous" => array:1 [ "url" => "https://www.corspedia.com/ar/%D8%A7%D9%84%D8%AF%D9%88%D8%B1%D8%A7%D8%AA/prototyping-interaction" ] "_flash" => array:2 [ "old" => [] "new" => [] ] "PHPDEBUGBAR_STACK_DATA" => [] ]