Ryan Dawson on Longhorn

The software we think, but do not write

May 2005 - Posts

  • Using Animation (Emphasis on splines)

    1. Animations are enumerated by type: double, point, color, etc...
    2. Animations support simple (To, From), complex (key frame values: value1, value2, value3...), and user-defined (explicit path) scenarios...
        •          Animations named for simple are: <type>Animation
        •          Animations named for complex are: <type>AnimationUsingKeyFrames
        •          Animations names for user-defined are <type>AnimationUsingPath
    3. Inside complex animations, there are 3 different progression techniques:
        •          discrete (jumps to values with no in-between values)
        •          linear (line progression from value to value)
        •          spline (spline curve progression with 2 control points)
    4. User-defined animations are specified using a Path geometry

     

    Here is a sample using DoubleAnimationUsingKeyFrames:

    <Style x:Key="Style1">

       <Setter Property="Button.Background">

          <Setter.Value>

             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <LinearGradientBrush.GradientStops>

                   <GradientStop Color="Pink" Offset="0" />

                   <GradientStop Color="Red" Offset="1" />

                </LinearGradientBrush.GradientStops>

             </LinearGradientBrush>

          </Setter.Value>

       </Setter>

       <Setter Property="Control.Template">

          <Setter.Value>

             <ControlTemplate>

                <Grid x:Name="grid">

                   <Grid.RenderTransform>

                      <TranslateTransform X="0" Y="0" />

                   </Grid.RenderTransform>

                   <Rectangle Fill="{TemplateBinding Property=Background}" RadiusX="5" RadiusY="5" Margin="2" />

                </Grid>

                <ControlTemplate.Triggers>

                   <EventTrigger RoutedEvent="Mouse.MouseEnter">

                      <EventTrigger.Actions>

                         <BeginAction TargetName="MouseEnterTimeline2" />

                      </EventTrigger.Actions>

                   </EventTrigger>

                </ControlTemplate.Triggers>

                <ControlTemplate.Storyboards>

                   <ParallelTimeline Name="MouseEnterTimeline" BeginTime="*null" Duration="Forever">

                      <SetterTimeline TargetName="grid" Path="(Grid.RenderTransform).(TranslateTransform.X)" FillBehavior="HoldEnd">

                         <DoubleAnimationUsingKeyFrames Duration="0:0:1.3" FillBehavior="HoldEnd">

                            <DoubleAnimationUsingKeyFrames.KeyFrames>

                               <SplineDoubleKeyFrame Value="10" KeyTime="0:0:0.7" KeySpline="0,1 0,0" />

                               <SplineDoubleKeyFrame Value="40" KeyTime="0:0:1" KeySpline="0,1 0,0" />

                               <SplineDoubleKeyFrame Value="50" KeyTime="0:0:1.3" KeySpline="0,1 0,0" />

                            </DoubleAnimationUsingKeyFrames.KeyFrames>

                         </DoubleAnimationUsingKeyFrames>

                      </SetterTimeline>

                      <SetterTimeline TargetName="grid" Path="(Grid.RenderTransform).(TranslateTransform.Y)" FillBehavior="HoldEnd">

                         <DoubleAnimationUsingKeyFrames Duration="0:0:1.3" FillBehavior="HoldEnd">

                            <DoubleAnimationUsingKeyFrames.KeyFrames>

                               <SplineDoubleKeyFrame Value="10" KeyTime="0:0:1.3" KeySpline="0,1 1,1" />

                            </DoubleAnimationUsingKeyFrames.KeyFrames>

                         </DoubleAnimationUsingKeyFrames>

                      </SetterTimeline>

                   </ParallelTimeline>

                </ControlTemplate.Storyboards>

             </ControlTemplate>

          </Setter.Value>

       </Setter>

    </Style>

       
      PostTypeIcon
      2,069 Views
    1. Using VisualBrush

      Essentially, here is the bag:

         -Brush

               -GradientBrush

                     -LinearGradientBrush

                     -RadialGradientBrush

               -SolidColorBrush

               -TileBrush

                     -DrawingBrush

                     -ImageBrush

                     -VisualBrush

       

      This VisualBrush allows you to turn a UIElement (Control) into a brush and render it onto anything (since it is a brush)...

      <StackPanel>

               <StackPanel.LayoutTransform>

                        <ScaleTransform Center="0,0" ScaleX="6" ScaleY="6" />

               </StackPanel.LayoutTransform>

               <Button Style="{StaticResource ButtonStyle}" Name="button1">

                        <Button.Content>Hello</Button.Content>

               </Button>

               <Button Name="button2" Click="Button2Click">

                        <Button.Content>2</Button.Content>

               </Button>

               <Button Name="button3" Background="Green">

                        <Button.Content>3</Button.Content>

               </Button>

      </StackPanel>

      private void Button2Click(object sender, RoutedEventArgs e)

      {

               VisualBrush brush = new VisualBrush(this.button1);

               this.button2.Background = brush;

      }

                                    
      PostTypeIcon
      2,080 Views
    2. Style Changes - Inline and Re-usable

      I was aware that much of the style code would change, so I'll post my findings as I discover them.

      A button:

      <Button>

         <Button.Content>

            <StackPanel>

               <TextBlock>RedTextBlock>

               <TextBlock>BlueTextBlock>

            StackPanel>

         Button.Content>

      Button>

       

      A simple button with some content layed out vertically. Now add a style for the background:

      <Window.Resources>

         <Style TargetType="{x:Type Button}">

            <Setter Property="Background">

               <Setter.Value>

                  <LinearGradientBrush>

                     <LinearGradientBrush.GradientStops>

                        <GradientStop Color="#111111" Offset="0"/>

                        <GradientStop Color="#A5A5A5" Offset="0.5" />

                        <GradientStop Color="#111111" Offset="1" />

                     LinearGradientBrush.GradientStops>

                  LinearGradientBrush>

               Setter.Value>

             Setter>

         Style>

      Window.Resources>

       

      Now, to make sure things are working, let's override the Visual Tree from inline the button declaration:

         <Button.Background>

            <LinearGradientBrush>

               <LinearGradientBrush.GradientStops>

                  <GradientStop Color="Red" Offset="0"/>

                  <GradientStop Color="#A5A5A5" Offset="0.5" />

                  <GradientStop Color="Blue" Offset="1" />

               LinearGradientBrush.GradientStops>

            LinearGradientBrush>

         Button.Background>

       

      Yeah, it does...

      Oh, and Styles are now not locked, which means they are replaceable. The last sentence may seem ambiguous, but I don't know how to explain it right now. Once I am more familiar, I will give it another shot.

      PostTypeIcon
      1,897 Views
    3. Scrollable Content Review

         It’s easy to say we haven’t reached full potential in all areas of the User Experience. It’s even easier to say that in regards to sprawling content (i.e. content that has to be scrolled—scroll bars…). Who knows what’s next…But, here are some models that are currently in use:

      1) Simple scroll-bar for horizontal and vertical content

      2) Automatic scrolling once mouse hovers over arrow to go down or up

      3) Pagination (i.e. you have to click next to see more)

         It’s quite possible there isn’t a silver bullet. Maybe, scrolling will be handled on a control level with custom implementations. It’s hard to say this early—but, definitely a consistent model will be easier for the user.

         Microsoft recently added a reading view to Word that uses the pagination model. When it was released, they made it sound like they had done some research, and this was the best way to go. Maybe from an affordance standpoint, but I can hardly believe this is the best. The pagination model throws the dynamic aspect of computers away. Instead, it reverts back to the way hard-copy books work, which doesn’t help if you forgot the last words from the previous page. At least a scroll has the ability to keep content in the middle, so you have a good scope of past and future content in the continuum.

       

         Or, could it be that scrollable content is wrong? Could it be that content should fit in a navigable view linking to other single-page views only? Could it be that if the content is larger than a single page view, there is too much information for the user to process? Hiding details until needed would probably help. We could apply current research from the web that says navigation doesn’t help—people should click back to the home page and start over if they need to do another task—orienting the site so everything is task (goal) driven. On a side note, the research could be flat wrong. People might think of the pages hierarchically, yet the web doesn’t offer a good solution to navigate that hierarchy.

         I may have not been clear in the last paragraph, so let me rephrase. It may be the case that content that must be scrolled is poorly designed. So, the next question would be whether we should thrive on scrolling paradigms, instead, just redesign the content correctly. Don’t mistake my semantics. I use the word content, but in the end, content should probably be User Interface independent—in this case, content refers the page of information being displayed.

       

         As a quick exercise, I have pshopped an image of a scroll paradigm for content that cannot be redesigned. I notice that many people find automatic scrollers easier for a number of reasons.

      1) They usually have trouble steadying the scroll thumb to a desired destination and end up at the wrong location. This just has to do with the eye-hand coordination that avid users have, but novices do not.

      2) They use the small arrows above and below the thumb, but inevitably scroll using too little increments, and are hampered by scrolling instead of reading or finding.

         Also, mouse’s (mice?) with scroll wheels are ubiquitous, yet they aren’t integrated into the experience as nice as I would like. Most novices do not use them. So, obviously they haven’t delivered on their potential. I think they are great. So, scrolling with the mouse wheel should be automatic if the cursor is over the scroll-designated region.

         Besides this, another big problem is navigating to content—granted that you must scale the entire document as quick as possible. For this, I think scaled views of the content should be presented to the user. Then, they can click on an area and automatically have it show up on the main view—similar to a map key.

                                   
      PostTypeIcon
      2,042 Views
    4. Where is the transparency, and no, Avalon this doesn't concern you

      Filed under:

         Interesting discussion going on in the comments, although Brian Shapiro ends with: "i was also hoping for discussion in the posts i made but nobody has really touched them." Alas, I don't have an answer. I was also hoping for more of a discussion by people in positions to make things happen, but that doesn't seem to be happening. There are people obviously interested in the UI of Longhorn, and some who have done previous work on similar concepts, but this doesn't seem to be enough to draw attention. On a similar note, there is a guy in the Channel 9 forums posting 'posters' to get Microsoft employees more active.

       

         More transparency would help by leaps and bounds. Hiding UI concepts is a joke--I'll tell you how much of a joke it is: there is a creative director who does not work at Microsoft anymore, but when he did, he worked on Aero for 5 years. 5 years. I'll tell you, if they would have been open about designs, they would probably have a *revolutionary* UI when longhorn ships. Sure, maybe Apple would have snatched some bits and pieces. But, that is the beauty about transparency. Since Apple would go ahead on those pieces, it would allow Microsoft and others to design the next new paradigm on top of those said pieces. At least this is what I think. Maybe I am totally wrong. Let me know.

         And, in 5 years, do you know how many concept designs I could come up with, not to mention a team of designers...But, even bigger, a community of people...

       

         Many say that retraining is the biggest obstacle in keeping Microsoft from implementing a totally unique and futuristic UI. I think that is a load of crap. Who ever said you would have to scrap the Windows 2000 look? No one. You could have the futuristic one as an option you explicitly choose. Sure, Apple has a niche market, but I don't see why this wouldn't work.

         Multiple UXs are not only the future, they are the only way to go. The bridge between an advaced power user and my grandma is way too big for a one-size-fits-all. I will embrace this trend, have you? Seriously...

       

         I'm just an idiot throwing around ideas here, and I don't know anything--but, think about the people who do know things, lots of them. I'm sure they have lots of advice for making a great product. Ask some people over at frog design or IDEO--they know how to build great products.

         Let's get some real thought going. Start in the comments, or on your own blogs, or on the Channel9 forums, or Neowin...I don't care, let's just start it. The waiting has gone on long enough.

      P.S.    Have you seen the news that IE is going to have tabs. Did I miss the keynote speech by BillG on this news? Anyway, it is kind of corny to hype this feature--since I have already explored ideas for better tab implementations in response to their nonsense. I relate this to Rory's new Notepad. I don't understand why IE gets the hype they do. Yes, in linking to them and talking about this, I am giving them hype, too.

      PostTypeIcon
      4,034 Views
    5. Longhorn Start Menu

         How do I always start a post? Of course, with a question. So here goes...

         What is a start menu? It shouldn't be a menu, that's for sure. It's more like a start screen. What do you want to happen when you see a start screen? Probably, you want to see things you haven't seen in a while--since you last "started". That makes sense to me. Also, turn the key and go somewhere. A task based approach...People want to accomplish a goal. Then, another, and another...Do you drive fast or slow? Well, these should be taken into account. Some people still only use the keyboard and lots of command prompt windows. While, others read everything and take their time in selecting large icons to go somewhere. In the middle, there are people who do a little of both.

         So, people want to see things that have changed in the system and do tasks. The system can be their blogoshpere, social network, work, or anything else. It doesn't really matter. And, tasks are things people want to accomplish. Listen to music. Edit a document. Email an old friend. You get the point.

         Well, so I think these are what needs to happen.

         Here is my version of a start screen (click image for original size).

                      

         Take note of the running programs at the very top.

         Compare this to the old start menu in Windows XP

                      

         There is a lot of room for improvement. Since longhorn hasn't shipped, let's start there...

      PostTypeIcon
      5,746 Views
    6. Help with Conviat Agave

         You guys know everything. Seriously. So, lend me a hand.

         For those of you familiar with Conviat Agave, I have since styled all of the web services in honor of Tiger Dashboard. And, for those who don't know, Conviat Agave is essentially the next version of AOL or MSN Explorer. A browser with nice-ities for people who don't like to click much. No need to download my program, though, because I haven't and won't update my site until I figure out my problems.

         So here it is. Based on the descripting above, I have an integrated browser, favorites, web search, and web services (stocks, weather, news, etc). I think I have correctly identified the problem in that people find things too complex. For example, when someone wants the movie listings, they just want to click something that says 'Movies' and get them. Nothing else--and, be sure to make it look nice. Here is a screen shot of the stocks (click image for original size).

          

         So, there it is. But, honestly, I'm not happy. The concept isn't clicking. I know users are having a problem, but I don't think I am connecting. Please help? Am I correct? Is it done wrong? Is it not a problem? Bad implementation?

      PostTypeIcon
      2,391 Views
    7. Better Service

      Filed under:

         Why are there 10 million instant messaging applications? MSN, Yahoo, AIM, Skype...

         Let me tell you, an instant message at its most basic form is a commodity. Trust me. There are special services layered on top, but at the base (the text) it's a commodity. So, if all of these operating system vendors are in the business of APIs, which they are, because the operating system is a commodity, why don't they support entities like instant messages. Sending, receiving, presence, multi-casting, etc. That is their business, right?

         On top of that, build in extensibility, so that IM clients can broadcast their capabilities on top of the commodity type. MSN can add everything they want right on type of the base. They can add their blogging and avatar features. Anything, really.

         Why stop there? How about adding the same type of thing for mail messages, appointments, tasks, and text documents. These are almost like APIs. There has to be some way to standardize formats to a reasonable degree. No one is saying throwing your competitive edge out the window. Just make everything a lot nicer to deal with, for everyone. Because, to be honest, whether you do this or not, Word Perfect and AIM are still going to ship. Just what are you really accomplishing by the lock-out. You build it, they build it, it's all the same.

         So, if I have to build instant messaging into my application, I *am* going to do it. Just because MSN is out there doesn't stop me. Let's just get a little bit smarter about it and put these things into the operating system. Now, you may be thinking, there are APIs. But, it's not enought to provide the ability, without the service. I shouldn't have to re-subscribe to every buddy in every program or IM client, right. By all means, tell me if I am wrong at any point.

         Since, Longhorn hasn't shipped, let's start there...Sound like a plan?

         For the sake of innovation...Please...

       

      PostTypeIcon
      2,120 Views
    8. More complex applications - Menu

      Filed under:

         Preople argue that the menu is the only way you can display selection choices for a complex application. I totally disagree, so I worked up an example.

         Here is what I envision as one alternative to a complex menu (click image for original size):

               

         Remember, statistical grouping is going to be the norm, so if you don't do it now, you are going to lose business (no questions asked). People have usage habits, but they are not going to take the time to tell you, so you have to figure them out on your own. They have something in their mind that they want to do, and the longer it takes them to accomplish the task, the more porbable they are going to quit using your software (and the task).

         Also note that I have ridden my application from the ambiguous menu title names (File? -- Agave Options instead). In place, I have just a few big categories--meaningful ones, at that. Search is just as important, so don't leave that out.

      PostTypeIcon
      2,447 Views
    9. Design practices that have been Hyper-Extended

      Filed under:

         Most people want good looking software, but really don't know how to get it. They are confident about one thing, though: do it yourself (DIY). They are not willing to make the investment to have a real designer help them out. That's fine, it's a business decision that they have obviously weighed. So, the next best thing is to copy the look of your favorite piece of software. Which by all means is fine. The problem lies therein the fact that some things are copied over without reason.

         In spite of everything, I think the best principle is simplicity. Cut all the crap except for the bare minimum, and then go from there. Features and Usability are inversely proportional. If you add more features, the usability of your software will decrease. So, take into account a novice's experience. It's amazing how many applications are done in Windows, when they don't really offer any features that aren't available in the browser. Here is my take on some features that have seen better days...

       

      The Menu

         One of the most over-used design practices. A menu *was* a great idea--hide selection options from the user in a hierarchical fashion. But, the idea became commonplace for applications, almost to the point that it must run on Win32--which is not good. So, everyone put a menu in their application even if they didn't need it. More so, the menu titles are ambiguous. "File"?

         The web has a lot better design for navigation. Take notes...I know I am. New research speculates that breadcrumbs and main navigations bars don't work. As a replacement, just redirect the user back to the starting point and let me them start over. It's a task oriented world, remember. The goal is to finish the task. Then, start another...repeat...

       

      Tabs

         Again, we have a problem--too much to display, too little space. So, we use tabs. The problem is that tabs are as antiquated as menus. There are a lot better ways to envision information, which is the goal of a tab. Try orienting a list of links in a vertical direction. It takes care of space a lot better. But, still the problem isn't really fixed. For things that are in your short-term memory, images can help with recall better than they can with long-term. So, if the user hasn't used a feature in the last couple of days, images usually don't help with recall that much. In that case, simple text is always best. Don't get me wrong, text is always good. Don't ever leave it out. Tooltips can sometimes be the replacement, but be careful.

         If your list is small, you can usually get away with using images that are synonymous with the textual meaning. Small being the keyword (7 or less). I use both, I think it is the best mix. Here is an example of my application I am working on (.NET 1.X), in which I have an integrated browser.

               [Click image for original size]

               

       

      Toolbars

         Same story, different feature. Toolbars severely decrease usability because there are so many options choose from. Text editors have nailed a lot of the issues by creating good icons, but it may be that we have been around text editors for so long. I have yet to test a novice that hasn't yet used a text editor.

         What about some smart filtering. If I am doing a specific task, give me similar actions, not everything. Statistics, statistics, statistic...Do them, or lose out to your competitors who will do them.

      PostTypeIcon
      3,459 Views
    10. Avalon App

      Filed under:
      [Click for original size]
      PostTypeIcon
      4,409 Views
    11. Indigo is Uninteresting

      Filed under:

      Indigo is uninteresting. Wait, don't jump to conclusions. Indigo is uninteresting because they have done such a good job of removing communication details from my problem space. Isn't this the ultimate goal of any API, sure.

       

      Now, I am able to take the freed time and spend it on other problem domains like the user experience. The plug-and-send architecture is easy, and doesn't require much thought.

      Software projects never get shorter--we just build more elaborate systems.

       

      I recently needed communication, so I created a ServiceHost, and they took care of it--thanks Indigo.

      using (ServiceHost<T> serviceHost = new ServiceHost<T>("address"))

      {

               // ...

      }

      Now, what is the distributed systems group (DSG) up to? I see that most people have already made the transition over to this new project. I think it is more of a product, consumable albeit, but above the framework that was just built. My guess is a grid computing architecture (or something similar in those respects--a true realization of distributed computing). What do you think?

      PostTypeIcon
      2,251 Views
    12. Animation Timing

      Filed under:

       

      <PointAnimation Duration="0:0:2.5" From="0" To="50" />

       

      The time format (as in Duration, above) is separated as follows:

      [days : hours : seconds]  --Docs are wrong

      UPDATE: [hours:minutes:seconds]

       

      --I have been confused when I see it like this, so now it is clarified.

      PostTypeIcon
      1,967 Views
    13. Avalon Color Wheel - Almost done

      Filed under:

      Ok, I almost have a color wheel implemented...More stuff needs to be added, but the start is there. I am trying to do a throw-back to all the real artists who use pigmented oils--the true way. I like to start with a swatch and add color as needed. The color wheel helps me visualize complementary colors much better, and colors that are off-limits in a scheme.

              

      So, what's the hold up? Well, I am having trouble binding my brush onto the swatches you see above.

      <DrawingBrush Viewbox="-0.826 -0.457 367 160">
         <
      DrawingBrush.Drawing>
            <
      Drawing>
               <
      Path Fill="Blue"
                   Data="M188.174,140.543c-10.223-60.364-85.065-23.653-120.058-11.51c-12.999,4.511-36.422,16.566-50.126,10.609
                  C0.959,132.238-3.894,105.738,3.067,90.77c9.314-20.029,27.788-42.197,45.346-55.234c31.935-23.71,69.564-18.638,104.604-4.507
                  c20.978,8.46,70.215,45.082,95.009,30.28c19.36-11.558,15.953-44.714,38.163-56.403c18.588-9.782,47.621-4.15,62.409,9.956
                  c20.764,19.805,19.279,52.14,11.421,77.871c-4.177,13.675-14.11,25.26-23.075,36.037c-5.448,6.55-10.759,17.862-17.039,22.673
                  c-11.761,9.01-39.126,8.467-52.697,7.013c-7.803-0.836-14.537-2.253-20.551-7.625c-1.538-1.375-5.887-8.626-7.46-9.187
                  c-6.952-2.476-14.823,5.593-22.467,3.997c-4.225-0.882-5.426-3.634-8.893-5.347c-7.32-3.617-15.494-6.325-23.664-7.749
                  L188.174,140.543z
      " />
               </Drawing>
           </DrawingBrush.Drawing>
      </
      DrawingBrush>

      The bind statement is not working...Kudos to anyone out there with the answer. I'll post part 2 when I get it working.

      PostTypeIcon
      1,947 Views