Medien Wiki - User contributions [en]

IFD:Kolloq WS15

2016-01-04T07:57:10Z

Wessi:

[[:Category:Kolloquium|Kolloquium]] <br/>
''Lehrperson:'' [[Michael Markert]], [[Jason Reizner]], [[Martin Schied]]<br/>
''Bewertung:'' up to 6 [[ECTS]] (depending on the relevant study version), 2 [[SWS]]<br/>
''Termin:'' periodically Wednesdays, <span style="color:red">10:00 to 12:00 h</span><br/>
''Ort:'' Marienstraße 7b, Raum 101<br/>

''First Meeting:'' tba

==Beschreibung==
Das Interface-Design Kolloquium lädt unregelmäßig Mittwochs zu einem kleinen Vortrag aus der Praxis (von Studierenden, Gästen oder Mitarbeitern) ein. Im Anschluss wird über das Thema des Vortrags diskutiert.

==English description==
We are inviting students, guests and lecturers to present their works. There will be a brief discussion afterwards.

== Anmeldung ==
Der Besuch ist offen für alle und erfordert keine Anmeldung

==Zielgruppe==
Alle Bachelor- und Master-Studenten, Absolventen und Mitarbeiter der Professur Interface-Design.

== Hinweise für Vortragende ==

Normalerweise gibt es zwei Redner pro Termin. Es gibt einen Beamer (VGA-Connector!), wenn Sie Sound oder einen Computer benötigen, melden Sie sich bitte bei [[User:Mm|Michael]]. Falls Sie die Präsentation auf einem USB-Stick mitbringen, dann bitte entweder als Mac-Keynote oder als PDF. Wir haben nur eventuell Zugriff auf einen Windows-PC mit Powerpoint.

Ein Internetzugang steht über das WiFi Netzwerk "eduroam" zur Verfügung. Falls Sie kein Universitätslogin haben, melden Sie sich bitte rechtzeitig, damit wir einen Gastzugang beantragen können.

Sie können Ihre Vortragssprache (Deutsch/Englisch) frei wählen. Es sind jedoch üblicherweise 5 bis 10% fremdsprachige Teilnehmer anwesend, die i.d.R. besser Englisch als Deutsch verstehen.

Die Präsentation sollte eine Dauer von etwa ~20 Minuten haben. Bitte haben Sie Verständnis dafür, wenn wir nach spätestens 30 Minuten abbrechen, denn wir möchten noch genügend Zeit für Feedback, Fragen und kurze Anschlussdiskussionen haben.

== Notes for Speakers ==

If you feel you have something interesting to share, please contact us. We are always looking for interesting things to share and talk about.

Typically, we have two presentations per meeting. There is a projector with VGA Connector. If you need Sound or a Computer, please contact [[User:Mm|Michael]]. If you bring your presentation on a USB-Stick, please use either Mac-Keynote or PDF, because we may or may not find a Windows-PC with Powerpoint.

To connect to the internet, you can use the "eduroam" WiFi network. If you have no University login, please get in touch, so we can arrange a guest account.

The language of your talk (German/English) is up to you to decide. Usually, there are about 5 to 10% Students that understand English better than German.

The presentation should have a duration of about ~ 20 minutes. Please understand that we need to stop the talk after 30 minutes latest, because there should be time for feedback, questions and short discussions.

==Syllabus==
Vorläufiger Semesterplan:
BITTE MAXIMAL ZWEI VORTRÄGE PRO TERMIN!
DIE VERANSTALTUNG FINDET NUR STATT, WENN ES ZWEI VORTRÄGE GIBT!

# <del>Wed, 21.10. no meeting</del>
# <del>Wed, 28.10. no meeting</del>
# <del>Wed, 04.11. no meeting</del>
# <del>Wed, 11.11. no meeting</del>
# <del>Wed, 18.11. no meeting</del>
# Wed, 25.11. Antonia Volke (Master: Collaboration-Tool), Xiangzhen Lu (Master: Live Magnets)
# Wed, 02.12. no presentations
# Wed, 09.12. no presentations
# <del>Wed, 16.12. no meeting</del>
# Wed, 06.01. to be announced
# Wed, 13.01.
# Wed, 20.01. Tobias Westphal (Master: HistoGlobe)
# Wed, 03.02. Ashin Mandal and Mihail Mihaylov (Master: Topic to be announced)

