https://wiki.yoctoproject.org/wiki/api.php?action=feedcontributions&user=Brendan+Nelson&feedformat=atom
Yocto Project - User contributions [en]
2024-03-29T15:53:40Z
User contributions
MediaWiki 1.39.5
https://wiki.yoctoproject.org/wiki/index.php?title=Web_Hob_design_project_with_T%26T&diff=10624
Web Hob design project with T&T
2013-07-09T09:22:06Z
<p>Brendan Nelson: /* Stage 3 */ added link to Public Web Hob context summary</p>
<hr />
<div>[[Category:WebHob]]<br />
This page contains information on the '''[[WebHob|Web Hob]]''' design project we ran with the London-based agency [http://www.tobiasandtobias.com/ Tobias & Tobias] between January and March 2013. <br />
<br />
General discussion about '''Web Hob''' happens on a dedicated mailing list: [https://lists.yoctoproject.org/listinfo/webhob https://lists.yoctoproject.org/listinfo/webhob]<br />
<br />
<br><br />
<br />
== Introduction ==<br />
<br />
Web Hob is a web-based interface to the Yocto Project. The agency Tobias & Tobias were hired to start the interface design process, following a previous strategy engagement that established priorities and a high level plan for the Web Hob project. <br />
<br />
The design work happened between January and March 2013 and was structured like this:<br />
<br />
* 3 design iterations<br />
* 2 rounds of user feedback<br />
<br />
[[#Final deliverables|The final deliverables]] would be a set of static wireframes, a web-based prototype and a visual design framework.<br />
<br />
== Scope ==<br />
<br />
The strategy engagement identified 8 stages for the Web Hob project. The 3-month design work would cover the first 3 stages. <br />
<br />
=== Stage 1 ===<br />
<br />
Create the first iteration of Web Hob, a read-only application that is limited to carrying out build metrics and forensics.<br />
<br />
=== Stage 2 ===<br />
<br />
Implement the second core capability of Web Hob for the first time - the build specification and creation process. Along with build metrics this will undergo continuous improvement throughout Web Hob's lifetime. Also implement support for multi-user operation, supporting the [[Web Hob Contexts|Team Web Hob context]].<br />
<br />
=== Stage 3 ===<br />
<br />
Improve the two core capabilities, making them more powerful and more robust. At the end of this stage these core Web Hob features should be mature enough that it is ready to be deployed on [[Web Hob Contexts#3._Public_Web_Hob|publicly available infrastructure]].<br />
<br />
=== Scenarios included in stages 1 to 3 ===<br />
<br />
* Show Build Metrics <br />
** Identify image <br />
** Define scope of analysis <br />
** Run analysis of image <br />
** View analysis overview <br />
* Finding / Viewing Builds <br />
** View list of projects/builds <br />
* Install Single-User Web Hob <br />
** Check prerequisites <br />
** Download/git clone Web Hob <br />
** Install single-user option<br />
* Create build <br />
** Set up project<br />
** Choose hardware <br />
** Set preferences <br />
** Specify layer(s) <br />
** Specify base image and packages<br />
** Run build <br />
* Install Web Hob server <br />
** Configure team servers<br />
** Select team options and configure<br />
* Error messaging<br />
** View error logs<br />
<br />
=== What we really covered ===<br />
<br />
The project plan turned out to be over optimistic. Of the above scenarios, the 2 installation ones (Install single-user option and Install Web Hob server) were never covered.<br />
<br />
We, however, introduced an additional scenario about file access.<br />
<br />
== Final deliverables ==<br />
<br />
Wireframes: [[File:Final_wireframes_candidate_v1.1.pdf]] <br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype_with_dots/index.html Static prototypes]<br />
<br />
[http://www.yoctoproject.org/webhob/phase3_final_web_prototype/dashboard.html Web-based prototype]<br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/tree/Design%20project%202%20-%20TT/visual_design_psd Visual design (Photoshop files)]<br />
<br />
== Intermediate deliverables ==<br />
<br />
=== Wireframes ===<br />
<br />
* [[File:Wireframes-Stage_1-INT-002-0.10.pdf]] — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)<br />
* [[File:Wireframes-Stage_2&3_review-INT-002-0.18.pdf]] — Interim wireframes incorporating Stage II & III feedback (bright blue links, buttons, etc. are clickable)<br />
<br />
=== Static prototypes index ===<br />
<br />
{|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0"<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Iteration<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Version<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Stage<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Scope<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Link<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase1-iteration1-prototype/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration3-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and multi-user<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-fileBrowsing-multiuser/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-filebrowsing-buildanalysis/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|4<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration4-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|5<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration5-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype/index.html prototype]<br />
|}<br />
<br />
<br><br />
<br />
* <strong>Iteration</strong> is the design round during which the prototype was produced. There were 3 design iterations in this project. <br />
<br />
* <strong>Version</strong> indicates how many variations of each prototype we created as part of the design process.<br />
<br />
* <strong>Stage</strong> refers to the Web Hob stages identified by Tobias & Tobias and described in the [[#Scope]] section.<br />
<br />
* <strong>Scope</strong> indicates, at a high level, which scenarios are addressed by the prototype.<br />
<br />
* <strong>Link</strong> to the Yocto Project git repository where the prototype is hosted.<br />
<br />
=== Other interaction design documents ===<br />
<br />
* [[File:Web_Hob_content_structure.pdf]] — Web Hob information architecture<br />
* [[File:Multiuser_support_in_Web_Hob.pdf]] - Design approach to multi user workflows in Web Hob<br />
<br />
=== User feedback ===<br />
<br />
* [[File:User_Test_1_Findings-INT-002.pdf]] — Summary of feedback gathered on the iteration I designs<br />
* [[File:User_Test_2_Findings-INT-002.pdf]] - Summary of feedback gathered on iteration II designs<br />
<br />
=== Visual design ===<br />
<br />
Visual design work by Tobias & Tobias started at the beginning of March. They agreed to deliver a set of GUI components and 3 screen mockups:<br />
<br />
* My activity dashboard<br />
* Build dashboard<br />
* Package information<br />
<br />
The thumbnails below show the visual design work as it was delivered over time. I've grouped them by page, so that it's easier to see how they evolved. <br />
<br />
Final versions were delivered on Friday, 22nd March 2013. This is the agency's final piece of work: it doesn't mean it will be the design we will implement. Changes might come based on community feedback.<br />
<br />
===== My activity dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto_light_01.png | 4 Mar - light<br />
File: Yocto_dark_01.png | 4 Mar - dark<br />
</gallery><br />
<br />
===== Build dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto-02.png | 6 Mar <br />
File:Yocto-01.png | 6 Mar<br />
File:Yocto_light_02.png | 4 Mar - light<br />
File:Yocto_dark_02.png | 4 Mar- dark<br />
</gallery><br />
<br />
===== Package information =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Packages-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Packages-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Packages-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Packages_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
===== GUI controls =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-UI-v0.9.png|Final<br />
File:INT-002_-_Yocto_-_UI_Web_Kit_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
== Other Web Hob work ==<br />
<br />
* [[Web Hob]] - the main page for the Web Hob project<br />
* [[Yocto_Web_Hob_Design_0.0_—_Archived|WebHob Design — Archived]] - Design and documentation for the first Web Hob project, now superseded by the above.<br />
* Web UI 0.1: [[File:HOB_WEB_architecture_overview_v0_1.pdf]] (deprecated)</div>
Brendan Nelson
https://wiki.yoctoproject.org/wiki/index.php?title=Web_Hob_design_project_with_T%26T&diff=10623
Web Hob design project with T&T
2013-07-09T09:21:11Z
<p>Brendan Nelson: /* Stage 2 */ added link to Web Hob Contexts page</p>
<hr />
<div>[[Category:WebHob]]<br />
This page contains information on the '''[[WebHob|Web Hob]]''' design project we ran with the London-based agency [http://www.tobiasandtobias.com/ Tobias & Tobias] between January and March 2013. <br />
<br />
General discussion about '''Web Hob''' happens on a dedicated mailing list: [https://lists.yoctoproject.org/listinfo/webhob https://lists.yoctoproject.org/listinfo/webhob]<br />
<br />
<br><br />
<br />
== Introduction ==<br />
<br />
Web Hob is a web-based interface to the Yocto Project. The agency Tobias & Tobias were hired to start the interface design process, following a previous strategy engagement that established priorities and a high level plan for the Web Hob project. <br />
<br />
The design work happened between January and March 2013 and was structured like this:<br />
<br />
* 3 design iterations<br />
* 2 rounds of user feedback<br />
<br />
[[#Final deliverables|The final deliverables]] would be a set of static wireframes, a web-based prototype and a visual design framework.<br />
<br />
== Scope ==<br />
<br />
The strategy engagement identified 8 stages for the Web Hob project. The 3-month design work would cover the first 3 stages. <br />
<br />
=== Stage 1 ===<br />
<br />
Create the first iteration of Web Hob, a read-only application that is limited to carrying out build metrics and forensics.<br />
<br />
=== Stage 2 ===<br />
<br />
Implement the second core capability of Web Hob for the first time - the build specification and creation process. Along with build metrics this will undergo continuous improvement throughout Web Hob's lifetime. Also implement support for multi-user operation, supporting the [[Web Hob Contexts|Team Web Hob context]].<br />
<br />
=== Stage 3 ===<br />
<br />
Improve the two core capabilities, making them more powerful and more robust. At the end of this stage these core Web Hob features should be mature enough that it is ready to be deployed on publicly available infrastructure.<br />
<br />
=== Scenarios included in stages 1 to 3 ===<br />
<br />
* Show Build Metrics <br />
** Identify image <br />
** Define scope of analysis <br />
** Run analysis of image <br />
** View analysis overview <br />
* Finding / Viewing Builds <br />
** View list of projects/builds <br />
* Install Single-User Web Hob <br />
** Check prerequisites <br />
** Download/git clone Web Hob <br />
** Install single-user option<br />
* Create build <br />
** Set up project<br />
** Choose hardware <br />
** Set preferences <br />
** Specify layer(s) <br />
** Specify base image and packages<br />
** Run build <br />
* Install Web Hob server <br />
** Configure team servers<br />
** Select team options and configure<br />
* Error messaging<br />
** View error logs<br />
<br />
=== What we really covered ===<br />
<br />
The project plan turned out to be over optimistic. Of the above scenarios, the 2 installation ones (Install single-user option and Install Web Hob server) were never covered.<br />
<br />
We, however, introduced an additional scenario about file access.<br />
<br />
== Final deliverables ==<br />
<br />
Wireframes: [[File:Final_wireframes_candidate_v1.1.pdf]] <br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype_with_dots/index.html Static prototypes]<br />
<br />
[http://www.yoctoproject.org/webhob/phase3_final_web_prototype/dashboard.html Web-based prototype]<br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/tree/Design%20project%202%20-%20TT/visual_design_psd Visual design (Photoshop files)]<br />
<br />
== Intermediate deliverables ==<br />
<br />
=== Wireframes ===<br />
<br />
* [[File:Wireframes-Stage_1-INT-002-0.10.pdf]] — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)<br />
* [[File:Wireframes-Stage_2&3_review-INT-002-0.18.pdf]] — Interim wireframes incorporating Stage II & III feedback (bright blue links, buttons, etc. are clickable)<br />
<br />
=== Static prototypes index ===<br />
<br />
{|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0"<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Iteration<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Version<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Stage<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Scope<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Link<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase1-iteration1-prototype/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration3-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and multi-user<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-fileBrowsing-multiuser/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-filebrowsing-buildanalysis/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|4<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration4-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|5<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration5-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype/index.html prototype]<br />
|}<br />
<br />
<br><br />
<br />
* <strong>Iteration</strong> is the design round during which the prototype was produced. There were 3 design iterations in this project. <br />
<br />
* <strong>Version</strong> indicates how many variations of each prototype we created as part of the design process.<br />
<br />
* <strong>Stage</strong> refers to the Web Hob stages identified by Tobias & Tobias and described in the [[#Scope]] section.<br />
<br />
* <strong>Scope</strong> indicates, at a high level, which scenarios are addressed by the prototype.<br />
<br />
* <strong>Link</strong> to the Yocto Project git repository where the prototype is hosted.<br />
<br />
=== Other interaction design documents ===<br />
<br />
* [[File:Web_Hob_content_structure.pdf]] — Web Hob information architecture<br />
* [[File:Multiuser_support_in_Web_Hob.pdf]] - Design approach to multi user workflows in Web Hob<br />
<br />
=== User feedback ===<br />
<br />
* [[File:User_Test_1_Findings-INT-002.pdf]] — Summary of feedback gathered on the iteration I designs<br />
* [[File:User_Test_2_Findings-INT-002.pdf]] - Summary of feedback gathered on iteration II designs<br />
<br />
=== Visual design ===<br />
<br />
Visual design work by Tobias & Tobias started at the beginning of March. They agreed to deliver a set of GUI components and 3 screen mockups:<br />
<br />
* My activity dashboard<br />
* Build dashboard<br />
* Package information<br />
<br />
The thumbnails below show the visual design work as it was delivered over time. I've grouped them by page, so that it's easier to see how they evolved. <br />
<br />
Final versions were delivered on Friday, 22nd March 2013. This is the agency's final piece of work: it doesn't mean it will be the design we will implement. Changes might come based on community feedback.<br />
<br />
===== My activity dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto_light_01.png | 4 Mar - light<br />
File: Yocto_dark_01.png | 4 Mar - dark<br />
</gallery><br />
<br />
===== Build dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto-02.png | 6 Mar <br />
File:Yocto-01.png | 6 Mar<br />
File:Yocto_light_02.png | 4 Mar - light<br />
File:Yocto_dark_02.png | 4 Mar- dark<br />
</gallery><br />
<br />
===== Package information =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Packages-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Packages-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Packages-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Packages_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
===== GUI controls =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-UI-v0.9.png|Final<br />
File:INT-002_-_Yocto_-_UI_Web_Kit_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
== Other Web Hob work ==<br />
<br />
* [[Web Hob]] - the main page for the Web Hob project<br />
* [[Yocto_Web_Hob_Design_0.0_—_Archived|WebHob Design — Archived]] - Design and documentation for the first Web Hob project, now superseded by the above.<br />
* Web UI 0.1: [[File:HOB_WEB_architecture_overview_v0_1.pdf]] (deprecated)</div>
Brendan Nelson
https://wiki.yoctoproject.org/wiki/index.php?title=Web_Hob_Contexts&diff=10621
Web Hob Contexts
2013-07-09T09:20:31Z
<p>Brendan Nelson: Created page with "As part of the Web Hob strategy and roadmap exercise carried out in late 2012, three contexts of use were identified following interviews with stakeholders and potential user..."</p>
<hr />
<div>As part of the [[Web Hob]] strategy and roadmap exercise carried out in late 2012, three contexts of use were identified following interviews with stakeholders and potential users. <br />
<br />
The ultimate goal of the Web Hob is to support all three contexts, each of which has its own fairly distinct set of use cases. <br />
<br />
==Contexts==<br />
<br />
The contexts are summarised below.<br />
<br />
===1. Local Web Hob===<br />
<br />
The Web Hob is running on localhost, on a single machine, and is not being accessed over the network. It acts as essentially a front-end layer for BitBake in a single-user context.<br />
<br />
The user must be capable of installing Web Hob on their own machine. <br />
<br />
===2. Team Web Hob===<br />
<br />
Web Hob is installed on to a private server within an organisation's network and is then used by multiple engineers or developers. The organisation is responsible for maintenance of the Web Hob install. By running Web Hob behind the firewall, the organisation is able to harness its collaborative capabilities while maintaining security and keeping source code on its own infrastructure.<br />
<br />
There must be people within the organisation who are able to install, configure and run the Web Hob server, but once it is in place other users (such as developers) can access its features over its web interface.<br />
<br />
===3. Public Web Hob===<br />
<br />
Web Hob runs on a publicly accessible website, on infrastructure owned and maintained by the Yocto Project. Visitors to the website can create accounts and use Web Hob features without having to carry out any local installation.<br />
<br />
==Relevance to implementation==<br />
<br />
The contexts defined above have some relevance to the implementation roadmap for Web Hob. The initial focus will be on the Local Web Hob context as the use cases that support it are more suited to early implementation. It will then serve as the basis for the first Team Web Hob release, which will introduce a new set of use cases and technical requirements. The Public Web Hob context might be seen as a more long-term aspiration which will only be achievable once Team Web Hob reaches a certain level of maturity.</div>
Brendan Nelson
https://wiki.yoctoproject.org/wiki/index.php?title=Web_Hob_design_project_with_T%26T&diff=10617
Web Hob design project with T&T
2013-07-09T08:58:06Z
<p>Brendan Nelson: Minor edit - links & external URLs updated</p>
<hr />
<div>[[Category:WebHob]]<br />
This page contains information on the '''[[WebHob|Web Hob]]''' design project we ran with the London-based agency [http://www.tobiasandtobias.com/ Tobias & Tobias] between January and March 2013. <br />
<br />
General discussion about '''Web Hob''' happens on a dedicated mailing list: [https://lists.yoctoproject.org/listinfo/webhob https://lists.yoctoproject.org/listinfo/webhob]<br />
<br />
<br><br />
<br />
== Introduction ==<br />
<br />
Web Hob is a web-based interface to the Yocto Project. The agency Tobias & Tobias were hired to start the interface design process, following a previous strategy engagement that established priorities and a high level plan for the Web Hob project. <br />
<br />
The design work happened between January and March 2013 and was structured like this:<br />
<br />
* 3 design iterations<br />
* 2 rounds of user feedback<br />
<br />
[[#Final deliverables|The final deliverables]] would be a set of static wireframes, a web-based prototype and a visual design framework.<br />
<br />
== Scope ==<br />
<br />
The strategy engagement identified 8 stages for the Web Hob project. The 3-month design work would cover the first 3 stages. <br />
<br />
=== Stage 1 ===<br />
<br />
Create the first iteration of Web Hob, a read-only application that is limited to carrying out build metrics and forensics.<br />
<br />
=== Stage 2 ===<br />
<br />
Implement the second core capability of Web Hob for the first time - the build specification and creation process. Along with build metrics this will undergo continuous improvement throughout Web Hob's lifetime. Also implement support for multi-user operation, supporting the Team Web Hob context.<br />
<br />
=== Stage 3 ===<br />
<br />
Improve the two core capabilities, making them more powerful and more robust. At the end of this stage these core Web Hob features should be mature enough that it is ready to be deployed on publicly available infrastructure.<br />
<br />
=== Scenarios included in stages 1 to 3 ===<br />
<br />
* Show Build Metrics <br />
** Identify image <br />
** Define scope of analysis <br />
** Run analysis of image <br />
** View analysis overview <br />
* Finding / Viewing Builds <br />
** View list of projects/builds <br />
* Install Single-User Web Hob <br />
** Check prerequisites <br />
** Download/git clone Web Hob <br />
** Install single-user option<br />
* Create build <br />
** Set up project<br />
** Choose hardware <br />
** Set preferences <br />
** Specify layer(s) <br />
** Specify base image and packages<br />
** Run build <br />
* Install Web Hob server <br />
** Configure team servers<br />
** Select team options and configure<br />
* Error messaging<br />
** View error logs<br />
<br />
=== What we really covered ===<br />
<br />
The project plan turned out to be over optimistic. Of the above scenarios, the 2 installation ones (Install single-user option and Install Web Hob server) were never covered.<br />
<br />
We, however, introduced an additional scenario about file access.<br />
<br />
== Final deliverables ==<br />
<br />
Wireframes: [[File:Final_wireframes_candidate_v1.1.pdf]] <br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype_with_dots/index.html Static prototypes]<br />
<br />
[http://www.yoctoproject.org/webhob/phase3_final_web_prototype/dashboard.html Web-based prototype]<br />
<br />
[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/tree/Design%20project%202%20-%20TT/visual_design_psd Visual design (Photoshop files)]<br />
<br />
== Intermediate deliverables ==<br />
<br />
=== Wireframes ===<br />
<br />
* [[File:Wireframes-Stage_1-INT-002-0.10.pdf]] — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)<br />
* [[File:Wireframes-Stage_2&3_review-INT-002-0.18.pdf]] — Interim wireframes incorporating Stage II & III feedback (bright blue links, buttons, etc. are clickable)<br />
<br />
=== Static prototypes index ===<br />
<br />
{|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0"<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Iteration<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Version<br />
! style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"| Stage<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Scope<br />
! style="align: left; border-style: solid; border-width: 0 1px 1px 0; padding: 0 5px;"| Link<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase1-iteration1-prototype/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|Projects and builds<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration3-projects-builds/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and multi-user<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration1-fileBrowsing-multiuser/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|File browsing and build analysis<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration2-filebrowsing-buildanalysis/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|4<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration4-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|2<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|5<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration5-allscenarios/index.html prototype]<br />
|-<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios<br />
|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype/index.html prototype]<br />
|}<br />
<br />
<br><br />
<br />
* <strong>Iteration</strong> is the design round during which the prototype was produced. There were 3 design iterations in this project. <br />
<br />
* <strong>Version</strong> indicates how many variations of each prototype we created as part of the design process.<br />
<br />
* <strong>Stage</strong> refers to the Web Hob stages identified by Tobias & Tobias and described in the [[#Scope]] section.<br />
<br />
* <strong>Scope</strong> indicates, at a high level, which scenarios are addressed by the prototype.<br />
<br />
* <strong>Link</strong> to the Yocto Project git repository where the prototype is hosted.<br />
<br />
=== Other interaction design documents ===<br />
<br />
* [[File:Web_Hob_content_structure.pdf]] — Web Hob information architecture<br />
* [[File:Multiuser_support_in_Web_Hob.pdf]] - Design approach to multi user workflows in Web Hob<br />
<br />
=== User feedback ===<br />
<br />
* [[File:User_Test_1_Findings-INT-002.pdf]] — Summary of feedback gathered on the iteration I designs<br />
* [[File:User_Test_2_Findings-INT-002.pdf]] - Summary of feedback gathered on iteration II designs<br />
<br />
=== Visual design ===<br />
<br />
Visual design work by Tobias & Tobias started at the beginning of March. They agreed to deliver a set of GUI components and 3 screen mockups:<br />
<br />
* My activity dashboard<br />
* Build dashboard<br />
* Package information<br />
<br />
The thumbnails below show the visual design work as it was delivered over time. I've grouped them by page, so that it's easier to see how they evolved. <br />
<br />
Final versions were delivered on Friday, 22nd March 2013. This is the agency's final piece of work: it doesn't mean it will be the design we will implement. Changes might come based on community feedback.<br />
<br />
===== My activity dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto_light_01.png | 4 Mar - light<br />
File: Yocto_dark_01.png | 4 Mar - dark<br />
</gallery><br />
<br />
===== Build dashboard =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Dashboard-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Dashboard-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Dashboard-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Dashboard_-_v0.7.png| 8 Mar<br />
File:Yocto-02.png | 6 Mar <br />
File:Yocto-01.png | 6 Mar<br />
File:Yocto_light_02.png | 4 Mar - light<br />
File:Yocto_dark_02.png | 4 Mar- dark<br />
</gallery><br />
<br />
===== Package information =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-Build_Packages-v0.10.png|Final<br />
File:INT-002-Yocto-Build_Packages-v0.9.png | 22 Mar<br />
File:INT-002-Yocto-Build_Packages-v0.8.png | 21 Mar<br />
File:INT-002_-_Yocto_-_Build_Packages_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
===== GUI controls =====<br />
<br />
<gallery><br />
File:INT-002-Yocto-UI-v0.9.png|Final<br />
File:INT-002_-_Yocto_-_UI_Web_Kit_-_v0.7.png | 8 Mar<br />
</gallery><br />
<br />
== Other Web Hob work ==<br />
<br />
* [[Web Hob]] - the main page for the Web Hob project<br />
* [[Yocto_Web_Hob_Design_0.0_—_Archived|WebHob Design — Archived]] - Design and documentation for the first Web Hob project, now superseded by the above.<br />
* Web UI 0.1: [[File:HOB_WEB_architecture_overview_v0_1.pdf]] (deprecated)</div>
Brendan Nelson