Hanoi UI - Video detail page improved

2 views
Skip to first unread message

Fabricio Zuardi

unread,
Aug 19, 2009, 3:56:17 PM8/19/09
to public...@googlegroups.com, Mauricio Zuardi

Check out this new versions of the video detail page mockup:

Default Video page:
http://publicvideos.org/mockups/v1/hanoi/video_detail_02_default.html

Video page after all versions got unlocked:
http://publicvideos.org/mockups/v1/hanoi/video_detail_02_unlocked.html

This is based on Mauricio's suggestions over the past mockup, things
looks better IMHO (if you want to compare, the old one was http://publicvideos.org/mockups/v1/hanoi/video_detail_01.html
).

The main difference is that the Title and Author , as well as the
person/company that unlocked a version now goes on top of the selected
video, and at the bottom there are the buttons that will open more
info depending on the action (this is not yet implemented).

Please let me know what you guys think! :)

[]s
Fabricio

Fabricio Zuardi

unread,
Aug 19, 2009, 4:00:21 PM8/19/09
to Fabricio Zuardi, public...@googlegroups.com, Mauricio Zuardi, Felipe Sanches, Marcelo Muniz

Adding Marcelo Muniz and Felipe Sanches to the thread…

PS: You guys should subscribe to the mailing list :P

Marcelo Muniz

unread,
Aug 19, 2009, 4:29:53 PM8/19/09
to publicvideos
I like the new design, but I also like the way you display the video
resolution and encoding type in the old design.

Maybe you should show that info when you mouse over the layer, but
when you select you could display that at the same level as the user
name (that sent the video) but aligned right. (just a thought!)

:-)

On Aug 19, 5:00 pm, Fabricio Zuardi <fabri...@fabricio.org> wrote:
> Adding Marcelo Muniz and Felipe Sanches to the thread…
>
> PS: You guys should subscribe to the mailing list :P
>
> On Aug 19, 2009, at 4:56 PM, Fabricio Zuardi wrote:
>
>
>
> > Check out this new versions of the video detail page mockup:
>
> > Default Video page:
> >http://publicvideos.org/mockups/v1/hanoi/video_detail_02_default.html
>
> > Video page after all versions got unlocked:
> >http://publicvideos.org/mockups/v1/hanoi/video_detail_02_unlocked.html
>
> > This is based on Mauricio's suggestions over the past mockup, things  
> > looks better IMHO (if you want to compare, the old one washttp://publicvideos.org/mockups/v1/hanoi/video_detail_01.html

Fabricio Zuardi

unread,
Aug 19, 2009, 4:44:11 PM8/19/09
to public...@googlegroups.com

Yeah, I though about that, if we were to display the resolution, a
subtle text or background text on the right on the title area is
probably the way to go.

But then again, I ask myself if this info is really useful for the
user or if it would be just extra clutter (specially on the smaller
version that has almost no real estate left) , IMHO this information
belongs to the "download" action panel, let me do a quick test here,
so i can try to show how that panel would look like upon user click…

Marcelo Muniz

unread,
Aug 19, 2009, 4:55:34 PM8/19/09
to publicvideos
I agree that encoding type is a download information, but the
resolution might be a useful information at least for new users. It
can be in a very small font, and maybe don't need to show in the
selected layer, but when you mouse over to select a different
resolution.

Fabricio Zuardi

unread,
Aug 19, 2009, 5:17:50 PM8/19/09
to public...@googlegroups.com

I see what you are saying, you are suggesting to include the
resolution info somewhere near the border of the other non-selected
versions… I can try that.

It might work, but I am still not 100% convinced that the resolution
is an useful information to have on the web watching interface. Do you
have an use-case that could justify adding a pair of strange numbers
like 960x540 or 1280x720 in there?

[]s

Fabricio Zuardi

unread,
Aug 19, 2009, 6:28:53 PM8/19/09
to public...@googlegroups.com

Attached is an example of how the download panel might look like.

[]s
Fabricio

Picture 339.png

Fabricio Zuardi

unread,
Aug 21, 2009, 1:13:36 AM8/21/09
to public...@googlegroups.com, Mauricio Zuardi

Ok, new version of the mockup!!

http://publicvideos.org/mockups/v1/hanoi/video_detail_03_default.html
and
http://publicvideos.org/mockups/v1/hanoi/video_detail_03_unlocked.html

Improvements:

* I have simplified more the interface, by cleaning that whole
bunch of strange stuff that used to happen on mousemove
* lots of CSS improvements, and now the texts (and avatars) also
zoom when you change video resolution
* unlock buttons now in place (although I am still not liking the
over the video button, maybe we should use icons there)
* first version of what can become the Labels panel
* first version of what can become the Downloads panel
*…and Animations for the panels! oooh, shiny!

Please let me know what you guys think.

Thanks
Fabricio

> <Picture 339.png>

Marcelo Muniz

unread,
Aug 21, 2009, 12:07:32 PM8/21/09
to publicvideos

It looks awesome!

Some comments:
- The download panel is kinda too big. My monitor resolution is
1680x1050 and even in the smallest video size (480x272), I have to use
the vertical scroller to see all the download sizes.
- I like the idea of using a icon for the download buttons.

Thanks,
Marcelo Muniz

On Aug 21, 2:13 am, Fabricio Zuardi <fabri...@fabricio.org> wrote:
> Ok, new version of the mockup!!
>
> http://publicvideos.org/mockups/v1/hanoi/video_detail_03_default.html
> andhttp://publicvideos.org/mockups/v1/hanoi/video_detail_03_unlocked.html

Fabricio Zuardi

unread,
Aug 21, 2009, 3:01:28 PM8/21/09
to public...@googlegroups.com, Mauricio Zuardi

Thanks for the feedback!

I have updated the mockups to make the contents of the panels to
occupy less height, please test it:

http://publicvideos.org/mockups/v1/hanoi/video_detail_04_default.html
and
http://publicvideos.org/mockups/v1/hanoi/video_detail_04_unlocked.html

[]s
Fabricio

Reply all
Reply to author
Forward
0 new messages