ONLY TWO PRESENTATIONS PER DAY PLEASE!
THE KOLLOQUIUM WILL ONLY TAKE PLACE IF THERE ARE TWO PRESENTATIONS!

== Previous Semesters ==
* [[IFD:Kolloq SS15]]
* [[IFD:Kolloq WS14]]
* [[IFD:Kolloq SS14]]
* [[IFD:Kolloq WS13]]
* [[IFD:Kolloq SS12]]
* [[IFD:Kolloq WS12]]
* [[IFD:Kolloq SS13]]

==Links==
* tba

File:Tobias-westphal-14-15-hg-12.jpg

2015-01-29T12:40:14Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-11.jpg

2015-01-29T12:39:52Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-10.jpg

2015-01-29T12:39:31Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-09.jpg

2015-01-29T12:39:11Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-08.jpg

2015-01-29T12:38:47Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-07.jpg

2015-01-29T12:38:26Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-06.jpg

2015-01-29T12:37:31Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-05.jpg

2015-01-29T12:37:06Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-04.jpg

2015-01-29T12:36:45Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-03.jpg

2015-01-29T12:36:24Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tobias-westphal-14-15-hg-02.jpg

2015-01-29T12:36:03Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

IFD:ShowreelWS14/Tobias Westphal - HistoGlobe

2015-01-29T12:35:40Z

Wessi:

==HistoGlobe==
===Tobias Westphal===

[[File:Tobias-westphal-14-15-hg-01.jpg]]
[[File:Tobias-westphal-14-15-hg-02.jpg]]
[[File:Tobias-westphal-14-15-hg-03.jpg]]
[[File:Tobias-westphal-14-15-hg-04.jpg]]
[[File:Tobias-westphal-14-15-hg-05.jpg]]
[[File:Tobias-westphal-14-15-hg-06.jpg]]
[[File:Tobias-westphal-14-15-hg-07.jpg]]
[[File:Tobias-westphal-14-15-hg-08.jpg]]
[[File:Tobias-westphal-14-15-hg-09.jpg]]
[[File:Tobias-westphal-14-15-hg-10.jpg]]
[[File:Tobias-westphal-14-15-hg-11.jpg]]
[[File:Tobias-westphal-14-15-hg-12.jpg]]

IFD:ShowreelWS14/Tobias Westphal - HistoGlobe

2015-01-29T12:34:53Z

Wessi: Created page with "==HistoGlobe== ===Tobias Westphal==="

==HistoGlobe==
===Tobias Westphal===

File:Tobias-westphal-14-15-hg-01.jpg

2015-01-29T12:33:18Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

IFD:ShowreelWS14

2015-01-29T10:11:54Z

Wessi:

[[File:Showreel_ws14_plakat_20150107.png]]

<h3 style="color:#005172;">How to add your project</h3>

[http://www.youtube.com/watch?v=8rtEZEOPACw How-To Videocast]<br>
[[IFD:Showreel/Wie_stelle_ich_mein_Projekt_ins_Wiki%3F|How-To Manual]]<br>
[http://www.uni-weimar.de/medien/interfacedesign/showreel/?section=ShowreelWS14 Test Your Presentation]<br>
[[IFD:Showreel/Blank_Page|A Blank Test Page]]

<h3 style="color:#005172;">INFOS</h3>

'''Präsentation Wintersemester 2014'''<br>
Professur Interface Design<br>
Prof. Dr. Jens Geelhaar, Johannes Deich, Michael Markert, Gabriel Rausch, Martin Schied

'''29. Januar 2015'''<br>
'''ab 15:30 Uhr'''<br>
'''Audimax'''<br>

Die Präsentation der Professur Interface Design bietet die Möglichkeit,<br> einen Einblick in die Semesterarbeiten und die Inhalte der angebotenen Module zu<br> bekommen. Die Veranstaltung lädt nicht nur Studenten des Bereichs IFD <br>ein, sondern ist offen für alle Interessierten.

<h3 style="color:#005172;">PROGRAMM</h3>

'''15:30 Block "Fach- und Werkmodule"'''

* Werkmodul 'Lorem Ipsum I'
** [[/Lorem Ipsum - Dolor Sed/]]

* Werkmodul 'Multimediale Web-Platform & E-Learning'
** [[/Multimediale Web-Platform und E-Learning/]]

* Werkmodul 'Music Interaction Programming'
** [[/Music Interaction Programming/]]

* Werk- u. Fachmodul 'All Hail The Pixels'
** [[/All Hail The Pixels/]]

'''16:15 Block "Media-Architecture Exchange Program"'''

* Bauhaus Universität Weimar: Project 'Society of Networked Things'
** [[/Elahe Rostami and Andrés Arteaga - sharelog/]]
** [[/Shalika Hanum - Ask BELLA/]]
** [[/Nicklas Slagbrand, Xiangzhen Lu - Project Bench/]]

* University at Buffalo, SUNY: 'Überblick'
** [[/Uberblick|Uberblick]]

* University at Buffalo, SUNY: 'Mobile Apps with HTML5'
** [[/Mobile Apps|Mobile Apps]]

'''16:30 Pause'''

'''16:45 Block "Projekte"'''

* Bachelor Projektmodul 'Interface Design 1 - Methoden und Experimente im Interface Design I'
**[[/Heinrich Roolf - FabLab-App/]]
** [[/Philipp Wartenberg - reuse.it/]]

* Master Freies Projektmodul I'
** [[/Tobias Westphal - HistoGlobe/]]

* Master Projektmodul 'Interface Design 3 - Tangible Interfaces with Printed Electronics and 3D-MID I'
** [[/Wang Yana, Qiu Jie, Florian Wittig - Era-Drilling Robot/]]
** [[/Cao Juan, Liu Chen, Ma Xuexi, Daniel Pelaez - Acoustic Pixels/]]
** [[/Moritz Dreßler - Generative Doorbell/]]

IFD:Responsive Webdesign – Crash Course/Wiki Facelift and Mobile Optimization

2015-01-09T16:02:24Z

Wessi: /* Linklist to prototypes */

==Linklist to prototypes==

Natalia Suárez
[http://jsbin.com/juyiwu/ My Link]

Simon Schneegans and Felix Lauer
[http://simonschneegans.de/responsive_web/ Our Link]

Nicklas Slagbrand
[http://nicklasslagbrand.se/subdoman/ My Link]

Zhang Yating
[http://jsbin.com/wugepe/ My Link]

Wang Yana
[http://jsbin.com/zogeno/ My Link]

Florian Wittig
[http://www.flowittkovski.net/responsivewebdesign/MedienWiki.html My Link]

Xiangzhen LU and Yao CHEN
[http://firenzelu.me/responsive/ Our Link]
(Hint: tap on headings for navigation)

Firstname Lastname
[http://myprototype.com My Link]

Andrés Arteaga
[http://jsbin.com/corig/7 My Link]

Olga Falko
[http://jsbin.com/bocagu/1 My Link]

Alexander Vogt
[http://onezeronine.com/wiki/Main_Page.html Wiki-Clone with working nav-menu]

Tobias Westphal
[http://www.salvationpioneer.com/wessi/wikirelaunch Nice Wiki]

Christian Brinkmann und Anna Pfannstiel
[http://www.zblur.de/responsive-medienwiki/ Link]

minsoo Hwang and smin Kim
[http://jsbin.com/maqiva/1/ our Link]

Manuel Willem
[http://webuser.uni-weimar.de/~cena8593/RWD/new.html My Link]

IFD:Responsive Webdesign – Crash Course/Wiki Facelift and Mobile Optimization

2014-12-20T12:49:02Z

Wessi:

File:Tw-fingies-pinocchio.jpg

2014-07-28T09:51:47Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tw-fingies-blume.jpg

2014-07-28T09:40:51Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Westphal, Tobias

2014-07-28T09:39:58Z

Wessi: /* Visualisierung von Daten & Informationen */

Im Kurs ging es um die Administration und Visualisierung von verschiedenen Daten. Dazu wurden verschiedene Content-Management-Systeme, vor allem TYPO3 betrachtet, um Daten zu administrieren. Für die Visualisierung von Daten, wurden Frameworks wie jQuery, Angular.js, Bootstrap und die Fingies Plattform genutzt.

==Landingpage Fingies.io==
Als erste Aufgabe wurde eine neue Landingpage für die Fingies Plattform entworfen und mit grundlegenden Webtechnologien umgesetzt. Auf dessen Grundlage erarbeiteten wir unser eigenes kleines CMS.

[[File:tw-fingies-landingpage.jpg|200px]] [[File:tw-fingies-landingpage-phpadmin.jpg|200px]]

==Übersicht Content Management Systeme==
Da die Umsetzung eines eigenen CMS mit vielen Schwierigkeiten einherkommt, ist man auf ein herkömmliches System zurückgreift. Hier ein Überblick über verbreitete CM Systeme:

* TYPO3
* TYPO3 NEOS
* Contao
* Joomla!
* WordPress
* Drupal
* u.v.m.

==Umsetzung der Landingpage in TYPO3==
Die Landingpage der Fingies Plattform wird im Unieigenen TYPO3 umgesetzt. Dabei sollte jeder Kursteilnehmer einen Teil der Webseite bauen, z.B. das Kontaktformular:

[[File:tw-fingies-kontakt-1.jpg|200px]]
[[File:tw-fingies-kontakt-2.jpg|200px]]

==Visualisierung von Daten & Informationen==
Um Daten schnell und schön darstellen zu können haben wir mit der JavaScript Bibliothek "Highcharts" gearbeitet. Sie visualisiert insbesondere Grafen, Diagramme und andere Informationsgrafiken und sorgt für eine gute User Experience.
Angular.js sorgt mit wenig Code eine große Wirkung beim Nutzer.
Im folgenden Beispiel steigt der Wasserstand der Pflanze je mehr Fingies Boxen aktiv sind.

[[File:tw-fingies-blume.jpg|200px]]

Diese Anwendung funktioniert ähnlich, nur dass als Input das Mikrophon verwendet wird. Je lauter das Umgebungsgeräusch ist, desto länger wird Pinocchios Nase.

[[File:tw-fingies-pinocchio.jpg|200px]]

Westphal, Tobias

2014-07-28T09:31:18Z

Wessi:

File:Tw-fingies-kontakt-2.jpg

2014-07-28T09:28:39Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tw-fingies-kontakt-1.jpg

2014-07-28T09:28:20Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Westphal, Tobias

2014-07-28T09:26:33Z

Wessi: /* Übersicht Content Management Systeme */

Westphal, Tobias

2014-07-28T09:18:19Z

Wessi:

Westphal, Tobias

2014-07-28T09:09:49Z

Wessi: /* Landingpage Fingies.io */

File:Tw-fingies-landingpage-phpadmin.jpg

2014-07-28T09:09:30Z

Wessi:

== Summary ==

== Copyright status: ==

== Source: ==

Westphal, Tobias

2014-07-28T09:09:08Z

Wessi:

Westphal, Tobias

2014-07-25T13:13:34Z

Wessi: /* Landingpage Fingies.io */

File:Tw-fingies-landingpage.jpg

2014-07-25T13:12:37Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Westphal, Tobias

2014-07-25T13:11:39Z

Wessi: /* Landingpage Fingies.io */

Westphal, Tobias

2014-07-25T13:00:00Z

Wessi: Created page with "Im Kurs ging es um die Administration und Visualisierung von verschiedenen Daten. Dazu wurden verschiedene Content-Management-Systeme, vor allem TYPO3 betrachtet, um Daten zu adm..."

IFD:AdministratingData

2014-07-25T12:54:38Z

Wessi: /* Participants */

[[:Category:Werkmodul|Werkmodul]] | [[:Category:Fachmodul|Fachmodul]] <br/>
''Lehrperson:'' [[Gabriel Rausch]]<br/>
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Termin:'' Monday, 16:30 - 18:45 <br/>
''Ort:'' Marienstr. 7b, Raum 105<br/>

''Erster Termin:'' Mo, April 7th 2014

==Administrating Data==
Content Managment Systems, Data Visualization And The General Behaviour Of Information In The Web

This course is dedicated to all design- and media-students who are interested in frontend-development of websites and applications and have first experience in HTML, CSS, JS, PHP.

"Administrating Data" explores solutions for the in- and output, storing and visualizing data.

We are going to take hands on a couple of Content Management Systems, grabbing some external data from social media channels (API of Facebook, Google, Twitter...), creating self-made CMS solutions and handling bigger data (not "The Big Data"!) with some visualization techniques.

== Registration Procedure ==
To register for the course, please send an eMail due to April 5th with the Topic "Registration for {{PAGENAME}}" to Gabriel.Rausch (at) uni-weimar.de,
incuding the following informations:
* Full Name
* program and semester (Studienprogramm und Fachsemester)
* matriculation number (Matrikelnummer)
* Angabe der geltenden Prüfungsordnung (eg. PV27 or PV29)
* Valid email address @uni-weimar.de
* One short sentence why you want to (have to) be in this course (german or english)

If there are more than 15 registrations, students will be accepted depending on:
* Order (first come, first serve)
* If you are in a Project of Interface-Design (see Prof. Jens Geelhaar's semester projects this semester)
* What you've written in "why I want to be in this course"

If there are more than 20 registrations, there might be a kick-off event with an evaluation competition.

==Certificates of Achievements==
* Active and regular participation
* Progress on the individual project you are working on
* Creating a piece of work for an exhibition at the Summary
* 2 minute presentation at the [[IFD:Showreel]]
* Final Hand-in of your project/concept/...

==Target Audience==
* In general open to all students, but esp. suited for
* Bachelor- and Master students of Media-Arts & Design
* Master students Media-Architecture

==Syllabus==

* 07.04. Introduction & Review
** [[Media:20140407_bu_administrating_data_material.zip|material]]
* 14.04. Canceled
* 24.-25. Assembly workshop days: Fingies Framework and Administration Panel (optional)
* 28.04. Serverside Frameworks: Overview CMS Solutions
** [[File:Matertial_landingpage_20140428.zip]]
* 05.05. CMS II
** [[File:Sitemap_fingiesio.pdf]]
** [[File:20140505_AD_material.zip]]
** [[File:20140505_AD_workaround.zip]]
* 12.05. CMS III
** [[File:20140512_AD_material.zip]]
** [[File:20140512_AD_workaround.zip]]
* 19.05. Develop Fingies Infopage: Sitemap, Concept, Wireframes
* 26.05. Develop Fingies Infopage: Interface Design, Template, Content
** [[File:20140526_AD_material.zip]]
* 02.06. Clientside Frameworks: Overview JS Frameworks
** [[File:20140602_AD_material.zip]]
** [[File:Fingies_input_output.txt]]
* 16.06. Clientside: Infographics I
** [[File:20140616_AD_material.zip]]
** [[File:20140616_AD_workaround.zip]]
* 23.06. Clientside: Infographics II
** [[File:20140623_AD_material.zip]]
* 30.06. Clientside: Infographics III
** [[File:20140630_AD_material.zip]]
* 07.07. Building extension for administrating 3D data
** [[File:20140707_AD_material.zip]]
** [[File:201407072_AD_material.zip]]
* 10. - 13.07. Summaery

==Participants==
Tom Paschke
http://www.uni-weimar.de/medien/wiki/User:Tpaschke

[[Westphal, Tobias]]

IFD:AdministratingData

2014-07-25T12:53:36Z

Wessi: /* Participants */

IFD:AdministratingData

2014-07-25T12:53:16Z

Wessi: /* Participants */

IFD:AdministratingData

2014-07-25T12:37:36Z

Wessi:

File:Tw-klickprototyp-2.png

2014-07-21T16:03:27Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tw-klickprototyp-1.png

2014-07-21T16:03:01Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Tobias Westphal

2014-07-21T16:02:17Z

Wessi:

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== erste Versuche: 3D Modell ==

Parallel zu bisher gezeigten Teilergebnissen wurden die ersten Schritt in der 3D Modellierungssoftware "Blender" gemacht. Folgende Bilder zeigen die ersten 3D Versuche.

[[File:tw-blender-1.png|300px]] [[File:tw-blender-2.png|300px]] [[File:tw-blender-3.png|284px]] [[File:tw-blender-4.png|335px]]

==fertiges Endprodukt==

Am Ende des Kurses wurde dann ein gemeinsamer Klickprototyp entwickelt, der anschließend getestet wurde.

[[File:tw-klickprototyp-1.png|300px]] [[File:tw-klickprototyp-2.png|300px]]

Tobias Westphal

2014-07-21T15:58:50Z

Wessi: /* erste Versuche: 3D Modell */

Tobias Westphal

2014-07-21T15:57:29Z

Wessi: /* erste Versuche: 3D Modell */

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== erste Versuche: 3D Modell ==

Folgende Bilder zeigen die ersten 3D Modellierungsversuche in Blender.

[[File:tw-blender-1.png|300px]] [[File:tw-blender-2.png|300px]] [[File:tw-blender-3.png|284px]] [[File:tw-blender-4.png|335px]]

Tobias Westphal

2014-07-21T15:57:11Z

Wessi: /* erste Versuche: 3D Modell */

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== erste Versuche: 3D Modell ==

Folgende Bilder zeigen die ersten 3D Modellierungsversuche in Blender.

[[File:tw-blender-1.png|300px]] [[File:tw-blender-2.png|300px]] [[File:tw-blender-3.png|280px]] [[File:tw-blender-4.png|330px]]

Tobias Westphal

2014-07-21T15:56:57Z

Wessi: /* erste Versuche: 3D Modell */

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== erste Versuche: 3D Modell ==

Folgende Bilder zeigen die ersten 3D Modellierungsversuche in Blender.

[[File:tw-blender-1.png|300px]] [[File:tw-blender-2.png|300px]] [[File:tw-blender-3.png|270px]] [[File:tw-blender-4.png|320px]]

File:Tw-blender-4.png

2014-07-21T15:56:28Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tw-blender-3.png

2014-07-21T15:56:05Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Tw-blender-2.png

2014-07-21T15:55:47Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Tobias Westphal

2014-07-21T15:55:35Z

Wessi: /* 3D Modell */

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== erste Versuche: 3D Modell ==

Folgende Bilder zeigen die ersten 3D Modellierungsversuche in Blender.

[[File:tw-blender-1.png|300px]] [[File:tw-blender-2.png|300px]] [[File:tw-blender-3.png|300px]] [[File:tw-blender-4.png|300px]]

File:Tw-blender-1.png

2014-07-21T15:54:56Z

Wessi:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

Tobias Westphal

2014-07-21T15:54:30Z

Wessi: /* 3D Modell */

Im Kurs ging es um den Vergleich von Online-Shops im 2D bzw. 3D Interface. Dazu sollten 3D Modelle von Artikeln der Firma "BOSCH" mit Blender gebaut und anschließend im Browser dargestellt werden. Im abschließenden Klickprototypen werden dann die jeweiligen Workflows nachempfunden, bewertet und getestet.

==State of the art==
'''http://www.animantec.com/3D-Internet.html'''

[[File:tw_animantec.jpg|400px]]

Animantec bietet Hilfe bei der Modellierung von 3D Modellen im Web. In einer Online-Demo wurden drei ihrer Modelle mit Fotos verglichen. Mit Drag&Drop konnte der Nutzer die Modelle drehen. Hierbei fiel gute Modellierung, aber realtiv schlechtes Rendering auf.
Mittlerweile ist die die Demo nicht mehr unter diesem Link zu erreichen.

'''Kinset Store:'''

[[File:tw_kinset-store.jpg|400px]] [[File:tw_kinset-store_2.jpg|400px]]

Der Kinset Store ist eine virtuelle Shopping Meile, in der sich der Benutzer wie in einem echten Supermarkt bewegt. Er kann in der 3D Welt von Regal zu Regal schlendern und sich seine Artikel (in dem Fall Bücher) "erstöbern".
Das Interface wirkt dabei veraltet; auch das Rendering der Artikel lässt Wünsche offen.
Die Vision so online shoppen zu können ist interessant, bedarf aber einer besseren Umsetzung um wirklich einen Nutzen darstellen zu können. Momentan wirkt es eher wie eine Art "Second Life"-Shopping: Eine bloße Online-Abbildung eines Buchladens. Hier ist der User eindeutig besser beraten vom Schreibtisch aus 5 Minuten in die nächste Buchhandlung zu laufen.
Ein selbstständiger Test war aus Kompatibilitätsproblemen nicht möglich.

'''Cellphone Shop'''

[[File:tw_3D_Cellphones.jpg|400px]]

Der einzig auffindbare Online Shop, der auf Basis von Java-3D Modellen Handys verkauft. Allerdings funktionierte die Darstellung der Modelle in den gängigen Browsern nicht.
Auch dieser Shop wirkte veraltet und dringend überholungswürdig.

'''YouTube Video: "Future of eCommerce"'''
[[https://www.youtube.com/watch?v=lBJw-zdTqXg]]

'''Software to build my own 3D Shop:'''
[[http://soonique.de/]]

==Paper Prototype 1: Skizze==

Diese Skizze visualisiert einen 3D Shop nach Vorbild des "Kinset Store"s. Der Nutzer betritt als Kunde das Geschäft, geht zu Regalen mit den Artikeln, erhält Hilfe von Angestellten (wenn gewünscht), sammelt seine gewünschten Artikel und bezahlt an der Kasse.

[[File:tw_2D3D.jpg|400px]] [[File:tw_3D_Website.jpg|400px]] [[File:tw_totally3D.jpg|400px]]

==Produkt: BOSCH IXO==

[http://www.bosch-do-it.de/de/de/bosch-elektrowerkzeuge/werkzeuge/ixo-3165140652735-199877.jsp zum Produktbild: BOSCH IXO]

==Personas==

Die Beschreibung von "Personas" zählt zu den meist genutzten Methoden der User Experience/Usability. Es handelt sich hierbei um beschriebene Personen, den meist erdachte aber zielspezifische Eigenschaften, Erfahrungen und Ziele zugeordnet werden. So hat man bei der Entwicklung stets die Zielgruppe im Blick und kann für deren Bedürfnisse entwickeln. Anschließen sollte eine Person, die den beschriebenen Eigenschaften entspricht das Produkt ausführlich testen.
Die hier vorliegende Zielgruppenbeschreibung wurde nach Zuarbeit von "BOSCH" erstellt. Es handelt sich ausschließlich um erdachte Angaben.

[[File:tw_persona.jpg|200px]]
* Maria Waschke, DE
* 33 Jahre, in einer Beziehung, keine Kinder
* Lehrerin, kümmert sich auch um den Haushalt
* lebt in einer 4-Zimmer-Wohnung, hat nur wenige Werkzeuge zur Verfügung, IT Grundkenntnisse, weiß wie man das Internet im allgemeinen nutzt, eigenes Tablet
* kleine Do-It-Yourself Kenntnisse/Fähigkeiten, braucht ein barrierefreies Produkt was leicht und schnell zu bedienen ist, kleine Arbeiten will sie gerne selber durchführen - und größere ihrem Lebensgefährten überlassen.
* ''"Wenn ich mich mit solchen Werkzeugen beschäftigen soll, brauche ich ein einfaches und schnell benutzbares Werkzeug, welches die kleinen Aufgaben ohne großen Probleme bewältigt."'' (Maria Waschke, 2014)

==Wireframe Konzept==

Folgende Skizze dient als Grundlage des nachfolgenden Klickprototypen. Es wurde jeweils eine Überblicksansicht und eine Detailansicht im 2D bzw. 3D Interface entworfen. Beide Versionen sind in vielen Punkten identisch und in der Bedienung ähnlich. Oberstes Ziel ist nicht die Erzeugung eines universell neuen Shops, sondern ein simpler Vergleich zwischen 2D und 3D. Dabei werden auf noch nie dagewesene Innovationen im Online-Shopping bewusst verzichtet.

[[File:tw-wireframe-concept.jpg|300px]]

==Klickprototyp==
In diesem Dummy soll das spätere Benutzererlebnis sichtbar werden. Mit einfachen Mitteln und Tricks wurde ein Modell aus Blender exportiert und in jeweils 2D und 3D dargestellt. Es sollten Workflows und eine geeignete Usability für jede Variante entwickelt werden.

===2D Interface===

[[File:tw-2d-1.png|300px]]
[[File:tw-2d-2.png|300px]]

Im Überblick werden dem Kunden alle Produkte präsentiert. Neben einem kleinen Bild wird der Titel und eine kurze Beschreibung des Produkts angezeigt. Über die Pfeile kann man die bereits hier verschiedene Bilder des Artikels sehen. Mit Klick auf "mehr Informationen" gelangt der Nutzer zur Einzelansicht des gewünschten Produkts.
Dort wird ihm der Artikel genauer vorgestellt: größere und mehr Bilder, Titel, ausführliche Beschreibung, Kundenrezessionen & Bewertungen. Hier kann er den Artikel kaufen.

===3D Interface===

[[File:tw-3d-1.png|300px]]
[[File:tw-3d-2.png|300px]]
[[File:tw-3d-3.png|300px]]
[[File:tw-3d-4.png|300px]]

Das 3D Interface ist grundsätzlich ähnlich im Vergleich zum 2D Interface aufgebaut. Hier erhält der Nutzer allerdings den Hinweis, dass er die Modelle drehen kann. Dies wird durch den Hinweis unter der Überschrift und den für einige Sekunden sichtbare, halbtransparente "Hint" über den Modellen deutlich.
Gleiches gilt für die Detailansicht. Auch hier erscheint für einige Sekunden der Hinweis, dass des Modell gedreht werden kann. Eine Slideshow wie im 2D Interface entfällt dadurch.

== 3D Modell ==

Folgende Bilder zeigen die ersten 3D Modellierungsversuche in Blender.

[[File:tw-blender-1.png|300px]]